@cds/core 5.6.0 → 5.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/_virtual/_virtual_library-entry-points +1 -1
  2. package/accordion/accordion-content.element.scss.js +1 -1
  3. package/accordion/accordion-header.element.scss.js +1 -1
  4. package/accordion/accordion-panel.element.d.ts +3 -3
  5. package/accordion/accordion-panel.element.scss.js +1 -1
  6. package/alert/alert-actions.element.d.ts +2 -2
  7. package/alert/alert-actions.element.js +1 -1
  8. package/alert/alert-group.element.d.ts +4 -7
  9. package/alert/alert-group.element.js +1 -1
  10. package/alert/alert-group.element.js.map +1 -1
  11. package/alert/alert-group.element.scss.js +1 -1
  12. package/alert/alert.element.d.ts +4 -3
  13. package/alert/alert.element.scss.js +1 -1
  14. package/badge/badge.element.d.ts +1 -1
  15. package/badge/badge.element.scss.js +1 -1
  16. package/breadcrumb/breadcrumb.element.d.ts +1 -1
  17. package/breadcrumb/breadcrumb.element.js +1 -1
  18. package/breadcrumb/breadcrumb.element.js.map +1 -1
  19. package/button/button.element.d.ts +5 -3
  20. package/button/button.element.js +1 -1
  21. package/button/button.element.js.map +1 -1
  22. package/card/card.element.d.ts +1 -1
  23. package/card/card.element.js +1 -1
  24. package/card/card.element.js.map +1 -1
  25. package/card/card.element.scss.js +1 -1
  26. package/checkbox/checkbox.element.scss.js +1 -1
  27. package/custom-elements.json +5214 -4141
  28. package/custom-elements.legacy.json +34 -212
  29. package/file/file.element.d.ts +2 -1
  30. package/forms/control/control.element.d.ts +4 -3
  31. package/forms/control/control.element.js.map +1 -1
  32. package/forms/control-action/control-action.element.d.ts +2 -1
  33. package/forms/control-group/control-group.element.d.ts +4 -3
  34. package/forms/control-group/control-group.element.js.map +1 -1
  35. package/forms/control-inline/control-inline.element.d.ts +3 -2
  36. package/forms/control-label/control-label.element.scss.js +1 -1
  37. package/forms/control-message/control-message.element.scss.js +1 -1
  38. package/forms/form-group/form-group.element.d.ts +3 -3
  39. package/global.css +1 -0
  40. package/global.min.css +1 -1
  41. package/icon/icon.element.d.ts +3 -3
  42. package/icon/icon.element.scss.js +1 -1
  43. package/icon/utils/icon.classnames.d.ts +1 -0
  44. package/icon/utils/icon.classnames.js +1 -1
  45. package/icon/utils/icon.classnames.js.map +1 -1
  46. package/input/input-group.element.d.ts +2 -1
  47. package/input/input.element.scss.js +1 -1
  48. package/internal/base/base.element.scss.js +1 -1
  49. package/internal/base/button.base.d.ts +2 -4
  50. package/internal/base/button.base.js +1 -1
  51. package/internal/base/button.base.js.map +1 -1
  52. package/internal/decorators/property.js +1 -1
  53. package/internal/decorators/property.js.map +1 -1
  54. package/internal/index.d.ts +3 -0
  55. package/internal/index.js +1 -1
  56. package/internal/index.js.map +1 -1
  57. package/internal/motion/interfaces.d.ts +1 -1
  58. package/internal/motion/utils.d.ts +4 -3
  59. package/internal/services/i18n.service.d.ts +8 -0
  60. package/internal/services/i18n.service.js +1 -1
  61. package/internal/services/i18n.service.js.map +1 -1
  62. package/internal/utils/css.d.ts +1 -0
  63. package/internal/utils/css.js +1 -1
  64. package/internal/utils/css.js.map +1 -1
  65. package/internal/utils/environment.d.ts +2 -0
  66. package/internal/utils/environment.js +2 -0
  67. package/internal/utils/environment.js.map +1 -0
  68. package/internal/utils/events.js +1 -1
  69. package/internal/utils/events.js.map +1 -1
  70. package/internal/utils/exists.d.ts +1 -4
  71. package/internal/utils/exists.js +1 -1
  72. package/internal/utils/exists.js.map +1 -1
  73. package/internal/utils/global.js +1 -1
  74. package/internal/utils/global.js.map +1 -1
  75. package/internal/utils/lit.d.ts +2 -2
  76. package/internal/utils/register.js +1 -1
  77. package/internal/utils/register.js.map +1 -1
  78. package/internal/utils/string.d.ts +1 -0
  79. package/internal/utils/string.js +1 -1
  80. package/internal/utils/string.js.map +1 -1
  81. package/internal-components/overlay/overlay.element.d.ts +6 -9
  82. package/internal-components/overlay/overlay.element.js +1 -1
  83. package/internal-components/overlay/overlay.element.js.map +1 -1
  84. package/modal/modal-content.element.d.ts +2 -4
  85. package/modal/modal-content.element.js.map +1 -1
  86. package/modal/modal.element.d.ts +2 -1
  87. package/navigation/navigation-item.element.d.ts +0 -1
  88. package/navigation/navigation-item.element.js +1 -1
  89. package/navigation/navigation-item.element.js.map +1 -1
  90. package/navigation/navigation-item.element.scss.js +1 -1
  91. package/navigation/navigation-start.element.d.ts +1 -3
  92. package/navigation/navigation-start.element.js +1 -1
  93. package/navigation/navigation-start.element.js.map +1 -1
  94. package/navigation/navigation.element.d.ts +1 -6
  95. package/navigation/navigation.element.js +1 -1
  96. package/navigation/navigation.element.js.map +1 -1
  97. package/package.json +9 -9
  98. package/pagination/pagination-button.element.d.ts +2 -1
  99. package/pagination/pagination.element.d.ts +2 -2
  100. package/password/password.element.d.ts +0 -1
  101. package/password/password.element.js +1 -1
  102. package/password/password.element.js.map +1 -1
  103. package/polyfills/aria-reflect.d.ts +45 -0
  104. package/polyfills/aria-reflect.js +2 -0
  105. package/polyfills/aria-reflect.js.map +1 -0
  106. package/polyfills/index.d.ts +1 -0
  107. package/polyfills/index.js +2 -0
  108. package/{selection-panels → polyfills}/index.js.map +0 -0
  109. package/progress-circle/progress-circle.element.d.ts +26 -3
  110. package/progress-circle/progress-circle.element.js +1 -1
  111. package/progress-circle/progress-circle.element.js.map +1 -1
  112. package/progress-circle/progress-circle.utils.d.ts +6 -0
  113. package/progress-circle/progress-circle.utils.js +2 -0
  114. package/progress-circle/progress-circle.utils.js.map +1 -0
  115. package/radio/radio-group.element.d.ts +2 -1
  116. package/radio/radio.element.d.ts +2 -1
  117. package/radio/radio.element.scss.js +1 -1
  118. package/range/range.element.d.ts +2 -1
  119. package/select/select.element.d.ts +2 -1
  120. package/select/select.global.scss.js +1 -1
  121. package/selection-panels/checkbox/index.d.ts +0 -1
  122. package/selection-panels/radio/index.d.ts +0 -1
  123. package/styles/module.tokens.css +1 -0
  124. package/styles/module.tokens.min.css +1 -1
  125. package/tag/tag.element.d.ts +2 -1
  126. package/tag/tag.element.scss.js +1 -1
  127. package/textarea/textarea.element.scss.js +1 -1
  128. package/toggle/toggle.element.d.ts +2 -1
  129. package/toggle/toggle.element.js.map +1 -1
  130. package/tokens/tokens.android.xml +1 -0
  131. package/tokens/tokens.d.ts +1 -0
  132. package/tokens/tokens.ios.swift +1 -0
  133. package/tokens/tokens.js +1 -0
  134. package/tokens/tokens.json +3 -0
  135. package/tokens/tokens.scss +1 -0
  136. package/tree-view/tree-item.element.d.ts +3 -7
  137. package/tree-view/tree-item.element.js +1 -1
  138. package/tree-view/tree-item.element.js.map +1 -1
  139. package/tree-view/tree-item.element.scss.js +1 -1
  140. package/tree-view/tree.element.d.ts +0 -4
  141. package/tree-view/tree.element.js +1 -1
  142. package/tree-view/tree.element.js.map +1 -1
  143. package/navigation/navigation-start.element.scss.js +0 -6
  144. package/navigation/navigation-start.element.scss.js.map +0 -1
  145. package/selection-panels/index.d.ts +0 -11
  146. package/selection-panels/index.js +0 -2
  147. package/selection-panels/register.d.ts +0 -8
  148. package/selection-panels/register.js +0 -2
  149. package/selection-panels/register.js.map +0 -1
@@ -0,0 +1,45 @@
1
+ declare global {
2
+ interface Element {
3
+ role: any;
4
+ ariaActiveDescendant: any;
5
+ ariaControls: any;
6
+ ariaLabelledBy: any;
7
+ ariaDisabled: any;
8
+ ariaExpanded: any;
9
+ ariaSelected: any;
10
+ ariaAtomic: any;
11
+ ariaAutoComplete: any;
12
+ ariaBusy: any;
13
+ ariaChecked: any;
14
+ ariaColCount: any;
15
+ ariaColIndex: any;
16
+ ariaColSpan: any;
17
+ ariaCurrent: any;
18
+ ariaHasPopup: any;
19
+ ariaHidden: any;
20
+ ariaKeyShortcuts: any;
21
+ ariaLabel: any;
22
+ ariaLevel: any;
23
+ ariaLive: any;
24
+ ariaModal: any;
25
+ ariaMultiLine: any;
26
+ ariaMultiSelectable: any;
27
+ ariaOrientation: any;
28
+ ariaPlaceholder: any;
29
+ ariaPosInSet: any;
30
+ ariaPressed: any;
31
+ ariaReadOnly: any;
32
+ ariaRequired: any;
33
+ ariaRoleDescription: any;
34
+ ariaRowCount: any;
35
+ ariaRowIndex: any;
36
+ ariaRowSpan: any;
37
+ ariaSetSize: any;
38
+ ariaSort: any;
39
+ ariaValueMax: any;
40
+ ariaValueMin: any;
41
+ ariaValueNow: any;
42
+ ariaValueText: any;
43
+ }
44
+ }
45
+ export declare function reflect(element: HTMLElement | Element, attributeName: string, propertyName: string): void;
@@ -0,0 +1,2 @@
1
+ let e=!1,t=!1;function o(e,t,o){Object.defineProperty(e,o,{configurable:!0,enumerable:!0,get:function(){return this.hasAttribute(t)?this.getAttribute(t):null},set:function(e){null!==e?this.setAttribute(t,e):this.removeAttribute(t)}})}e||Element.prototype.hasOwnProperty("role")||(o(Element.prototype,"role","role"),e=!0),t||Element.prototype.hasOwnProperty("ariaLabel")||(t=!0,["ActiveDescendant","Atomic","AutoComplete","Busy","Checked","ColCount","ColIndex","ColSpan","Controls","Current","DescribedBy","Details","Disabled","ErrorMessage","Expanded","FlowTo","HasPopup","Hidden","Invalid","KeyShortcuts","Label","LabelledBy","Level","Live","Modal","MultiLine","MultiSelectable","Orientation","Owns","Placeholder","PosInSet","Pressed","ReadOnly","Relevant","Required","RoleDescription","RowCount","RowIndex","RowSpan","Selected","SetSize","Sort","ValueMax","ValueMin","ValueNow","ValueText"].forEach((e=>o(Element.prototype,"aria-"+e.toLowerCase(),"aria"+e))));export{o as reflect};
2
+ //# sourceMappingURL=aria-reflect.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"aria-reflect.js","sources":["../../../src/polyfills/aria-reflect.ts"],"sourcesContent":null,"names":["roleRegistered","ariaRegistered","reflect","element","attributeName","propertyName","Object","defineProperty","configurable","enumerable","get","this","hasAttribute","getAttribute","set","value","setAttribute","removeAttribute","Element","prototype","hasOwnProperty","forEach","name","toLowerCase"],"mappings":"AAKA,IAAIA,GAAiB,EACjBC,GAAiB,EA2Dd,SAASC,EAAQC,EAASC,EAAeC,GAC5CC,OAAOC,eAAeJ,EAASE,EAAc,CACzCG,cAAc,EACdC,YAAY,EACZC,IAAK,WACD,OAAOC,KAAKC,aAAaR,GAAiBO,KAAKE,aAAaT,GAAiB,MAEjFU,IAAK,SAAUC,GACG,OAAVA,EACAJ,KAAKK,aAAaZ,EAAeW,GAGjCJ,KAAKM,gBAAgBb,MArEhCJ,GAAmBkB,QAAQC,UAAUC,eAAe,UACrDlB,EAAQgB,QAAQC,UAAW,OAAQ,QACnCnB,GAAiB,GAIhBC,GAAmBiB,QAAQC,UAAUC,eAAe,eACrDnB,GAAiB,EACjB,CACI,mBACA,SACA,eACA,OACA,UACA,WACA,WACA,UACA,WACA,UACA,cACA,UACA,WACA,eACA,WACA,SACA,WACA,SACA,UACA,eACA,QACA,aACA,QACA,OACA,QACA,YACA,kBACA,cACA,OACA,cACA,WACA,UACA,WACA,WACA,WACA,kBACA,WACA,WACA,UACA,WACA,UACA,OACA,WACA,WACA,WACA,aACFoB,SAAQC,GAAQpB,EAAQgB,QAAQC,UAAW,QAAQG,EAAKC,cAAiB,OAAOD"}
@@ -0,0 +1 @@
1
+ import './aria-reflect.js';
@@ -0,0 +1,2 @@
1
+ import"./aria-reflect.js";
2
+ //# sourceMappingURL=index.js.map
File without changes
@@ -1,5 +1,5 @@
1
1
  import { StatusTypes } from '@cds/core/internal';
2
- import { LitElement } from 'lit';
2
+ import { LitElement, PropertyValues } from 'lit';
3
3
  /**
4
4
  * Circular progress indicators provide a method to track how close long-running tasks are to
5
5
  * completion. Circular progress offer a compact way to track progress in a variety of situations.
@@ -54,9 +54,32 @@ export declare class CdsProgressCircle extends LitElement {
54
54
  * @type {string | sm | md | lg | xl | xxl}
55
55
  */
56
56
  set size(val: string);
57
- private setAriaAttributes;
57
+ private _ariaLabel;
58
+ /**
59
+ * The aria-label attribute is added here as a convenience. It is not set
60
+ * to a default value.
61
+ *
62
+ * If this attribute/property remains unset, it will default to an i18n string.
63
+ * This means that the aria-label can be customized using the aria-label
64
+ * attribute or by overriding the i18n value for the progress circle.
65
+ */
66
+ get ariaLabel(): string;
67
+ /**
68
+ * Changes the svg glyph displayed in the icon component. Defaults to the 'unknown' icon if
69
+ * the specified icon cannot be found in the icon registry.
70
+ */
71
+ set ariaLabel(newAriaLabel: string);
72
+ i18n: {
73
+ loading: string;
74
+ looping: string;
75
+ };
76
+ /** @private */
77
+ setAriaAttributes(oldValueForAriaLabelCheck?: number): void;
58
78
  connectedCallback(): void;
59
- updated(props: Map<string, any>): void;
79
+ disconnectedCallback(): void;
80
+ protected observers: MutationObserver[];
81
+ firstUpdated(props: PropertyValues<any>): void;
82
+ updated(props: PropertyValues<any>): void;
60
83
  render(): import("lit-html").TemplateResult<1>;
61
84
  static get styles(): import("lit").CSSResultGroup[];
62
85
  }
@@ -1,2 +1,2 @@
1
- import{__decorate as e}from"tslib";import{hasStringPropertyChanged as s,updateEquilateralSizeStyles as t,setAttributes as r,baseStyles as i,property as a}from"@cds/core/internal";import{LitElement as o,html as l}from"lit";import u from"ramda/es/isNil.js";import n from"./progress-circle.element.scss.js";class h extends o{constructor(){super(...arguments),this.status="neutral",this.inverse=!1,this.line=3}get radius(){return 18-Math.ceil(this.line/2)}get circumference(){return 2*Math.PI*this.radius}get progress(){return u(this.value)?30:this.value}get progressOffset(){return(100-this.progress)/100*this.circumference}get size(){return this._size}set size(e){if(s(e,this._size)){const s=this._size;this._size=e,t(this,e),this.requestUpdate("size",s)}}setAriaAttributes(){const e=this.value,s=[["role","progressbar"],["aria-valuemin","0"],["aria-valuemax","100"],["aria-valuenow",e+""]],t=u(e)?[["role","img"],["aria-valuemin",!1],["aria-valuemax",!1],["aria-valuenow",!1]]:s;r(this,...t)}connectedCallback(){super.connectedCallback(),this.setAriaAttributes()}updated(e){super.updated(e),e.has("value")&&this.setAriaAttributes()}render(){return l`<div class="private-host" aria-hidden="true"><div class="progress-wrapper"><svg version="1.1" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false"><circle stroke-width="${this.line}" fill="none" cx="18" cy="18" r="${this.radius}" class="${this.progress>99?"arcstroke":"backstroke"}"/><path d="M 18 18 m 0,-${this.radius} a ${this.radius},${this.radius} 0 1 1 0,${2*this.radius} a ${this.radius},${this.radius} 0 1 1 0,-${2*this.radius}" class="fillstroke arcstroke" stroke-width="${this.line}" stroke-dasharray="${this.circumference}" stroke-dashoffset="${this.progressOffset}" fill="none"/></svg></div></div>`}static get styles(){return[i,n]}}e([a({type:String})],h.prototype,"status",void 0),e([a({type:Boolean})],h.prototype,"inverse",void 0),e([a({type:Number})],h.prototype,"value",void 0),e([a({type:Number})],h.prototype,"line",void 0),e([a({type:String})],h.prototype,"size",null);export{h as CdsProgressCircle};
1
+ import{__decorate as s}from"tslib";import{I18nService as t,hasStringPropertyChanged as e,updateEquilateralSizeStyles as i,isNilOrEmpty as r,setAttributes as a,listenForAttributeChange as o,baseStyles as l,property as h,i18n as n}from"@cds/core/internal";import{LitElement as p,html as u}from"lit";import c from"ramda/es/isNil.js";import d from"./progress-circle.element.scss.js";import{getProgressCircleRadius as b,getAriaLabelOrDefault as g,getDefaultAriaLabel as v,getProgressCircleAriaAttributes as f}from"./progress-circle.utils.js";class m extends p{constructor(){super(...arguments),this.status="neutral",this.inverse=!1,this.line=3,this.i18n=t.keys.progress,this.observers=[]}get radius(){return b(this.line)}get circumference(){return 2*Math.PI*this.radius}get progress(){return c(this.value)?30:this.value}get progressOffset(){return(100-this.progress)/100*this.circumference}get size(){return this._size}set size(s){if(e(s,this._size)){const t=this._size;this._size=s,i(this,s),this.requestUpdate("size",t)}}get ariaLabel(){return g(this._ariaLabel,this.value,this.i18n.loading,this.i18n.looping)}set ariaLabel(s){if(e(s,this._ariaLabel)){const t=this._ariaLabel;this._ariaLabel=s,this.requestUpdate("ariaLabel",t)}}setAriaAttributes(s){const t=this.value;let e;e=r(s)?r(t)||this.ariaLabel!==this.i18n.looping?this.ariaLabel:v(t,this.i18n.loading,this.i18n.looping):g(this._ariaLabel,t,this.i18n.loading,this.i18n.looping,s);const i=f(t,e);a(this,...i)}connectedCallback(){super.connectedCallback(),this.setAriaAttributes()}disconnectedCallback(){super.disconnectedCallback(),this.observers.forEach((s=>s.disconnect()))}firstUpdated(s){super.firstUpdated(s),this.observers.push(o(this,"cds-i18n",(()=>{const s=this.ariaLabel;this.ariaLabel="",this.requestUpdate("ariaLabel",s)})))}updated(s){super.updated(s),s.has("value")?this.setAriaAttributes(s.get("value")):s.has("ariaLabel")?this.setAriaAttributes():s.has("ariaLabelTemplate")&&(this._ariaLabel=null,this.setAriaAttributes(this.value))}render(){return u`<div class="private-host" aria-hidden="true"><div class="progress-wrapper"><svg version="1.1" viewBox="0 0 36 36" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false"><circle stroke-width="${this.line}" fill="none" cx="18" cy="18" r="${this.radius}" class="${this.progress>99?"arcstroke":"backstroke"}"/><path d="M 18 18 m 0,-${this.radius} a ${this.radius},${this.radius} 0 1 1 0,${2*this.radius} a ${this.radius},${this.radius} 0 1 1 0,-${2*this.radius}" class="fillstroke arcstroke" stroke-width="${this.line}" stroke-dasharray="${this.circumference}" stroke-dashoffset="${this.progressOffset}" fill="none"/></svg></div></div>`}static get styles(){return[l,d]}}s([h({type:String})],m.prototype,"status",void 0),s([h({type:Boolean})],m.prototype,"inverse",void 0),s([h({type:Number})],m.prototype,"value",void 0),s([h({type:Number})],m.prototype,"line",void 0),s([h({type:String})],m.prototype,"size",null),s([h({type:String})],m.prototype,"ariaLabel",null),s([n()],m.prototype,"i18n",void 0);export{m as CdsProgressCircle};
2
2
  //# sourceMappingURL=progress-circle.element.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"progress-circle.element.js","sources":["../../../src/progress-circle/progress-circle.element.ts"],"sourcesContent":null,"names":["CdsProgressCircle","LitElement","[object Object]","super","arguments","this","status","inverse","line","radius","Math","ceil","circumference","PI","progress","isNil","value","progressOffset","size","_size","val","hasStringPropertyChanged","oldVal","updateEquilateralSizeStyles","requestUpdate","currentValue","ariaAttrsIfValue","attrsToSet","setAttributes","connectedCallback","setAriaAttributes","props","updated","has","html","styles","baseStyles","__decorate","property","type","String","prototype","Boolean","Number"],"mappings":"gTA4BO,MAAMA,UAA0BC,EACnCC,cACIC,SAASC,WAKTC,KAAKC,OAAS,UAKdD,KAAKE,SAAU,EAMfF,KAAKG,KAAO,EAEhBC,aAOI,OAHsB,GAEHC,KAAKC,KAAKN,KAAKG,KAAO,GAG7CI,oBACI,OAAO,EAAIF,KAAKG,GAAKR,KAAKI,OAG9BK,eAEI,OAAOC,EAAMV,KAAKW,OADM,GACqBX,KAAKW,MAGtDC,qBAEI,OADoB,IACGZ,KAAKS,UADR,IACmCT,KAAKO,cAEhEM,WACI,OAAOb,KAAKc,MAMhBD,SAASE,GACL,GAAIC,EAAyBD,EAAKf,KAAKc,OAAQ,CAC3C,MAAMG,EAASjB,KAAKc,MACpBd,KAAKc,MAAQC,EACbG,EAA4BlB,KAAMe,GAClCf,KAAKmB,cAAc,OAAQF,IAGnCpB,oBACI,MAAMuB,EAAepB,KAAKW,MACpBU,EAAmB,CACrB,CAAC,OAAQ,eACT,CAAC,gBAAiB,KAClB,CAAC,gBAAiB,OAClB,CAAC,gBAAiBD,EAAe,KAQ/BE,EAAaZ,EAAMU,GANA,CACrB,CAAC,OAAQ,OACT,CAAC,iBAAiB,GAClB,CAAC,iBAAiB,GAClB,CAAC,iBAAiB,IAEsCC,EAC5DE,EAAcvB,QAASsB,GAE3BzB,oBACIC,MAAM0B,oBACNxB,KAAKyB,oBAET5B,QAAQ6B,GACJ5B,MAAM6B,QAAQD,GACVA,EAAME,IAAI,UACV5B,KAAKyB,oBAGb5B,SACI,OAAOgC,CAAK,+QAYU7B,KAAKG,wCAIhBH,KAAKI,kBACDJ,KAAKS,SAAW,GAAK,YAAc,wCAG1BT,KAAKI,YAAYJ,KAAKI,UAAUJ,KAAKI,kBAAkB,EAAIJ,KAAKI,YAAYJ,KAC/FI,UAAUJ,KAAKI,mBAAmB,EAAIJ,KAAKI,sDAE1BJ,KAAKG,2BACDH,KAAKO,qCACJP,KAAKY,kDAQpCkB,oBACI,MAAO,CAACC,EAAYD,IAG5BE,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBxC,EAAkByC,UAAW,cAAU,GAC1CJ,EAAW,CACPC,EAAS,CAAEC,KAAMG,WAClB1C,EAAkByC,UAAW,eAAW,GAC3CJ,EAAW,CACPC,EAAS,CAAEC,KAAMI,UAClB3C,EAAkByC,UAAW,aAAS,GACzCJ,EAAW,CACPC,EAAS,CAAEC,KAAMI,UAClB3C,EAAkByC,UAAW,YAAQ,GACxCJ,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBxC,EAAkByC,UAAW,OAAQ"}
1
+ {"version":3,"file":"progress-circle.element.js","sources":["../../../src/progress-circle/progress-circle.element.ts"],"sourcesContent":null,"names":["CdsProgressCircle","LitElement","[object Object]","super","arguments","this","status","inverse","line","i18n","I18nService","keys","progress","observers","radius","getProgressCircleRadius","circumference","Math","PI","isNil","value","progressOffset","size","_size","val","hasStringPropertyChanged","oldVal","updateEquilateralSizeStyles","requestUpdate","ariaLabel","getAriaLabelOrDefault","_ariaLabel","loading","looping","newAriaLabel","oldValueForAriaLabelCheck","currentValue","isNilOrEmpty","getDefaultAriaLabel","attrsToSet","getProgressCircleAriaAttributes","setAttributes","connectedCallback","setAriaAttributes","disconnectedCallback","forEach","o","disconnect","props","firstUpdated","push","listenForAttributeChange","oldAriaLabel","updated","has","get","html","styles","baseStyles","__decorate","property","type","String","prototype","Boolean","Number"],"mappings":"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"}
@@ -0,0 +1,6 @@
1
+ import { HTMLAttributeTuple } from '@cds/core/internal';
2
+ export declare function getProgressCircleRadius(lineThickness: number, viewboxDimension?: number): number;
3
+ export declare function getAriaLabelFromTemplate(currentValue: number, loadingi18n: string, forceToValue?: number): string;
4
+ export declare function getDefaultAriaLabel(currentValue: number | undefined | null, loadingi18n: string, loopingMsg: string): string;
5
+ export declare function getAriaLabelOrDefault(existingAriaLabel: string, currentValue: number, loadingi18n: string, loopingMsg: string, previousValue?: number): string;
6
+ export declare function getProgressCircleAriaAttributes(currentValue: number | undefined | null, ariaLabel: string): HTMLAttributeTuple[];
@@ -0,0 +1,2 @@
1
+ import{isNilOrEmpty as a}from"@cds/core/internal";function r(a,r=36){return r/2-Math.ceil(a/2)}function e(r,e,n){return`${e} ${a(n)?r:n}%`}function n(r,n,i){return a(r)?i:e(r,n)}function i(a,r,i,u,t){switch(!0){case!a:case t&&a===e(r,i,t):return n(r,i,u);default:return a}}function u(r,e){return a(r)?[["role","img"],["aria-valuemin",!1],["aria-valuemax",!1],["aria-valuenow",!1],["aria-label",e]]:[["role","progressbar"],["aria-valuemin","0"],["aria-valuemax","100"],["aria-valuenow",r+""],["aria-label",e]]}export{e as getAriaLabelFromTemplate,i as getAriaLabelOrDefault,n as getDefaultAriaLabel,u as getProgressCircleAriaAttributes,r as getProgressCircleRadius};
2
+ //# sourceMappingURL=progress-circle.utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"progress-circle.utils.js","sources":["../../../src/progress-circle/progress-circle.utils.ts"],"sourcesContent":null,"names":["getProgressCircleRadius","lineThickness","viewboxDimension","Math","ceil","getAriaLabelFromTemplate","currentValue","loadingi18n","forceToValue","isNilOrEmpty","getDefaultAriaLabel","loopingMsg","getAriaLabelOrDefault","existingAriaLabel","previousValue","getProgressCircleAriaAttributes","ariaLabel"],"mappings":"kDAQO,SAASA,EAAwBC,EAAeC,EAAmB,IAMtE,OAHsBA,EAAmB,EAEtBC,KAAKC,KAAKH,EAAgB,GAK1C,SAASI,EAAyBC,EAAcC,EAAaC,GAGhE,MAAO,GAAGD,KAFIE,EAAaD,GAAgBF,EAAeE,KAIvD,SAASE,EAAoBJ,EAAcC,EAAaI,GAC3D,OAAIF,EAAaH,GACNK,EAGAN,EAAyBC,EAAcC,GAG/C,SAASK,EAAsBC,EAAmBP,EAAcC,EAAaI,EAAYG,GAC5F,QAAQ,GACJ,KAAMD,EAEN,KAAKC,GAAiBD,IAAsBR,EAAyBC,EAAcC,EAAaO,GAC5F,OAAOJ,EAAoBJ,EAAcC,EAAaI,GAC1D,QACI,OAAOE,GAGZ,SAASE,EAAgCT,EAAcU,GAC1D,OAAIP,EAAaH,GAEN,CACH,CAAC,OAAQ,OACT,CAAC,iBAAiB,GAClB,CAAC,iBAAiB,GAClB,CAAC,iBAAiB,GAClB,CAAC,aAAcU,IAKZ,CACH,CAAC,OAAQ,eACT,CAAC,gBAAiB,KAClB,CAAC,gBAAiB,OAClB,CAAC,gBAAiBV,EAAe,IACjC,CAAC,aAAcU"}
@@ -1,3 +1,4 @@
1
+ import { PropertyValues } from 'lit';
1
2
  import { CdsInternalControlGroup } from '@cds/core/forms';
2
3
  import { CdsRadio } from './radio.element.js';
3
4
  /**
@@ -29,7 +30,7 @@ export declare class CdsRadioGroup extends CdsInternalControlGroup {
29
30
  protected controls: NodeListOf<CdsRadio>;
30
31
  protected radioName: string;
31
32
  static get styles(): import("lit").CSSResultGroup[];
32
- firstUpdated(props: Map<string, any>): void;
33
+ firstUpdated(props: PropertyValues<any>): void;
33
34
  private associateRadioControls;
34
35
  private syncRadioControls;
35
36
  }
@@ -1,3 +1,4 @@
1
+ import { PropertyValues } from 'lit';
1
2
  import { CdsInternalControlInline } from '@cds/core/forms';
2
3
  /**
3
4
  * Radio
@@ -22,7 +23,7 @@ import { CdsInternalControlInline } from '@cds/core/forms';
22
23
  */
23
24
  export declare class CdsRadio extends CdsInternalControlInline {
24
25
  static get styles(): import("lit").CSSResultGroup[];
25
- firstUpdated(props: Map<string, any>): void;
26
+ firstUpdated(props: PropertyValues<this>): void;
26
27
  /**
27
28
  * Native radio inputs have no concept of an un-checked event. This means for
28
29
  * our radios to update/rerender we need to listen for the other radios in the
@@ -1,2 +1,2 @@
1
- import{css as a}from"lit";var r=a`:host{--width:var(--cds-global-space-7, calc((16 / var(--cds-global-base, 20)) * 1rem));--height:var(--cds-global-space-7, calc((16 / var(--cds-global-base, 20)) * 1rem));--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--fill-box-shadow:none}.input,.input::after{width:var(--width);height:var(--height);border-radius:var(--cds-alias-object-border-radius-300,50%);content:""}.input{min-width:var(--width);border:var(--border);box-shadow:var(--fill-box-shadow);display:inline-block;cursor:pointer}.input::after{position:absolute;top:0;left:0}:host([status=error]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([_checked]){--fill-box-shadow:inset 0 0 0 var(--cds-global-space-4, calc((6 / var(--cds-global-base, 20)) * 1rem)) var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--border:0!important}:host([_disabled]) .input::after{cursor:not-allowed}:host([_disabled][_checked]){--fill-box-shadow:inset 0 0 0 var(--cds-global-space-4, calc((6 / var(--cds-global-base, 20)) * 1rem)) var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--border:0!important}`;export default r;
1
+ import{css as a}from"lit";var r=a`:host{--width:var(--cds-global-space-7, calc((16 / var(--cds-global-base, 20)) * 1rem));--height:var(--cds-global-space-7, calc((16 / var(--cds-global-base, 20)) * 1rem));--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--fill-box-shadow:none}.input,.input::after{width:var(--width);height:var(--height);border-radius:var(--cds-alias-object-border-radius-300,50%);content:""}.input{min-width:var(--width);border:var(--border);box-shadow:var(--fill-box-shadow);display:inline-block;cursor:pointer}.input::after{position:absolute;top:0;left:0}:host([status=error]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([_checked]){--fill-box-shadow:inset 0 0 0 var(--cds-global-space-4, calc((6 / var(--cds-global-base, 20)) * 1rem)) var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--border:0!important}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))}:host([_disabled]) .input::after{cursor:not-allowed}:host([_disabled][_checked]){--fill-box-shadow:inset 0 0 0 var(--cds-global-space-4, calc((6 / var(--cds-global-base, 20)) * 1rem)) var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--border:0!important}`;export default r;
2
2
  //# sourceMappingURL=radio.element.scss.js.map
@@ -1,3 +1,4 @@
1
+ import { PropertyValues } from 'lit';
1
2
  import { CdsControl } from '@cds/core/forms';
2
3
  /**
3
4
  * Range
@@ -29,6 +30,6 @@ export declare class CdsRange extends CdsControl {
29
30
  static get styles(): import("lit").CSSResultGroup[];
30
31
  protected globalStyles: import("lit").CSSResultGroup;
31
32
  protected get inputTemplate(): import("lit-html").TemplateResult<1>;
32
- firstUpdated(props: Map<string, any>): void;
33
+ firstUpdated(props: PropertyValues<this>): void;
33
34
  private setTrackWidth;
34
35
  }
@@ -1,3 +1,4 @@
1
+ import { PropertyValues } from 'lit';
1
2
  import { CdsControl } from '@cds/core/forms';
2
3
  /**
3
4
  * Select
@@ -36,5 +37,5 @@ export declare class CdsSelect extends CdsControl {
36
37
  protected globalStyles: import("lit").CSSResultGroup;
37
38
  protected multiple: boolean;
38
39
  protected size: boolean;
39
- firstUpdated(props: Map<string, any>): void;
40
+ firstUpdated(props: PropertyValues<this>): void;
40
41
  }
@@ -1,2 +1,2 @@
1
- import{css as a}from"lit";var o=a`cds-select option{background:var(--cds-alias-object-container-background,var(--cds-global-color-white,#fff));color:var(--cds-global-typography-color-500,var(--cds-global-color-black,#000));padding:var(--cds-global-space-4,calc((6 / var(--cds-global-base,20)) * 1rem));font-size:var(--cds-global-typography-font-size-3,calc((13 / var(--cds-global-base,20)) * 1rem))}cds-select input::-webkit-calendar-picker-indicator{display:none}`;export default o;
1
+ import{css as a}from"lit";var o=a`cds-select option{background:var(--cds-alias-object-container-background,var(--cds-global-color-white,#fff));color:var(--cds-global-typography-color-400,var(--cds-global-color-construction-900,#21333b));padding:var(--cds-global-space-4,calc((6 / var(--cds-global-base,20)) * 1rem));font-size:var(--cds-global-typography-font-size-3,calc((13 / var(--cds-global-base,20)) * 1rem))}cds-select input::-webkit-calendar-picker-indicator{display:none}`;export default o;
2
2
  //# sourceMappingURL=select.global.scss.js.map
@@ -1,2 +1 @@
1
- /** @private */
2
1
  export * from './checkbox-panel.element.js';
@@ -1,2 +1 @@
1
- /** @private */
2
1
  export * from './radio-panel.element.js';
@@ -354,6 +354,7 @@
354
354
  --cds-alias-object-opacity-200: hsla(0, 0%, 0%, 0.4);
355
355
  --cds-alias-object-opacity-300: hsla(0, 0%, 0%, 0.6);
356
356
  --cds-alias-object-interaction-outline: Highlight solid 2px;
357
+ --cds-alias-object-interaction-outline-webkit: 5px auto -webkit-focus-ring-color;
357
358
  --cds-alias-object-interaction-outline-offset: 1px;
358
359
  --cds-alias-object-interaction-touch-target: calc((36 / var(--cds-global-base, 20)) * 1rem);
359
360
  --cds-alias-object-interaction-border-color: var(--cds-global-color-construction-500);
@@ -1 +1 @@
1
- :root{--cds-global-layout-space-xxs:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xs:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-sm:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-md:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-lg:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xl:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xxl:calc((96 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-grid-cols:12;--cds-global-layout-width-xs:576px;--cds-global-layout-width-sm:768px;--cds-global-layout-width-md:992px;--cds-global-layout-width-lg:1200px;--cds-global-layout-width-xl:1440px;--cds-global-space-0:calc((0 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-1:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-2:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-3:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-4:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-5:calc((8 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-6:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-7:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-8:calc((18 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-9:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-10:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-11:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-12:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-13:calc((72 / var(--cds-global-base, 20)) * 1rem);--cds-global-color-black:hsl(0, 0%, 0%);--cds-global-color-white:hsl(0, 0%, 100%);--cds-global-color-green-50:hsl(93, 80%, 94%);--cds-global-color-green-100:hsl(93, 80%, 83%);--cds-global-color-green-200:hsl(93, 80%, 70%);--cds-global-color-green-300:hsl(93, 80%, 56%);--cds-global-color-green-400:hsl(93, 80%, 48%);--cds-global-color-green-500:hsl(93, 80%, 44%);--cds-global-color-green-600:hsl(93, 80%, 37%);--cds-global-color-green-700:hsl(93, 80%, 28%);--cds-global-color-green-800:hsl(93, 80%, 23%);--cds-global-color-green-900:hsl(93, 80%, 17%);--cds-global-color-green-1000:hsl(93, 80%, 12%);--cds-global-color-blue-50:hsl(198, 100%, 95%);--cds-global-color-blue-100:hsl(198, 100%, 87%);--cds-global-color-blue-200:hsl(198, 100%, 78%);--cds-global-color-blue-300:hsl(198, 100%, 70%);--cds-global-color-blue-400:hsl(198, 100%, 59%);--cds-global-color-blue-500:hsl(198, 100%, 48%);--cds-global-color-blue-600:hsl(198, 100%, 43%);--cds-global-color-blue-700:hsl(198, 100%, 34%);--cds-global-color-blue-800:hsl(198, 100%, 27%);--cds-global-color-blue-900:hsl(198, 100%, 21%);--cds-global-color-blue-1000:hsl(198, 100%, 15%);--cds-global-color-violet-50:hsl(282, 100%, 97%);--cds-global-color-violet-100:hsl(282, 80%, 91%);--cds-global-color-violet-200:hsl(282, 73%, 83%);--cds-global-color-violet-300:hsl(282, 66%, 74%);--cds-global-color-violet-400:hsl(282, 60%, 65%);--cds-global-color-violet-500:hsl(282, 60%, 57%);--cds-global-color-violet-600:hsl(282, 60%, 49%);--cds-global-color-violet-700:hsl(283, 80%, 36%);--cds-global-color-violet-800:hsl(282, 100%, 26%);--cds-global-color-violet-900:hsl(282, 100%, 19%);--cds-global-color-violet-1000:hsl(282, 100%, 14%);--cds-global-color-red-50:hsl(9, 100%, 97%);--cds-global-color-red-100:hsl(9, 100%, 94%);--cds-global-color-red-200:hsl(9, 100%, 88%);--cds-global-color-red-300:hsl(9, 100%, 79%);--cds-global-color-red-400:hsl(9, 100%, 71%);--cds-global-color-red-500:hsl(9, 100%, 65%);--cds-global-color-red-600:hsl(9, 100%, 60%);--cds-global-color-red-700:hsl(9, 100%, 44%);--cds-global-color-red-800:hsl(9, 100%, 38%);--cds-global-color-red-900:hsl(9, 100%, 28%);--cds-global-color-red-1000:hsl(9, 100%, 22%);--cds-global-color-ochre-50:hsl(41, 100%, 96%);--cds-global-color-ochre-100:hsl(41, 100%, 92%);--cds-global-color-ochre-200:hsl(41, 100%, 86%);--cds-global-color-ochre-300:hsl(41, 100%, 78%);--cds-global-color-ochre-400:hsl(41, 100%, 70%);--cds-global-color-ochre-500:hsl(40, 100%, 59%);--cds-global-color-ochre-600:hsl(39, 100%, 50%);--cds-global-color-ochre-700:hsl(38, 100%, 42%);--cds-global-color-ochre-800:hsl(37, 100%, 32%);--cds-global-color-ochre-900:hsl(36, 100%, 27%);--cds-global-color-ochre-1000:hsl(35, 100%, 19%);--cds-global-color-lavender-50:hsl(238, 100%, 96%);--cds-global-color-lavender-100:hsl(238, 58%, 88%);--cds-global-color-lavender-200:hsl(238, 53%, 79%);--cds-global-color-lavender-300:hsl(238, 52%, 70%);--cds-global-color-lavender-400:hsl(238, 58%, 64%);--cds-global-color-lavender-500:hsl(238, 59%, 58%);--cds-global-color-lavender-600:hsl(238, 60%, 52%);--cds-global-color-lavender-700:hsl(238, 69%, 45%);--cds-global-color-lavender-800:hsl(238, 100%, 32%);--cds-global-color-lavender-900:hsl(238, 100%, 22%);--cds-global-color-lavender-1000:hsl(238, 100%, 14%);--cds-global-color-azure-50:hsl(211, 100%, 95%);--cds-global-color-azure-100:hsl(211, 100%, 88%);--cds-global-color-azure-200:hsl(211, 100%, 81%);--cds-global-color-azure-300:hsl(211, 100%, 70%);--cds-global-color-azure-400:hsl(211, 100%, 62%);--cds-global-color-azure-500:hsl(211, 100%, 54%);--cds-global-color-azure-600:hsl(211, 100%, 46%);--cds-global-color-azure-700:hsl(211, 100%, 37%);--cds-global-color-azure-800:hsl(211, 100%, 26%);--cds-global-color-azure-900:hsl(211, 100%, 18%);--cds-global-color-azure-1000:hsl(211, 100%, 14%);--cds-global-color-aqua-50:hsl(184, 100%, 96%);--cds-global-color-aqua-100:hsl(184, 100%, 86%);--cds-global-color-aqua-200:hsl(184, 100%, 75%);--cds-global-color-aqua-300:hsl(184, 100%, 62%);--cds-global-color-aqua-400:hsl(184, 100%, 48%);--cds-global-color-aqua-500:hsl(184, 100%, 43%);--cds-global-color-aqua-600:hsl(184, 100%, 34%);--cds-global-color-aqua-700:hsl(184, 100%, 25%);--cds-global-color-aqua-800:hsl(184, 100%, 18%);--cds-global-color-aqua-900:hsl(184, 100%, 13%);--cds-global-color-aqua-1000:hsl(184, 100%, 10%);--cds-global-color-jade-50:hsl(160, 83%, 95%);--cds-global-color-jade-100:hsl(160, 82%, 88%);--cds-global-color-jade-200:hsl(160, 78%, 78%);--cds-global-color-jade-300:hsl(160, 69%, 65%);--cds-global-color-jade-400:hsl(160, 69%, 53%);--cds-global-color-jade-500:hsl(160, 64%, 45%);--cds-global-color-jade-600:hsl(160, 69%, 36%);--cds-global-color-jade-700:hsl(160, 64%, 30%);--cds-global-color-jade-800:hsl(160, 100%, 21%);--cds-global-color-jade-900:hsl(160, 70%, 21%);--cds-global-color-jade-1000:hsl(160, 69%, 19%);--cds-global-color-yellow-50:hsl(50, 100%, 95%);--cds-global-color-yellow-100:hsl(50, 100%, 84%);--cds-global-color-yellow-200:hsl(50, 100%, 73%);--cds-global-color-yellow-300:hsl(50, 100%, 57%);--cds-global-color-yellow-400:hsl(46, 100%, 52%);--cds-global-color-yellow-500:hsl(44, 100%, 47%);--cds-global-color-yellow-600:hsl(42, 100%, 42%);--cds-global-color-yellow-700:hsl(40, 100%, 35%);--cds-global-color-yellow-800:hsl(40, 100%, 26%);--cds-global-color-yellow-900:hsl(40, 100%, 18%);--cds-global-color-yellow-1000:hsl(40, 100%, 13%);--cds-global-color-tangerine-50:hsl(25, 100%, 95%);--cds-global-color-tangerine-100:hsl(25, 100%, 88%);--cds-global-color-tangerine-200:hsl(25, 94%, 78%);--cds-global-color-tangerine-300:hsl(25, 100%, 72%);--cds-global-color-tangerine-400:hsl(25, 100%, 62%);--cds-global-color-tangerine-500:hsl(25, 100%, 48%);--cds-global-color-tangerine-600:hsl(25, 100%, 41%);--cds-global-color-tangerine-700:hsl(25, 100%, 34%);--cds-global-color-tangerine-800:hsl(25, 100%, 25%);--cds-global-color-tangerine-900:hsl(25, 100%, 19%);--cds-global-color-tangerine-1000:hsl(25, 100%, 15%);--cds-global-color-magenta-50:hsl(345, 100%, 95%);--cds-global-color-magenta-100:hsl(345, 100%, 87%);--cds-global-color-magenta-200:hsl(345, 100%, 79%);--cds-global-color-magenta-300:hsl(345, 100%, 70%);--cds-global-color-magenta-400:hsl(345, 100%, 61%);--cds-global-color-magenta-500:hsl(345, 81%, 50%);--cds-global-color-magenta-600:hsl(345, 83%, 40%);--cds-global-color-magenta-700:hsl(345, 91%, 31%);--cds-global-color-magenta-800:hsl(345, 100%, 24%);--cds-global-color-magenta-900:hsl(345, 100%, 19%);--cds-global-color-magenta-1000:hsl(345, 100%, 15%);--cds-global-color-pink-50:hsl(324, 100%, 97%);--cds-global-color-pink-100:hsl(324, 95%, 91%);--cds-global-color-pink-200:hsl(324, 84%, 81%);--cds-global-color-pink-300:hsl(324, 78%, 70%);--cds-global-color-pink-400:hsl(324, 78%, 62%);--cds-global-color-pink-500:hsl(324, 64%, 51%);--cds-global-color-pink-600:hsl(324, 80%, 39%);--cds-global-color-pink-700:hsl(324, 100%, 30%);--cds-global-color-pink-800:hsl(324, 100%, 24%);--cds-global-color-pink-900:hsl(324, 100%, 18%);--cds-global-color-pink-1000:hsl(324, 100%, 15%);--cds-global-color-warm-gray-50:hsl(282, 3%, 97%);--cds-global-color-warm-gray-100:hsl(282, 3%, 92%);--cds-global-color-warm-gray-200:hsl(282, 3%, 84%);--cds-global-color-warm-gray-300:hsl(282, 3%, 74%);--cds-global-color-warm-gray-400:hsl(282, 3%, 63%);--cds-global-color-warm-gray-500:hsl(282, 3%, 54%);--cds-global-color-warm-gray-600:hsl(282, 3%, 43%);--cds-global-color-warm-gray-700:hsl(282, 3%, 35%);--cds-global-color-warm-gray-800:hsl(282, 3%, 28%);--cds-global-color-warm-gray-900:hsl(282, 3%, 20%);--cds-global-color-warm-gray-1000:hsl(282, 3%, 14%);--cds-global-color-slate-50:hsl(238, 20%, 96%);--cds-global-color-slate-100:hsl(238, 20%, 91%);--cds-global-color-slate-200:hsl(238, 20%, 82%);--cds-global-color-slate-300:hsl(238, 20%, 73%);--cds-global-color-slate-400:hsl(238, 20%, 63%);--cds-global-color-slate-500:hsl(238, 23%, 56%);--cds-global-color-slate-600:hsl(238, 24%, 49%);--cds-global-color-slate-700:hsl(238, 28%, 38%);--cds-global-color-slate-800:hsl(238, 28%, 29%);--cds-global-color-slate-900:hsl(238, 28%, 22%);--cds-global-color-slate-1000:hsl(238, 28%, 14%);--cds-global-color-ice-50:hsl(211, 100%, 97%);--cds-global-color-ice-100:hsl(211, 58%, 90%);--cds-global-color-ice-200:hsl(211, 53%, 81%);--cds-global-color-ice-300:hsl(211, 49%, 70%);--cds-global-color-ice-400:hsl(211, 47%, 62%);--cds-global-color-ice-500:hsl(211, 47%, 53%);--cds-global-color-ice-600:hsl(211, 56%, 44%);--cds-global-color-ice-700:hsl(211, 69%, 34%);--cds-global-color-ice-800:hsl(211, 69%, 27%);--cds-global-color-ice-900:hsl(211, 100%, 20%);--cds-global-color-ice-1000:hsl(211, 100%, 14%);--cds-global-color-cool-gray-50:hsl(211, 20%, 96%);--cds-global-color-cool-gray-100:hsl(211, 20%, 90%);--cds-global-color-cool-gray-200:hsl(211, 20%, 81%);--cds-global-color-cool-gray-300:hsl(211, 20%, 72%);--cds-global-color-cool-gray-400:hsl(211, 20%, 61%);--cds-global-color-cool-gray-500:hsl(211, 20%, 53%);--cds-global-color-cool-gray-600:hsl(211, 20%, 44%);--cds-global-color-cool-gray-700:hsl(211, 23%, 36%);--cds-global-color-cool-gray-800:hsl(211, 30%, 28%);--cds-global-color-cool-gray-900:hsl(211, 40%, 22%);--cds-global-color-cool-gray-1000:hsl(211, 63%, 14%);--cds-global-color-tan-50:hsl(41, 23%, 96%);--cds-global-color-tan-100:hsl(41, 22%, 91%);--cds-global-color-tan-200:hsl(41, 27%, 82%);--cds-global-color-tan-300:hsl(41, 23%, 68%);--cds-global-color-tan-400:hsl(41, 23%, 58%);--cds-global-color-tan-500:hsl(41, 20%, 47%);--cds-global-color-tan-600:hsl(41, 20%, 40%);--cds-global-color-tan-700:hsl(41, 20%, 32%);--cds-global-color-tan-800:hsl(41, 23%, 26%);--cds-global-color-tan-900:hsl(41, 23%, 21%);--cds-global-color-tan-1000:hsl(41, 22%, 16%);--cds-global-color-construction-50:hsl(198, 36%, 96%);--cds-global-color-construction-100:hsl(198, 20%, 91%);--cds-global-color-construction-200:hsl(198, 14%, 82%);--cds-global-color-construction-300:hsl(198, 10%, 71%);--cds-global-color-construction-400:hsl(198, 9%, 56%);--cds-global-color-construction-500:hsl(198, 10%, 46%);--cds-global-color-construction-600:hsl(198, 14%, 36%);--cds-global-color-construction-700:hsl(198, 19%, 28%);--cds-global-color-construction-800:hsl(198, 23%, 23%);--cds-global-color-construction-900:hsl(198, 28%, 18%);--cds-global-color-construction-1000:hsl(198, 30%, 15%);--cds-global-color-gray-0:hsl(0, 0%, 100%);--cds-global-color-gray-50:hsl(0, 0%, 98%);--cds-global-color-gray-100:hsl(0, 0%, 95%);--cds-global-color-gray-200:hsl(0, 0%, 91%);--cds-global-color-gray-300:hsl(0, 0%, 87%);--cds-global-color-gray-400:hsl(0, 0%, 80%);--cds-global-color-gray-500:hsl(0, 0%, 70%);--cds-global-color-gray-600:hsl(0, 0%, 55%);--cds-global-color-gray-700:hsl(0, 0%, 40%);--cds-global-color-gray-800:hsl(0, 0%, 27%);--cds-global-color-gray-900:hsl(0, 0%, 20%);--cds-global-color-gray-1000:hsl(0, 0%, 0%);--cds-global-typography-color-100:var(--cds-global-color-white);--cds-global-typography-color-200:var(--cds-global-color-construction-600);--cds-global-typography-color-300:var(--cds-global-color-construction-800);--cds-global-typography-color-400:var(--cds-global-color-construction-900);--cds-global-typography-color-500:var(--cds-global-color-black);--cds-global-typography-font-weight-light:300;--cds-global-typography-font-weight-regular:400;--cds-global-typography-font-weight-medium:500;--cds-global-typography-font-weight-semibold:600;--cds-global-typography-font-weight-bold:600;--cds-global-typography-font-weight-extrabold:600;--cds-global-typography-font-size-0:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-1:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-2:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-3:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-4:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-5:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-6:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-7:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-8:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-9:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-base-font-size:125%;--cds-global-typography-base-font-size-px:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-header-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-monospace-font-family:ui-monospace, Consolas, Menlo, Monaco, monospace;--cds-global-typography-top-gap-height:0.1475em;--cds-global-typography-ascender-height:0.1703em;--cds-global-typography-x-height:0.517em;--cds-global-typography-link-color:var(--cds-global-color-blue-800);--cds-global-typography-link-color-hover:var(--cds-global-color-blue-900);--cds-global-typography-link-color-visited:var(--cds-global-color-lavender-600);--cds-global-typography-link-color-visited-hover:var(--cds-global-color-lavender-700);--cds-global-typography-body-font-size:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-body-line-height:1.42857em;--cds-global-typography-body-letter-spacing:-0.014286em;--cds-global-typography-body-font-weight:400;--cds-global-typography-display-font-size:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-display-line-height:1.1em;--cds-global-typography-display-letter-spacing:-0.0125em;--cds-global-typography-display-font-weight:400;--cds-global-typography-heading-font-size:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-heading-line-height:1.125em;--cds-global-typography-heading-letter-spacing:-0.0125em;--cds-global-typography-heading-font-weight:400;--cds-global-typography-title-font-size:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-title-line-height:1.16667em;--cds-global-typography-title-letter-spacing:-0.008333em;--cds-global-typography-title-font-weight:400;--cds-global-typography-section-font-size:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-section-line-height:1.2em;--cds-global-typography-section-letter-spacing:-0.01em;--cds-global-typography-section-font-weight:400;--cds-global-typography-subsection-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-subsection-line-height:1.25em;--cds-global-typography-subsection-letter-spacing:-0.0125em;--cds-global-typography-subsection-font-weight:400;--cds-global-typography-message-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-message-line-height:1.25em;--cds-global-typography-message-letter-spacing:-0.0125em;--cds-global-typography-message-font-weight:calc((400 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-font-size:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-line-height:1.23077em;--cds-global-typography-secondary-letter-spacing:-0.007692em;--cds-global-typography-secondary-font-weight:400;--cds-global-typography-caption-font-size:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-caption-line-height:1.454545em;--cds-global-typography-caption-letter-spacing:0.018182em;--cds-global-typography-caption-font-weight:400;--cds-global-typography-smallcaption-font-size:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-smallcaption-line-height:1.2em;--cds-global-typography-smallcaption-letter-spacing:0.05em;--cds-global-typography-smallcaption-font-weight:500;--cds-global-animation-duration-instant:0s;--cds-global-animation-duration-quickest:0.1s;--cds-global-animation-duration-quicker:0.15s;--cds-global-animation-duration-quick:0.2s;--cds-global-animation-duration-secondary:0.3s;--cds-global-animation-duration-primary:0.4s;--cds-global-animation-duration-slow:0.5s;--cds-global-animation-duration-slower:0.7s;--cds-global-animation-duration-slowest:0.8s;--cds-global-animation-easing-primary:cubic-bezier(0,.99,0,.99);--cds-global-animation-easing-secondary:cubic-bezier(0, 1.5, 0.5, 1);--cds-global-animation-easing-loop:cubic-bezier(0.17, 0.4, 0.8, 0.79);--cds-global-base:20;--cds-alias-object-border-radius-100:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-200:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-300:50%;--cds-alias-object-border-width-100:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-200:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-300:calc((3 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-400:calc((4 / var(--cds-global-base, 20)) * 1rem);--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-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);--cds-alias-object-opacity-300:hsla(0, 0%, 0%, 0.6);--cds-alias-object-interaction-outline:Highlight solid 2px;--cds-alias-object-interaction-outline-offset:1px;--cds-alias-object-interaction-touch-target:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-interaction-border-color:var(--cds-global-color-construction-500);--cds-alias-object-interaction-background:var(--cds-global-color-white);--cds-alias-object-interaction-background-hover:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-active:var(--cds-global-color-blue-100);--cds-alias-object-interaction-background-selected:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-disabled:var(--cds-global-color-white);--cds-alias-object-interaction-background-highlight:var(--cds-global-color-blue-700);--cds-alias-object-interaction-color:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-hover:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-active:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-selected:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-disabled:var(--cds-global-color-construction-300);--cds-alias-object-app-background:var(--cds-global-color-gray-50);--cds-alias-object-overlay-background:var(--cds-global-color-white);--cds-alias-object-overlay-backdrop-background:hsla(0, 0%, 0%, 0.6);--cds-alias-object-container-background:var(--cds-global-color-white);--cds-alias-object-container-background-tint:var(--cds-global-color-construction-50);--cds-alias-object-container-background-shade:var(--cds-global-color-construction-100);--cds-alias-object-container-border-color:var(--cds-global-color-construction-200);--cds-alias-status-info:var(--cds-global-color-blue-700);--cds-alias-status-info-tint:var(--cds-global-color-blue-50);--cds-alias-status-info-shade:var(--cds-global-color-blue-800);--cds-alias-status-success:var(--cds-global-color-green-700);--cds-alias-status-success-tint:var(--cds-global-color-green-50);--cds-alias-status-success-shade:var(--cds-global-color-green-800);--cds-alias-status-warning:var(--cds-global-color-ochre-500);--cds-alias-status-warning-tint:var(--cds-global-color-ochre-100);--cds-alias-status-warning-shade:var(--cds-global-color-ochre-600);--cds-alias-status-warning-dark:var(--cds-global-color-ochre-800);--cds-alias-status-danger:var(--cds-global-color-red-700);--cds-alias-status-danger-tint:var(--cds-global-color-red-50);--cds-alias-status-danger-shade:var(--cds-global-color-red-800);--cds-alias-status-danger-dark:var(--cds-global-color-red-900);--cds-alias-status-neutral:var(--cds-global-color-construction-600);--cds-alias-status-neutral-tint:var(--cds-global-color-construction-50);--cds-alias-status-neutral-shade:var(--cds-global-color-construction-700);--cds-alias-status-disabled:var(--cds-global-color-construction-300);--cds-alias-status-disabled-tint:var(--cds-global-color-construction-200);--cds-alias-status-disabled-shade:var(--cds-global-color-construction-400);--cds-alias-status-alt:var(--cds-global-color-violet-700);--cds-alias-status-alt-tint:var(--cds-global-color-violet-600);--cds-alias-status-alt-shade:var(--cds-global-color-violet-900)}
1
+ :root{--cds-global-layout-space-xxs:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xs:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-sm:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-md:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-lg:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xl:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xxl:calc((96 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-grid-cols:12;--cds-global-layout-width-xs:576px;--cds-global-layout-width-sm:768px;--cds-global-layout-width-md:992px;--cds-global-layout-width-lg:1200px;--cds-global-layout-width-xl:1440px;--cds-global-space-0:calc((0 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-1:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-2:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-3:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-4:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-5:calc((8 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-6:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-7:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-8:calc((18 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-9:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-10:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-11:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-12:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-13:calc((72 / var(--cds-global-base, 20)) * 1rem);--cds-global-color-black:hsl(0, 0%, 0%);--cds-global-color-white:hsl(0, 0%, 100%);--cds-global-color-green-50:hsl(93, 80%, 94%);--cds-global-color-green-100:hsl(93, 80%, 83%);--cds-global-color-green-200:hsl(93, 80%, 70%);--cds-global-color-green-300:hsl(93, 80%, 56%);--cds-global-color-green-400:hsl(93, 80%, 48%);--cds-global-color-green-500:hsl(93, 80%, 44%);--cds-global-color-green-600:hsl(93, 80%, 37%);--cds-global-color-green-700:hsl(93, 80%, 28%);--cds-global-color-green-800:hsl(93, 80%, 23%);--cds-global-color-green-900:hsl(93, 80%, 17%);--cds-global-color-green-1000:hsl(93, 80%, 12%);--cds-global-color-blue-50:hsl(198, 100%, 95%);--cds-global-color-blue-100:hsl(198, 100%, 87%);--cds-global-color-blue-200:hsl(198, 100%, 78%);--cds-global-color-blue-300:hsl(198, 100%, 70%);--cds-global-color-blue-400:hsl(198, 100%, 59%);--cds-global-color-blue-500:hsl(198, 100%, 48%);--cds-global-color-blue-600:hsl(198, 100%, 43%);--cds-global-color-blue-700:hsl(198, 100%, 34%);--cds-global-color-blue-800:hsl(198, 100%, 27%);--cds-global-color-blue-900:hsl(198, 100%, 21%);--cds-global-color-blue-1000:hsl(198, 100%, 15%);--cds-global-color-violet-50:hsl(282, 100%, 97%);--cds-global-color-violet-100:hsl(282, 80%, 91%);--cds-global-color-violet-200:hsl(282, 73%, 83%);--cds-global-color-violet-300:hsl(282, 66%, 74%);--cds-global-color-violet-400:hsl(282, 60%, 65%);--cds-global-color-violet-500:hsl(282, 60%, 57%);--cds-global-color-violet-600:hsl(282, 60%, 49%);--cds-global-color-violet-700:hsl(283, 80%, 36%);--cds-global-color-violet-800:hsl(282, 100%, 26%);--cds-global-color-violet-900:hsl(282, 100%, 19%);--cds-global-color-violet-1000:hsl(282, 100%, 14%);--cds-global-color-red-50:hsl(9, 100%, 97%);--cds-global-color-red-100:hsl(9, 100%, 94%);--cds-global-color-red-200:hsl(9, 100%, 88%);--cds-global-color-red-300:hsl(9, 100%, 79%);--cds-global-color-red-400:hsl(9, 100%, 71%);--cds-global-color-red-500:hsl(9, 100%, 65%);--cds-global-color-red-600:hsl(9, 100%, 60%);--cds-global-color-red-700:hsl(9, 100%, 44%);--cds-global-color-red-800:hsl(9, 100%, 38%);--cds-global-color-red-900:hsl(9, 100%, 28%);--cds-global-color-red-1000:hsl(9, 100%, 22%);--cds-global-color-ochre-50:hsl(41, 100%, 96%);--cds-global-color-ochre-100:hsl(41, 100%, 92%);--cds-global-color-ochre-200:hsl(41, 100%, 86%);--cds-global-color-ochre-300:hsl(41, 100%, 78%);--cds-global-color-ochre-400:hsl(41, 100%, 70%);--cds-global-color-ochre-500:hsl(40, 100%, 59%);--cds-global-color-ochre-600:hsl(39, 100%, 50%);--cds-global-color-ochre-700:hsl(38, 100%, 42%);--cds-global-color-ochre-800:hsl(37, 100%, 32%);--cds-global-color-ochre-900:hsl(36, 100%, 27%);--cds-global-color-ochre-1000:hsl(35, 100%, 19%);--cds-global-color-lavender-50:hsl(238, 100%, 96%);--cds-global-color-lavender-100:hsl(238, 58%, 88%);--cds-global-color-lavender-200:hsl(238, 53%, 79%);--cds-global-color-lavender-300:hsl(238, 52%, 70%);--cds-global-color-lavender-400:hsl(238, 58%, 64%);--cds-global-color-lavender-500:hsl(238, 59%, 58%);--cds-global-color-lavender-600:hsl(238, 60%, 52%);--cds-global-color-lavender-700:hsl(238, 69%, 45%);--cds-global-color-lavender-800:hsl(238, 100%, 32%);--cds-global-color-lavender-900:hsl(238, 100%, 22%);--cds-global-color-lavender-1000:hsl(238, 100%, 14%);--cds-global-color-azure-50:hsl(211, 100%, 95%);--cds-global-color-azure-100:hsl(211, 100%, 88%);--cds-global-color-azure-200:hsl(211, 100%, 81%);--cds-global-color-azure-300:hsl(211, 100%, 70%);--cds-global-color-azure-400:hsl(211, 100%, 62%);--cds-global-color-azure-500:hsl(211, 100%, 54%);--cds-global-color-azure-600:hsl(211, 100%, 46%);--cds-global-color-azure-700:hsl(211, 100%, 37%);--cds-global-color-azure-800:hsl(211, 100%, 26%);--cds-global-color-azure-900:hsl(211, 100%, 18%);--cds-global-color-azure-1000:hsl(211, 100%, 14%);--cds-global-color-aqua-50:hsl(184, 100%, 96%);--cds-global-color-aqua-100:hsl(184, 100%, 86%);--cds-global-color-aqua-200:hsl(184, 100%, 75%);--cds-global-color-aqua-300:hsl(184, 100%, 62%);--cds-global-color-aqua-400:hsl(184, 100%, 48%);--cds-global-color-aqua-500:hsl(184, 100%, 43%);--cds-global-color-aqua-600:hsl(184, 100%, 34%);--cds-global-color-aqua-700:hsl(184, 100%, 25%);--cds-global-color-aqua-800:hsl(184, 100%, 18%);--cds-global-color-aqua-900:hsl(184, 100%, 13%);--cds-global-color-aqua-1000:hsl(184, 100%, 10%);--cds-global-color-jade-50:hsl(160, 83%, 95%);--cds-global-color-jade-100:hsl(160, 82%, 88%);--cds-global-color-jade-200:hsl(160, 78%, 78%);--cds-global-color-jade-300:hsl(160, 69%, 65%);--cds-global-color-jade-400:hsl(160, 69%, 53%);--cds-global-color-jade-500:hsl(160, 64%, 45%);--cds-global-color-jade-600:hsl(160, 69%, 36%);--cds-global-color-jade-700:hsl(160, 64%, 30%);--cds-global-color-jade-800:hsl(160, 100%, 21%);--cds-global-color-jade-900:hsl(160, 70%, 21%);--cds-global-color-jade-1000:hsl(160, 69%, 19%);--cds-global-color-yellow-50:hsl(50, 100%, 95%);--cds-global-color-yellow-100:hsl(50, 100%, 84%);--cds-global-color-yellow-200:hsl(50, 100%, 73%);--cds-global-color-yellow-300:hsl(50, 100%, 57%);--cds-global-color-yellow-400:hsl(46, 100%, 52%);--cds-global-color-yellow-500:hsl(44, 100%, 47%);--cds-global-color-yellow-600:hsl(42, 100%, 42%);--cds-global-color-yellow-700:hsl(40, 100%, 35%);--cds-global-color-yellow-800:hsl(40, 100%, 26%);--cds-global-color-yellow-900:hsl(40, 100%, 18%);--cds-global-color-yellow-1000:hsl(40, 100%, 13%);--cds-global-color-tangerine-50:hsl(25, 100%, 95%);--cds-global-color-tangerine-100:hsl(25, 100%, 88%);--cds-global-color-tangerine-200:hsl(25, 94%, 78%);--cds-global-color-tangerine-300:hsl(25, 100%, 72%);--cds-global-color-tangerine-400:hsl(25, 100%, 62%);--cds-global-color-tangerine-500:hsl(25, 100%, 48%);--cds-global-color-tangerine-600:hsl(25, 100%, 41%);--cds-global-color-tangerine-700:hsl(25, 100%, 34%);--cds-global-color-tangerine-800:hsl(25, 100%, 25%);--cds-global-color-tangerine-900:hsl(25, 100%, 19%);--cds-global-color-tangerine-1000:hsl(25, 100%, 15%);--cds-global-color-magenta-50:hsl(345, 100%, 95%);--cds-global-color-magenta-100:hsl(345, 100%, 87%);--cds-global-color-magenta-200:hsl(345, 100%, 79%);--cds-global-color-magenta-300:hsl(345, 100%, 70%);--cds-global-color-magenta-400:hsl(345, 100%, 61%);--cds-global-color-magenta-500:hsl(345, 81%, 50%);--cds-global-color-magenta-600:hsl(345, 83%, 40%);--cds-global-color-magenta-700:hsl(345, 91%, 31%);--cds-global-color-magenta-800:hsl(345, 100%, 24%);--cds-global-color-magenta-900:hsl(345, 100%, 19%);--cds-global-color-magenta-1000:hsl(345, 100%, 15%);--cds-global-color-pink-50:hsl(324, 100%, 97%);--cds-global-color-pink-100:hsl(324, 95%, 91%);--cds-global-color-pink-200:hsl(324, 84%, 81%);--cds-global-color-pink-300:hsl(324, 78%, 70%);--cds-global-color-pink-400:hsl(324, 78%, 62%);--cds-global-color-pink-500:hsl(324, 64%, 51%);--cds-global-color-pink-600:hsl(324, 80%, 39%);--cds-global-color-pink-700:hsl(324, 100%, 30%);--cds-global-color-pink-800:hsl(324, 100%, 24%);--cds-global-color-pink-900:hsl(324, 100%, 18%);--cds-global-color-pink-1000:hsl(324, 100%, 15%);--cds-global-color-warm-gray-50:hsl(282, 3%, 97%);--cds-global-color-warm-gray-100:hsl(282, 3%, 92%);--cds-global-color-warm-gray-200:hsl(282, 3%, 84%);--cds-global-color-warm-gray-300:hsl(282, 3%, 74%);--cds-global-color-warm-gray-400:hsl(282, 3%, 63%);--cds-global-color-warm-gray-500:hsl(282, 3%, 54%);--cds-global-color-warm-gray-600:hsl(282, 3%, 43%);--cds-global-color-warm-gray-700:hsl(282, 3%, 35%);--cds-global-color-warm-gray-800:hsl(282, 3%, 28%);--cds-global-color-warm-gray-900:hsl(282, 3%, 20%);--cds-global-color-warm-gray-1000:hsl(282, 3%, 14%);--cds-global-color-slate-50:hsl(238, 20%, 96%);--cds-global-color-slate-100:hsl(238, 20%, 91%);--cds-global-color-slate-200:hsl(238, 20%, 82%);--cds-global-color-slate-300:hsl(238, 20%, 73%);--cds-global-color-slate-400:hsl(238, 20%, 63%);--cds-global-color-slate-500:hsl(238, 23%, 56%);--cds-global-color-slate-600:hsl(238, 24%, 49%);--cds-global-color-slate-700:hsl(238, 28%, 38%);--cds-global-color-slate-800:hsl(238, 28%, 29%);--cds-global-color-slate-900:hsl(238, 28%, 22%);--cds-global-color-slate-1000:hsl(238, 28%, 14%);--cds-global-color-ice-50:hsl(211, 100%, 97%);--cds-global-color-ice-100:hsl(211, 58%, 90%);--cds-global-color-ice-200:hsl(211, 53%, 81%);--cds-global-color-ice-300:hsl(211, 49%, 70%);--cds-global-color-ice-400:hsl(211, 47%, 62%);--cds-global-color-ice-500:hsl(211, 47%, 53%);--cds-global-color-ice-600:hsl(211, 56%, 44%);--cds-global-color-ice-700:hsl(211, 69%, 34%);--cds-global-color-ice-800:hsl(211, 69%, 27%);--cds-global-color-ice-900:hsl(211, 100%, 20%);--cds-global-color-ice-1000:hsl(211, 100%, 14%);--cds-global-color-cool-gray-50:hsl(211, 20%, 96%);--cds-global-color-cool-gray-100:hsl(211, 20%, 90%);--cds-global-color-cool-gray-200:hsl(211, 20%, 81%);--cds-global-color-cool-gray-300:hsl(211, 20%, 72%);--cds-global-color-cool-gray-400:hsl(211, 20%, 61%);--cds-global-color-cool-gray-500:hsl(211, 20%, 53%);--cds-global-color-cool-gray-600:hsl(211, 20%, 44%);--cds-global-color-cool-gray-700:hsl(211, 23%, 36%);--cds-global-color-cool-gray-800:hsl(211, 30%, 28%);--cds-global-color-cool-gray-900:hsl(211, 40%, 22%);--cds-global-color-cool-gray-1000:hsl(211, 63%, 14%);--cds-global-color-tan-50:hsl(41, 23%, 96%);--cds-global-color-tan-100:hsl(41, 22%, 91%);--cds-global-color-tan-200:hsl(41, 27%, 82%);--cds-global-color-tan-300:hsl(41, 23%, 68%);--cds-global-color-tan-400:hsl(41, 23%, 58%);--cds-global-color-tan-500:hsl(41, 20%, 47%);--cds-global-color-tan-600:hsl(41, 20%, 40%);--cds-global-color-tan-700:hsl(41, 20%, 32%);--cds-global-color-tan-800:hsl(41, 23%, 26%);--cds-global-color-tan-900:hsl(41, 23%, 21%);--cds-global-color-tan-1000:hsl(41, 22%, 16%);--cds-global-color-construction-50:hsl(198, 36%, 96%);--cds-global-color-construction-100:hsl(198, 20%, 91%);--cds-global-color-construction-200:hsl(198, 14%, 82%);--cds-global-color-construction-300:hsl(198, 10%, 71%);--cds-global-color-construction-400:hsl(198, 9%, 56%);--cds-global-color-construction-500:hsl(198, 10%, 46%);--cds-global-color-construction-600:hsl(198, 14%, 36%);--cds-global-color-construction-700:hsl(198, 19%, 28%);--cds-global-color-construction-800:hsl(198, 23%, 23%);--cds-global-color-construction-900:hsl(198, 28%, 18%);--cds-global-color-construction-1000:hsl(198, 30%, 15%);--cds-global-color-gray-0:hsl(0, 0%, 100%);--cds-global-color-gray-50:hsl(0, 0%, 98%);--cds-global-color-gray-100:hsl(0, 0%, 95%);--cds-global-color-gray-200:hsl(0, 0%, 91%);--cds-global-color-gray-300:hsl(0, 0%, 87%);--cds-global-color-gray-400:hsl(0, 0%, 80%);--cds-global-color-gray-500:hsl(0, 0%, 70%);--cds-global-color-gray-600:hsl(0, 0%, 55%);--cds-global-color-gray-700:hsl(0, 0%, 40%);--cds-global-color-gray-800:hsl(0, 0%, 27%);--cds-global-color-gray-900:hsl(0, 0%, 20%);--cds-global-color-gray-1000:hsl(0, 0%, 0%);--cds-global-typography-color-100:var(--cds-global-color-white);--cds-global-typography-color-200:var(--cds-global-color-construction-600);--cds-global-typography-color-300:var(--cds-global-color-construction-800);--cds-global-typography-color-400:var(--cds-global-color-construction-900);--cds-global-typography-color-500:var(--cds-global-color-black);--cds-global-typography-font-weight-light:300;--cds-global-typography-font-weight-regular:400;--cds-global-typography-font-weight-medium:500;--cds-global-typography-font-weight-semibold:600;--cds-global-typography-font-weight-bold:600;--cds-global-typography-font-weight-extrabold:600;--cds-global-typography-font-size-0:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-1:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-2:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-3:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-4:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-5:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-6:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-7:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-8:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-9:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-base-font-size:125%;--cds-global-typography-base-font-size-px:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-header-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-monospace-font-family:ui-monospace, Consolas, Menlo, Monaco, monospace;--cds-global-typography-top-gap-height:0.1475em;--cds-global-typography-ascender-height:0.1703em;--cds-global-typography-x-height:0.517em;--cds-global-typography-link-color:var(--cds-global-color-blue-800);--cds-global-typography-link-color-hover:var(--cds-global-color-blue-900);--cds-global-typography-link-color-visited:var(--cds-global-color-lavender-600);--cds-global-typography-link-color-visited-hover:var(--cds-global-color-lavender-700);--cds-global-typography-body-font-size:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-body-line-height:1.42857em;--cds-global-typography-body-letter-spacing:-0.014286em;--cds-global-typography-body-font-weight:400;--cds-global-typography-display-font-size:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-display-line-height:1.1em;--cds-global-typography-display-letter-spacing:-0.0125em;--cds-global-typography-display-font-weight:400;--cds-global-typography-heading-font-size:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-heading-line-height:1.125em;--cds-global-typography-heading-letter-spacing:-0.0125em;--cds-global-typography-heading-font-weight:400;--cds-global-typography-title-font-size:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-title-line-height:1.16667em;--cds-global-typography-title-letter-spacing:-0.008333em;--cds-global-typography-title-font-weight:400;--cds-global-typography-section-font-size:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-section-line-height:1.2em;--cds-global-typography-section-letter-spacing:-0.01em;--cds-global-typography-section-font-weight:400;--cds-global-typography-subsection-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-subsection-line-height:1.25em;--cds-global-typography-subsection-letter-spacing:-0.0125em;--cds-global-typography-subsection-font-weight:400;--cds-global-typography-message-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-message-line-height:1.25em;--cds-global-typography-message-letter-spacing:-0.0125em;--cds-global-typography-message-font-weight:calc((400 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-font-size:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-line-height:1.23077em;--cds-global-typography-secondary-letter-spacing:-0.007692em;--cds-global-typography-secondary-font-weight:400;--cds-global-typography-caption-font-size:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-caption-line-height:1.454545em;--cds-global-typography-caption-letter-spacing:0.018182em;--cds-global-typography-caption-font-weight:400;--cds-global-typography-smallcaption-font-size:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-smallcaption-line-height:1.2em;--cds-global-typography-smallcaption-letter-spacing:0.05em;--cds-global-typography-smallcaption-font-weight:500;--cds-global-animation-duration-instant:0s;--cds-global-animation-duration-quickest:0.1s;--cds-global-animation-duration-quicker:0.15s;--cds-global-animation-duration-quick:0.2s;--cds-global-animation-duration-secondary:0.3s;--cds-global-animation-duration-primary:0.4s;--cds-global-animation-duration-slow:0.5s;--cds-global-animation-duration-slower:0.7s;--cds-global-animation-duration-slowest:0.8s;--cds-global-animation-easing-primary:cubic-bezier(0,.99,0,.99);--cds-global-animation-easing-secondary:cubic-bezier(0, 1.5, 0.5, 1);--cds-global-animation-easing-loop:cubic-bezier(0.17, 0.4, 0.8, 0.79);--cds-global-base:20;--cds-alias-object-border-radius-100:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-200:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-300:50%;--cds-alias-object-border-width-100:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-200:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-300:calc((3 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-400:calc((4 / var(--cds-global-base, 20)) * 1rem);--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-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);--cds-alias-object-opacity-300:hsla(0, 0%, 0%, 0.6);--cds-alias-object-interaction-outline:Highlight solid 2px;--cds-alias-object-interaction-outline-webkit:5px auto -webkit-focus-ring-color;--cds-alias-object-interaction-outline-offset:1px;--cds-alias-object-interaction-touch-target:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-interaction-border-color:var(--cds-global-color-construction-500);--cds-alias-object-interaction-background:var(--cds-global-color-white);--cds-alias-object-interaction-background-hover:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-active:var(--cds-global-color-blue-100);--cds-alias-object-interaction-background-selected:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-disabled:var(--cds-global-color-white);--cds-alias-object-interaction-background-highlight:var(--cds-global-color-blue-700);--cds-alias-object-interaction-color:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-hover:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-active:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-selected:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-disabled:var(--cds-global-color-construction-300);--cds-alias-object-app-background:var(--cds-global-color-gray-50);--cds-alias-object-overlay-background:var(--cds-global-color-white);--cds-alias-object-overlay-backdrop-background:hsla(0, 0%, 0%, 0.6);--cds-alias-object-container-background:var(--cds-global-color-white);--cds-alias-object-container-background-tint:var(--cds-global-color-construction-50);--cds-alias-object-container-background-shade:var(--cds-global-color-construction-100);--cds-alias-object-container-border-color:var(--cds-global-color-construction-200);--cds-alias-status-info:var(--cds-global-color-blue-700);--cds-alias-status-info-tint:var(--cds-global-color-blue-50);--cds-alias-status-info-shade:var(--cds-global-color-blue-800);--cds-alias-status-success:var(--cds-global-color-green-700);--cds-alias-status-success-tint:var(--cds-global-color-green-50);--cds-alias-status-success-shade:var(--cds-global-color-green-800);--cds-alias-status-warning:var(--cds-global-color-ochre-500);--cds-alias-status-warning-tint:var(--cds-global-color-ochre-100);--cds-alias-status-warning-shade:var(--cds-global-color-ochre-600);--cds-alias-status-warning-dark:var(--cds-global-color-ochre-800);--cds-alias-status-danger:var(--cds-global-color-red-700);--cds-alias-status-danger-tint:var(--cds-global-color-red-50);--cds-alias-status-danger-shade:var(--cds-global-color-red-800);--cds-alias-status-danger-dark:var(--cds-global-color-red-900);--cds-alias-status-neutral:var(--cds-global-color-construction-600);--cds-alias-status-neutral-tint:var(--cds-global-color-construction-50);--cds-alias-status-neutral-shade:var(--cds-global-color-construction-700);--cds-alias-status-disabled:var(--cds-global-color-construction-300);--cds-alias-status-disabled-tint:var(--cds-global-color-construction-200);--cds-alias-status-disabled-shade:var(--cds-global-color-construction-400);--cds-alias-status-alt:var(--cds-global-color-violet-700);--cds-alias-status-alt-tint:var(--cds-global-color-violet-600);--cds-alias-status-alt-shade:var(--cds-global-color-violet-900)}
@@ -1,4 +1,5 @@
1
1
  import { CdsBaseButton, StatusTypes } from '@cds/core/internal';
2
+ import { PropertyValues } from 'lit';
2
3
  /**
3
4
  * Tags show concise metadata in a compact format.
4
5
  * Tags are visually styled to differentiate them from buttons.
@@ -41,6 +42,6 @@ export declare class CdsTag extends CdsBaseButton {
41
42
  closable: boolean;
42
43
  private groupLabelId;
43
44
  connectedCallback(): void;
44
- updated(props: Map<string, string | boolean | null | undefined>): void;
45
+ updated(props: PropertyValues<this>): void;
45
46
  render(): import("lit-html").TemplateResult<1>;
46
47
  }
@@ -1,2 +1,2 @@
1
- import{css as a}from"lit";var o=a`:host{--background:var(--cds-alias-status-tint, var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8)));--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--padding:var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem));--font-size:var(--cds-global-typography-font-size-0, calc((10 / 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(--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));display:inline-block}.private-host{--internal-icon-color:var(--color);border-radius:var(--border-radius);background:var(--background);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);color:var(--color);font-size:var(--font-size);padding:var(--padding);white-space:nowrap;text-decoration:none;min-height:calc(var(--cds-global-space-8,calc((18 / var(--cds-global-base,20)) * 1rem)) + var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem)));transform:translateZ(0)}.tag-content{padding:0 var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}::slotted(cds-icon),cds-icon[shape=times]{--color:var(--internal-icon-color);cursor:pointer}:host(:not([readonly])):host(:active) .private-host::after,:host(:not([readonly])):host(:focus) .private-host::after,:host(:not([readonly])):host(:hover) .private-host::after,:host(:not([readonly])):host([_active]) .private-host::after{background:var(--background);border-radius:var(--border-radius);filter:brightness(95%);position:absolute;content:"";top:0;left:0;bottom:0;right:0;inset:0;z-index:-1}:host(:not([readonly])):host(:active) .private-host,:host(:not([readonly])):host([_active]) .private-host{box-shadow:0 var(--cds-global-space-1,calc((1 / var(--cds-global-base,20)) * 1rem)) 0 0 var(--border-color) inset}:host(:not([readonly])):host(:active) .tag-content,:host(:not([readonly])):host([_active]) .tag-content{transform:translateY(var(--cds-global-space-1,calc((1 / var(--cds-global-base,20)) * 1rem)))}:host(:not([readonly])):host(:visited){color:var(--color)}:host([status=info]){--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--background:var(--cds-alias-status-tint, var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff)))}:host([status=success]){--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--background:var(--cds-alias-status-tint, var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3)))}:host([status=warning]){--border-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e));--background:var(--cds-alias-status-tint, var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6)))}:host([status=danger]){--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--background:var(--cds-alias-status-tint, var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0)))}:host([color]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([color]) :hover{--background:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8))}:host([color=purple]){--border-color:var(--cds-global-color-violet-600, #9b32c8)}:host([color=blue]){--border-color:var(--cds-global-color-blue-800, #00608a)}:host([color=orange]){--border-color:var(--cds-global-color-ochre-800, #a36500)}:host([color=light-blue]){--border-color:var(--cds-global-color-blue-600, #009adb)}:host([disabled]){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important;--border-color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important;--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))!important}:host([disabled]) ::slotted(cds-badge){--background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--color:var(--cds-alias-status-disabled-shade, var(--cds-global-color-construction-400, #859399))!important}:host([disabled]) ::slotted(cds-icon){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important}:host([disabled]) .private-host{box-shadow:none!important}:host([disabled]) .tag-content{transform:initial!important}`;export default o;
1
+ import{css as a}from"lit";var o=a`:host{--background:var(--cds-alias-status-tint, var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8)));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--padding:var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem));--font-size:var(--cds-global-typography-font-size-0, calc((10 / 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(--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));display:inline-block}.private-host{--internal-icon-color:var(--color);border-radius:var(--border-radius);background:var(--background);border-width:var(--border-width);border-style:solid;border-color:var(--border-color);color:var(--color);font-size:var(--font-size);padding:var(--padding);white-space:nowrap;text-decoration:none;min-height:calc(var(--cds-global-space-8,calc((18 / var(--cds-global-base,20)) * 1rem)) + var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem)));transform:translateZ(0)}.tag-content{padding:0 var(--cds-global-space-3,calc((4 / var(--cds-global-base,20)) * 1rem))}::slotted(cds-icon),cds-icon[shape=times]{--color:var(--internal-icon-color);cursor:pointer}:host(:not([readonly])):host(:active) .private-host::after,:host(:not([readonly])):host(:focus) .private-host::after,:host(:not([readonly])):host(:hover) .private-host::after,:host(:not([readonly])):host([_active]) .private-host::after{background:var(--background);border-radius:var(--border-radius);filter:brightness(95%);position:absolute;content:"";top:0;left:0;bottom:0;right:0;inset:0;z-index:-1}:host(:not([readonly])):host(:active) .private-host,:host(:not([readonly])):host([_active]) .private-host{box-shadow:0 var(--cds-global-space-1,calc((1 / var(--cds-global-base,20)) * 1rem)) 0 0 var(--border-color) inset}:host(:not([readonly])):host(:active) .tag-content,:host(:not([readonly])):host([_active]) .tag-content{transform:translateY(var(--cds-global-space-1,calc((1 / var(--cds-global-base,20)) * 1rem)))}:host(:not([readonly])):host(:visited){color:var(--color)}:host([status=info]){--border-color:var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--background:var(--cds-alias-status-tint, var(--cds-alias-status-info-tint, var(--cds-global-color-blue-50, #e6f7ff)))}:host([status=success]){--border-color:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--background:var(--cds-alias-status-tint, var(--cds-alias-status-success-tint, var(--cds-global-color-green-50, #eefce3)))}:host([status=warning]){--border-color:var(--cds-alias-status-warning, var(--cds-global-color-ochre-500, #ffb92e));--background:var(--cds-alias-status-tint, var(--cds-alias-status-warning-tint, var(--cds-global-color-ochre-100, #fff2d6)))}:host([status=danger]){--border-color:var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--background:var(--cds-alias-status-tint, var(--cds-alias-status-danger-tint, var(--cds-global-color-red-50, #fff2f0)))}:host([color]){--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))}:host([color]) :hover{--background:var(--cds-alias-status-neutral-tint, var(--cds-global-color-construction-50, #f1f6f8))}:host([color=purple]){--border-color:var(--cds-global-color-violet-600, #9b32c8)}:host([color=blue]){--border-color:var(--cds-global-color-blue-800, #00608a)}:host([color=orange]){--border-color:var(--cds-global-color-ochre-800, #a36500)}:host([color=light-blue]){--border-color:var(--cds-global-color-blue-600, #009adb)}:host([disabled]){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important;--border-color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important;--background:var(--cds-alias-object-opacity-0, rgba(0, 0, 0, 0))!important}:host([disabled]) ::slotted(cds-badge){--background:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8));--color:var(--cds-alias-status-disabled-shade, var(--cds-global-color-construction-400, #859399))!important}:host([disabled]) ::slotted(cds-icon){--color:var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important}:host([disabled]) .private-host{box-shadow:none!important}:host([disabled]) .tag-content{transform:initial!important}`;export default o;
2
2
  //# sourceMappingURL=tag.element.scss.js.map
@@ -1,2 +1,2 @@
1
- import{css as a}from"lit";var r=a`:host{--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-space-5, calc((8 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem));--font-size:var(--cds-global-typography-font-size-3, calc((13 / var(--cds-global-base, 20)) * 1rem));--color:var(--cds-global-typography-color-500, var(--cds-global-color-black, black));--border-radius:var(--cds-alias-object-border-radius-100, calc((4 / var(--cds-global-base, 20)) * 1rem));display:block;width:100%}::slotted(textarea){background:var(--background)!important;border:var(--border)!important;color:var(--color)!important;border-radius:var(--border-radius)!important;padding:var(--padding)!important;font-size:var(--font-size)!important;resize:vertical!important;width:100%!important;min-height:var(--cds-global-layout-space-xxl,calc((96 / var(--cds-global-base,20)) * 1rem))!important}:host([status=error]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export default r;
1
+ import{css as a}from"lit";var r=a`:host{--background:var(--cds-alias-object-container-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-space-5, calc((8 / var(--cds-global-base, 20)) * 1rem)) var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem));--font-size:var(--cds-global-typography-font-size-3, calc((13 / var(--cds-global-base, 20)) * 1rem));--color:var(--cds-global-typography-color-400, var(--cds-global-color-construction-900, #21333b));--border-radius:var(--cds-alias-object-border-radius-100, calc((4 / var(--cds-global-base, 20)) * 1rem));display:block;width:100%}::slotted(textarea){background:var(--background)!important;border:var(--border)!important;color:var(--color)!important;border-radius:var(--border-radius)!important;padding:var(--padding)!important;font-size:var(--font-size)!important;resize:vertical!important;width:100%!important;min-height:var(--cds-global-layout-space-xxl,calc((96 / var(--cds-global-base,20)) * 1rem))!important}:host([status=error]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host([status=success]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e))}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}`;export default r;
2
2
  //# sourceMappingURL=textarea.element.scss.js.map
@@ -1,3 +1,4 @@
1
+ import { PropertyValues } from 'lit';
1
2
  import { CdsInternalControlInline } from '@cds/core/forms';
2
3
  /**
3
4
  * Toggle
@@ -28,6 +29,6 @@ import { CdsInternalControlInline } from '@cds/core/forms';
28
29
  */
29
30
  export declare class CdsToggle extends CdsInternalControlInline {
30
31
  cdsMotion: string;
31
- updated(props: Map<string, any>): Promise<void>;
32
+ updated(props: PropertyValues<this>): Promise<void>;
32
33
  static get styles(): import("lit").CSSResultGroup[];
33
34
  }
@@ -1 +1 @@
1
- {"version":3,"file":"toggle.element.js","sources":["../../../src/toggle/toggle.element.ts"],"sourcesContent":null,"names":["CdsToggle","CdsInternalControlInline","[object Object]","super","arguments","this","cdsMotion","props","updated","has","updateComplete","styles","__decorate","property","type","String","prototype"],"mappings":"oLAoCO,MAAMA,UAAkBC,EAC3BC,cACIC,SAASC,WACTC,KAAKC,UAAY,KAErBJ,cAAcK,GACVJ,MAAMK,QAAQD,GAIVA,EAAME,IAAI,cAAmC,OAAnBJ,KAAKC,kBACzBD,KAAKK,eACXL,KAAKC,UAAY,SAGzBK,oBACI,MAAO,IAAIR,MAAMQ,OAAQA,IAGjCC,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBf,EAAUgB,UAAW,iBAAa"}
1
+ {"version":3,"file":"toggle.element.js","sources":["../../../src/toggle/toggle.element.ts"],"sourcesContent":null,"names":["CdsToggle","CdsInternalControlInline","[object Object]","super","arguments","this","cdsMotion","props","updated","has","updateComplete","styles","__decorate","property","type","String","prototype"],"mappings":"oLA+BO,MAAMA,UAAkBC,EAC3BC,cACIC,SAASC,WACTC,KAAKC,UAAY,KAErBJ,cAAcK,GACVJ,MAAMK,QAAQD,GAIVA,EAAME,IAAI,cAAmC,OAAnBJ,KAAKC,kBACzBD,KAAKK,eACXL,KAAKC,UAAY,SAGzBK,oBACI,MAAO,IAAIR,MAAMQ,OAAQA,IAGjCC,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBf,EAAUgB,UAAW,iBAAa"}
@@ -355,6 +355,7 @@
355
355
  <property name="aliasObjectOpacity200">hsla(0, 0%, 0%, 0.4)</property>
356
356
  <property name="aliasObjectOpacity300">hsla(0, 0%, 0%, 0.6)</property>
357
357
  <property name="aliasObjectInteractionOutline">Highlight solid 2px</property>
358
+ <property name="aliasObjectInteractionOutlineWebkit">5px auto -webkit-focus-ring-color</property>
358
359
  <property name="aliasObjectInteractionOutlineOffset">1px</property>
359
360
  <property name="aliasObjectInteractionTouchTarget">36</property>
360
361
  <color name="aliasObjectInteractionBorderColor" alias="globalColorConstruction500">#6a7a81</color>
@@ -352,6 +352,7 @@ export declare const aliasObjectOpacity100 = "var(--cds-alias-object-opacity-100
352
352
  export declare const aliasObjectOpacity200 = "var(--cds-alias-object-opacity-200)";
353
353
  export declare const aliasObjectOpacity300 = "var(--cds-alias-object-opacity-300)";
354
354
  export declare const aliasObjectInteractionOutline = "var(--cds-alias-object-interaction-outline)";
355
+ export declare const aliasObjectInteractionOutlineWebkit = "var(--cds-alias-object-interaction-outline-webkit)";
355
356
  export declare const aliasObjectInteractionOutlineOffset = "var(--cds-alias-object-interaction-outline-offset)";
356
357
  export declare const aliasObjectInteractionTouchTarget = "var(--cds-alias-object-interaction-touch-target)";
357
358
  export declare const aliasObjectInteractionBorderColor = "var(--cds-alias-object-interaction-border-color)";
@@ -353,6 +353,7 @@ let aliasObjectOpacity100 = "hsla(0, 0%, 0%, 0.2)";
353
353
  let aliasObjectOpacity200 = "hsla(0, 0%, 0%, 0.4)";
354
354
  let aliasObjectOpacity300 = "hsla(0, 0%, 0%, 0.6)";
355
355
  let aliasObjectInteractionOutline = "Highlight solid 2px";
356
+ let aliasObjectInteractionOutlineWebkit = "5px auto -webkit-focus-ring-color";
356
357
  let aliasObjectInteractionOutlineOffset = "1px";
357
358
  let aliasObjectInteractionTouchTarget = CGFloat(36.00);
358
359
  let aliasObjectInteractionBorderColor = UIColor(red: 106, green: 122, blue: 129, alpha: 1.0);
package/tokens/tokens.js CHANGED
@@ -353,6 +353,7 @@ export const aliasObjectOpacity100 = 'var(--cds-alias-object-opacity-100)';
353
353
  export const aliasObjectOpacity200 = 'var(--cds-alias-object-opacity-200)';
354
354
  export const aliasObjectOpacity300 = 'var(--cds-alias-object-opacity-300)';
355
355
  export const aliasObjectInteractionOutline = 'var(--cds-alias-object-interaction-outline)';
356
+ export const aliasObjectInteractionOutlineWebkit = 'var(--cds-alias-object-interaction-outline-webkit)';
356
357
  export const aliasObjectInteractionOutlineOffset = 'var(--cds-alias-object-interaction-outline-offset)';
357
358
  export const aliasObjectInteractionTouchTarget = 'var(--cds-alias-object-interaction-touch-target)';
358
359
  export const aliasObjectInteractionBorderColor = 'var(--cds-alias-object-interaction-border-color)';
@@ -2013,6 +2013,9 @@
2013
2013
  "aliasObjectInteractionOutline": {
2014
2014
  "value": "Highlight solid 2px"
2015
2015
  },
2016
+ "aliasObjectInteractionOutlineWebkit": {
2017
+ "value": "5px auto -webkit-focus-ring-color"
2018
+ },
2016
2019
  "aliasObjectInteractionOutlineOffset": {
2017
2020
  "value": "1px"
2018
2021
  },
@@ -370,6 +370,7 @@ $cds-alias-object-opacity-100: var(--cds-alias-object-opacity-100) !default;
370
370
  $cds-alias-object-opacity-200: var(--cds-alias-object-opacity-200) !default;
371
371
  $cds-alias-object-opacity-300: var(--cds-alias-object-opacity-300) !default;
372
372
  $cds-alias-object-interaction-outline: var(--cds-alias-object-interaction-outline) !default;
373
+ $cds-alias-object-interaction-outline-webkit: var(--cds-alias-object-interaction-outline-webkit) !default;
373
374
  $cds-alias-object-interaction-outline-offset: var(--cds-alias-object-interaction-outline-offset) !default;
374
375
  $cds-alias-object-interaction-touch-target: var(--cds-alias-object-interaction-touch-target) !default;
375
376
  $cds-alias-object-interaction-border-color: var(--cds-alias-object-interaction-border-color) !default;
@@ -1,5 +1,5 @@
1
- import { Animatable, AriaBooleanAttributeValues, EventEmitter } from '@cds/core/internal';
2
- import { LitElement } from 'lit';
1
+ import { Animatable, EventEmitter } from '@cds/core/internal';
2
+ import { LitElement, PropertyValues } from 'lit';
3
3
  /**
4
4
  * Tree view is a hierarchical component that gives users access to a hierarchical set of objects displayed in a the parent-child relationship.
5
5
  *
@@ -33,12 +33,8 @@ export declare class CdsTreeItem extends LitElement implements Animatable {
33
33
  i18n: {
34
34
  loading: string;
35
35
  };
36
- role: string;
37
36
  cdsMotion: string;
38
37
  cdsMotionChange: EventEmitter<string>;
39
- ariaDisabled: AriaBooleanAttributeValues | undefined;
40
- ariaExpanded: AriaBooleanAttributeValues | undefined;
41
- ariaSelected: AriaBooleanAttributeValues | undefined;
42
38
  multiSelect: boolean;
43
39
  disabled: boolean;
44
40
  expanded: boolean;
@@ -54,7 +50,7 @@ export declare class CdsTreeItem extends LitElement implements Animatable {
54
50
  /** @private */
55
51
  selectedChange: EventEmitter<boolean>;
56
52
  connectedCallback(): void;
57
- updated(props: Map<string, any>): void;
53
+ updated(props: PropertyValues<this>): void;
58
54
  toggleExpanded(): void;
59
55
  toggleSelected(): void;
60
56
  private onSlotChange;
@@ -1,2 +1,2 @@
1
- import{__decorate as e}from"tslib";import{I18nService as t,createId as i,baseStyles as a,i18n as d,state as s,property as o,event as l,querySlotAll as r,querySlot as n,animate as p,AnimationTreeItemExpandName as c,reverseAnimation as h}from"@cds/core/internal";import{LitElement as m,html as g}from"lit";import{ifDefined as v}from"lit/directives/if-defined.js";import y from"./tree-item.element.scss.js";let u=class extends m{constructor(){super(...arguments),this.i18n=t.keys.treeview,this.role="treeitem",this.cdsMotion="on",this.ariaDisabled="false",this.ariaExpanded="false",this.ariaSelected="false",this.multiSelect=!1,this.disabled=!1,this.expanded=!1,this.expandable=!1,this.indeterminate=!1,this.loading=!1,this.selected=!1}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.id||(this.id=i())}updated(e){super.updated(e),this.treeItemChildren.length>0&&(this.expandable=!0),this.expandable?this.ariaExpanded=this.expanded?"true":"false":this.ariaExpanded=void 0,this.multiSelect?this.ariaSelected=this.selected?"true":"false":this.ariaSelected=void 0,this.ariaDisabled=this.disabled?"true":"false"}toggleExpanded(){this.expandedChange.emit(!this.expanded)}toggleSelected(){this.selectedChange.emit(!this.selected),this.anchorLink&&this.anchorLink.click()}onSlotChange(){this.treeItemChildren.forEach((e=>{e.getAttribute("slot")||e.setAttribute("slot",i())})),this.requestUpdate()}render(){return g`<div class="private-host" cds-layout="p-l:md"><div cds-layout="horizontal align:vertical-center ${this.multiSelect?"gap:md":"gap:sm"}"><div class="lhs-container">${this.treeItemLeftHandSideTemplate}</div><div class="item-content" cds-layout="p:sm ${this.multiSelect?"p-x:md":""} align:stretch" @click="${()=>this.toggleSelected()}"><span cds-layout="horizontal align:vertical-center gap:md" cds-text="lhe">${this.multiSelect?g`<cds-internal-visual-checkbox part="checkbox" .disabled="${this.disabled}" .indeterminate="${this.indeterminate}" .selected="${this.selected}"></cds-internal-visual-checkbox>`:g``}<slot @slotchange="${this.onSlotChange}"></slot></span></div></div><div class="item-children" role="${v(this.expanded?"group":void 0)}" ?hidden="${!this.expanded}">${Array.from(this.treeItemChildren).map((e=>g`<slot name="${e.getAttribute("slot")}"></slot>`))}</div></div>`}get treeItemLeftHandSideTemplate(){return this.loading?g`<cds-progress-circle size="xs" aria-label="${this.i18n.loading}"></cds-progress-circle>`:this.expandable?g`<div @click="${()=>this.toggleExpanded()}"><cds-icon class="expand-collapse-icon" part="expand-collapse-icon" shape="angle"></cds-icon></div>`:g``}static get styles(){return[a,y]}};e([d()],u.prototype,"i18n",void 0),e([s({type:String,reflect:!0,attribute:"role"})],u.prototype,"role",void 0),e([o({type:String})],u.prototype,"cdsMotion",void 0),e([l()],u.prototype,"cdsMotionChange",void 0),e([s({type:String,reflect:!0,attribute:"aria-disabled"})],u.prototype,"ariaDisabled",void 0),e([s({type:String,reflect:!0,attribute:"aria-expanded"})],u.prototype,"ariaExpanded",void 0),e([s({type:String,reflect:!0,attribute:"aria-selected"})],u.prototype,"ariaSelected",void 0),e([o({type:Boolean,reflect:!0,attribute:"multi-select"})],u.prototype,"multiSelect",void 0),e([o({type:Boolean})],u.prototype,"disabled",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"expanded",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"expandable",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"indeterminate",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"loading",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"selected",void 0),e([r(":scope > cds-tree-item")],u.prototype,"treeItemChildren",void 0),e([n(":scope > a")],u.prototype,"anchorLink",void 0),e([l()],u.prototype,"expandedChange",void 0),e([l()],u.prototype,"selectedChange",void 0),u=e([p({expanded:{true:c,false:h(c)}})],u);export{u as CdsTreeItem};
1
+ import{__decorate as e}from"tslib";import{I18nService as t,createId as i,baseStyles as s,i18n as d,property as l,event as o,querySlotAll as a,querySlot as n,animate as r,AnimationTreeItemExpandName as c,reverseAnimation as p}from"@cds/core/internal";import{LitElement as h,html as m}from"lit";import{ifDefined as g}from"lit/directives/if-defined.js";import u from"./tree-item.element.scss.js";let v=class extends h{constructor(){super(...arguments),this.i18n=t.keys.treeview,this.cdsMotion="on",this.multiSelect=!1,this.disabled=!1,this.expanded=!1,this.expandable=!1,this.indeterminate=!1,this.loading=!1,this.selected=!1}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.role="treeitem",this.id||(this.id=i())}updated(e){super.updated(e),this.treeItemChildren.length>0&&(this.expandable=!0),this.expandable?this.ariaExpanded=this.expanded?"true":"false":this.ariaExpanded=null,this.multiSelect?this.ariaSelected=this.selected?"true":"false":this.ariaSelected=null,this.ariaDisabled=this.disabled?"true":"false"}toggleExpanded(){this.expandedChange.emit(!this.expanded)}toggleSelected(){this.selectedChange.emit(!this.selected),this.anchorLink&&this.anchorLink.click()}onSlotChange(){this.treeItemChildren.forEach((e=>{e.getAttribute("slot")||e.setAttribute("slot",i())})),this.requestUpdate()}render(){return m`<div class="private-host" cds-layout="p-l:md"><div cds-layout="horizontal align:vertical-center ${this.multiSelect?"gap:md":"gap:sm"}"><div class="lhs-container">${this.treeItemLeftHandSideTemplate}</div><div class="item-content" cds-layout="p:sm ${this.multiSelect?"p-x:md":""} align:stretch" @click="${()=>this.toggleSelected()}"><span cds-layout="horizontal align:vertical-center gap:md" cds-text="lhe">${this.multiSelect?m`<cds-internal-visual-checkbox part="checkbox" .disabled="${this.disabled}" .indeterminate="${this.indeterminate}" .selected="${this.selected}"></cds-internal-visual-checkbox>`:m``}<slot @slotchange="${this.onSlotChange}"></slot></span></div></div><div class="item-children" role="${g(this.expanded?"group":void 0)}" ?hidden="${!this.expanded}">${Array.from(this.treeItemChildren).map((e=>m`<slot name="${e.getAttribute("slot")}"></slot>`))}</div></div>`}get treeItemLeftHandSideTemplate(){return this.loading?m`<cds-progress-circle size="xs" aria-label="${this.i18n.loading}"></cds-progress-circle>`:this.expandable?m`<div @click="${()=>this.toggleExpanded()}"><cds-icon class="expand-collapse-icon" part="expand-collapse-icon" shape="angle"></cds-icon></div>`:m``}static get styles(){return[s,u]}};e([d()],v.prototype,"i18n",void 0),e([l({type:String})],v.prototype,"cdsMotion",void 0),e([o()],v.prototype,"cdsMotionChange",void 0),e([l({type:Boolean,reflect:!0,attribute:"multi-select"})],v.prototype,"multiSelect",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"expanded",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"expandable",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"indeterminate",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"loading",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"selected",void 0),e([a(":scope > cds-tree-item")],v.prototype,"treeItemChildren",void 0),e([n(":scope > a")],v.prototype,"anchorLink",void 0),e([o()],v.prototype,"expandedChange",void 0),e([o()],v.prototype,"selectedChange",void 0),v=e([r({expanded:{true:c,false:p(c)}})],v);export{v as CdsTreeItem};
2
2
  //# sourceMappingURL=tree-item.element.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tree-item.element.js","sources":["../../../src/tree-view/tree-item.element.ts"],"sourcesContent":null,"names":["CdsTreeItem","LitElement","[object Object]","super","arguments","this","i18n","I18nService","keys","treeview","role","cdsMotion","ariaDisabled","ariaExpanded","ariaSelected","multiSelect","disabled","expanded","expandable","indeterminate","loading","selected","connectedCallback","tabIndex","id","createId","props","updated","treeItemChildren","length","undefined","expandedChange","emit","selectedChange","anchorLink","click","forEach","i","getAttribute","setAttribute","requestUpdate","html","treeItemLeftHandSideTemplate","toggleSelected","onSlotChange","ifDefined","Array","from","map","toggleExpanded","styles","baseStyles","__decorate","prototype","state","type","String","reflect","attribute","property","event","Boolean","querySlotAll","querySlot","animate","true","AnimationTreeItemExpandName","false","reverseAnimation"],"mappings":"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"}
1
+ {"version":3,"file":"tree-item.element.js","sources":["../../../src/tree-view/tree-item.element.ts"],"sourcesContent":null,"names":["CdsTreeItem","LitElement","[object Object]","super","arguments","this","i18n","I18nService","keys","treeview","cdsMotion","multiSelect","disabled","expanded","expandable","indeterminate","loading","selected","connectedCallback","tabIndex","role","id","createId","props","updated","treeItemChildren","length","ariaExpanded","ariaSelected","ariaDisabled","expandedChange","emit","selectedChange","anchorLink","click","forEach","i","getAttribute","setAttribute","requestUpdate","html","treeItemLeftHandSideTemplate","toggleSelected","onSlotChange","ifDefined","undefined","Array","from","map","toggleExpanded","styles","baseStyles","__decorate","prototype","property","type","String","event","Boolean","reflect","attribute","querySlotAll","querySlot","animate","true","AnimationTreeItemExpandName","false","reverseAnimation"],"mappings":"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"}