@ui5/webcomponents - npm Package Compare versions

Comparing version 0.13.1 to 1.0.0-rc.1

dist/Badge.js

@@ -43,5 +43,4 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 		 */
-		text: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
@@ -52,3 +51,3 @@
 		 *
-		 * @type {Icon}
+		 * @type {Icon[]}
 		 * @slot
@@ -62,3 +61,2 @@ * @public
 	},
-	defaultSlot: "text",
 };
@@ -122,3 +120,3 @@
 	get hasIcon() {
-		return !!this.icon;
+		return !!this.icon.length;
 	}
@@ -125,0 +123,0 @@

dist/build/compiled/ButtonTemplate.lit.js

@@ -5,3 +5,3 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<button		type="button"		class="${ifDefined(classMap(context.classes.main))}"		?disabled="${ifDefined(context.disabled)}"		data-sap-focus-ref				dir="${ifDefined(context.rtl)}"		@focusout=${ifDefined(context.onfocusout)}	>		${ context.icon ? block1(context) : undefined }${ context.textContent ? block2(context) : undefined }</button>`; };
+const block0 = (context) => { return html`<button		type="button"		class="${ifDefined(classMap(context.classes.main))}"		?disabled="${ifDefined(context.disabled)}"		data-sap-focus-ref				dir="${ifDefined(context.rtl)}"		@focusout=${ifDefined(context._onfocusout)}		@click=${ifDefined(context._onclick)}		@mousedown=${ifDefined(context._onmousedown)}	>		${ context.icon ? block1(context) : undefined }${ context.textContent ? block2(context) : undefined }</button>`; };
 const block1 = (context) => { return html`<ui5-icon				class="${ifDefined(classMap(context.classes.icon))}"				src="${ifDefined(context.icon)}"			></ui5-icon>		`; };
@@ -8,0 +8,0 @@ const block2 = (context) => { return html`<span id="${ifDefined(context._id)}-content" class="${ifDefined(classMap(context.classes.text))}"><bdi><slot></slot></bdi></span>		`; };

dist/build/compiled/DialogTemplate.lit.js

@@ -5,4 +5,4 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<span class="${ifDefined(classMap(context.classes.frame))}"><span id="${ifDefined(context._id)}-firstfe" tabindex="0"></span><div style="${ifDefined(context.zindex)}" class="${ifDefined(classMap(context.classes.dialogParent))}"><div tabindex="-1" aria-labelledby="${ifDefined(context.headerId)}" role="dialog" class="${ifDefined(classMap(context.classes.main))}">			${ !context.noHeader ? block1(context) : undefined }<section class="sapMDialogSection"><div class="sapMPopupContent"><div class="sapMPopupScroll"><slot></slot></div></div></section>			${ context.footer ? block4(context) : undefined }</div></div><span id="${ifDefined(context._id)}-lastfe" tabindex="0"></span><div tabindex="0" id="${ifDefined(context._id)}-blocklayer" style="${ifDefined(context.blockLayer)}" class="${ifDefined(classMap(context.classes.blockLayer))}"></div></span>`; };
-const block1 = (context) => { return html`<header>			${ context.header ? block2(context) : block3(context) }</header>	`; };
+const block0 = (context) => { return html`<span class="${ifDefined(classMap(context.classes.frame))}"><span id="${ifDefined(context._id)}-firstfe" tabindex="0"></span><div style="${ifDefined(context.zindex)}" class="${ifDefined(classMap(context.classes.dialogParent))}"><div tabindex="-1" aria-labelledby="${ifDefined(context.headerId)}" role="dialog" class="${ifDefined(classMap(context.classes.main))}">			${ !context.noHeader ? block1(context) : undefined }<section class="sapMDialogSection"><div class="sapMPopupContent"><div class="sapMPopupScroll"><slot></slot></div></div></section>			${ context.footer.length ? block4(context) : undefined }</div></div><span id="${ifDefined(context._id)}-lastfe" tabindex="0"></span><div tabindex="0" id="${ifDefined(context._id)}-blocklayer" style="${ifDefined(context.blockLayer)}" class="${ifDefined(classMap(context.classes.blockLayer))}"></div></span>`; };
+const block1 = (context) => { return html`<header>			${ context.header.length ? block2(context) : block3(context) }</header>	`; };
 const block2 = (context) => { return html`<div role="heading" class="sapMPopupHeader"><slot name="header"></slot></div>			`; };
@@ -9,0 +9,0 @@ const block3 = (context) => { return html`<h2 role="heading" class="sapMPopupHeader sapMPopupHeaderText">${ifDefined(context.headerText)}</h2>			`; };

dist/build/compiled/InputTemplate.lit.js

@@ -5,3 +5,3 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<div	class="${ifDefined(classMap(context.classes.main))}"	style="width: 100%;"	?aria-invalid="${ifDefined(context.ariaInvalid)}"	@focusin="${ifDefined(context.onfocusin)}"	@focusout="${ifDefined(context.onfocusout)}"><div id="${ifDefined(context._id)}-wrapper"	class="${ifDefined(classMap(context.classes.wrapper))}">	${ context._beginContent ? block1(context) : undefined }<input id="${ifDefined(context._id)}-inner"			class="sapWCInputBaseInner"			type="${ifDefined(context.inputType)}"			?disabled="${ifDefined(context.disabled)}"			?readonly="${ifDefined(context._readonly)}"			.value="${ifDefined(context.value)}"			placeholder="${ifDefined(context.inputPlaceholder)}"			@input="${ifDefined(context._handleInput)}"			@change="${ifDefined(context._handleChange)}"			data-sap-no-tab-ref			data-sap-focus-ref	/>		${ context.icon ? block2(context) : undefined }</div>	${ context.showSuggestions ? block3(context) : undefined }<slot name="formSupport"></slot></div>`; };
+const block0 = (context) => { return html`<div	class="${ifDefined(classMap(context.classes.main))}"	style="width: 100%;"	?aria-invalid="${ifDefined(context.ariaInvalid)}"	@focusin="${ifDefined(context.onfocusin)}"	@focusout="${ifDefined(context.onfocusout)}"><div id="${ifDefined(context._id)}-wrapper"	class="${ifDefined(classMap(context.classes.wrapper))}">	${ context._beginContent.length ? block1(context) : undefined }<input id="${ifDefined(context._id)}-inner"			class="sapWCInputBaseInner"			type="${ifDefined(context.inputType)}"			?disabled="${ifDefined(context.disabled)}"			?readonly="${ifDefined(context._readonly)}"			.value="${ifDefined(context.value)}"			placeholder="${ifDefined(context.inputPlaceholder)}"			@input="${ifDefined(context._handleInput)}"			@change="${ifDefined(context._handleChange)}"			data-sap-no-tab-ref			data-sap-focus-ref	/>		${ context.icon.length ? block2(context) : undefined }</div>	${ context.showSuggestions ? block3(context) : undefined }<slot name="formSupport"></slot></div>`; };
 const block1 = (context) => { return html`<slot name="_beginContent"></slot>	`; };
@@ -8,0 +8,0 @@ const block2 = (context) => { return html`<slot name="icon"></slot>		`; };

dist/build/compiled/ListTemplate.lit.js

@@ -5,3 +5,3 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<div	class="${ifDefined(classMap(context.classes.main))}"	@focusin="${ifDefined(context.onfocusin)}"><!-- header -->	${ context.header ? block1(context) : undefined }${ context.shouldRenderH1 ? block2(context) : undefined }<div id="${ifDefined(context._id)}-before" tabindex="0" class="sapMListDummyArea"></div><ul id="${ifDefined(context._id)}-listUl" class="${ifDefined(classMap(context.classes.ul))}"><slot></slot>		${ context.showNoDataText ? block3(context) : undefined }</ul>	${ context.footerText ? block4(context) : undefined }<div id="${ifDefined(context._id)}-after" tabindex="0" class="sapMListDummyArea"></div></div>`; };
+const block0 = (context) => { return html`<div	class="${ifDefined(classMap(context.classes.main))}"	@focusin="${ifDefined(context.onfocusin)}"><!-- header -->	${ context.header.length ? block1(context) : undefined }${ context.shouldRenderH1 ? block2(context) : undefined }<div id="${ifDefined(context._id)}-before" tabindex="0" class="sapMListDummyArea"></div><ul id="${ifDefined(context._id)}-listUl" class="${ifDefined(classMap(context.classes.ul))}"><slot></slot>		${ context.showNoDataText ? block3(context) : undefined }</ul>	${ context.footerText ? block4(context) : undefined }<div id="${ifDefined(context._id)}-after" tabindex="0" class="sapMListDummyArea"></div></div>`; };
 const block1 = (context) => { return html`<slot name="header" />	`; };
@@ -8,0 +8,0 @@ const block2 = (context) => { return html`<header id="${ifDefined(context._id)}-header" class="sapMListHdr sapMListHdrText">			${ifDefined(context.headerText)}</header>	`; };

dist/build/compiled/PanelTemplate.lit.js

@@ -5,7 +5,7 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<div		data-sap-ui-fastnavgroup="true"		class="${ifDefined(classMap(context.classes.main))}"		role="${ifDefined(context.accRole)}"><!-- header: either header or h1 with header text -->	${ context.fixed ? block1(context) : block4(context) }<!-- content area --><div class="${ifDefined(classMap(context.classes.content))}" tabindex="-1" style="${ifDefined(styleMap(context.styles.content))}"><slot></slot></div></div>`; };
-const block1 = (context) => { return html`${ context.header ? block2(context) : undefined }${ context.shouldRenderH1 ? block3(context) : undefined }`; };
+const block0 = (context) => { return html`<div	data-sap-ui-fastnavgroup="true"	class="${ifDefined(classMap(context.classes.main))}"	role="${ifDefined(context.accRole)}"><!-- header: either header or h1 with header text -->	${ context.fixed ? block1(context) : block4(context) }<!-- content area --><div class="${ifDefined(classMap(context.classes.content))}" tabindex="-1" style="${ifDefined(styleMap(context.styles.content))}"><slot></slot></div></div>`; };
+const block1 = (context) => { return html`${ context.header.length ? block2(context) : undefined }${ context.shouldRenderH1 ? block3(context) : undefined }`; };
 const block2 = (context) => { return html`<div class="sapMPanelHdrToolbar"><slot name="header"></slot></div>	`; };
 const block3 = (context) => { return html`<h1 id="${ifDefined(context._id)}-header" class="sapMPanelHdr">			${ifDefined(context.headerText)}</h1>	`; };
-const block4 = (context) => { return html`<header @click="${ifDefined(context._header.press)}" class="${ifDefined(classMap(context.classes.header))}" tabindex="${ifDefined(context.headerTabIndex)}"><ui5-icon				class="${ifDefined(classMap(context.classes.icon))}"				src="${ifDefined(context._icon.src)}"				title="${ifDefined(context._icon.title)}"				tabindex="${ifDefined(context.iconTabIndex)}"				aria-expanded="${ifDefined(context.expanded)}"				aria-labelledby="${ifDefined(context.ariaLabelledBy)}"				@ui5-press="${ifDefined(context._icon.press)}"			></ui5-icon>			${ context.header ? block5(context) : undefined }${ context.shouldRenderH1 ? block6(context) : undefined }</header>	`; };
+const block4 = (context) => { return html`<header            @click="${ifDefined(context._header.press)}"            @keydown="${ifDefined(context.onHeaderKeyDown)}"            @keyup="${ifDefined(context.onHeaderKeyUp)}"            class="${ifDefined(classMap(context.classes.header))}"            tabindex="${ifDefined(context.headerTabIndex)}"		><ui5-icon				class="${ifDefined(classMap(context.classes.icon))}"				src="${ifDefined(context._icon.src)}"				title="${ifDefined(context._icon.title)}"				tabindex="${ifDefined(context.iconTabIndex)}"				aria-expanded="${ifDefined(context.expanded)}"				aria-labelledby="${ifDefined(context.ariaLabelledBy)}"				@ui5-press="${ifDefined(context._icon.press)}"			></ui5-icon>			${ context.header.length ? block5(context) : undefined }${ context.shouldRenderH1 ? block6(context) : undefined }</header>	`; };
 const block5 = (context) => { return html`<div class="sapMPanelHdrToolbar"><slot name="header"></slot></div>	`; };
@@ -12,0 +12,0 @@ const block6 = (context) => { return html`<h1 id="${ifDefined(context._id)}-header" class="sapMPanelHdr">			${ifDefined(context.headerText)}</h1>	`; };

dist/build/compiled/PopoverTemplate.lit.js

@@ -5,4 +5,4 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<span class="${ifDefined(classMap(context.classes.frame))}" @focusin="${ifDefined(context.onfocusin)}"><span id="${ifDefined(context._id)}-firstfe" tabindex="0" @focusin=${ifDefined(context.focusHelper.forwardToLast)}></span><div style="${ifDefined(styleMap(context.styles.main))}" role="dialog" aria-labelledby="${ifDefined(context.headerId)}" tabindex="-1" class="${ifDefined(classMap(context.classes.main))}">			${ !context.noHeader ? block1(context) : undefined }<div id="${ifDefined(context._id)}-content" role="application" style="${ifDefined(styleMap(context.styles.content))}" class="sapMPopupContent"><div class="sapMPopupScroll"><slot></slot></div></div>			${ context.footer ? block4(context) : undefined }<span id="${ifDefined(context._id)}-arrow" style="${ifDefined(styleMap(context.styles.arrow))}" class="${ifDefined(classMap(context.classes.arrow))}"></span></div><span id="${ifDefined(context._id)}-lastfe" tabindex="0" @focusin=${ifDefined(context.focusHelper.forwardToFirst)}></span><div tabindex="0" id="${ifDefined(context._id)}-blocklayer" style="${ifDefined(styleMap(context.styles.blockLayer))}" class="${ifDefined(classMap(context.classes.blockLayer))}"></div></span>`; };
-const block1 = (context) => { return html`<header>			${ context.header ? block2(context) : block3(context) }</header>	`; };
+const block0 = (context) => { return html`<span class="${ifDefined(classMap(context.classes.frame))}" @focusin="${ifDefined(context.onfocusin)}"><span id="${ifDefined(context._id)}-firstfe" tabindex="0" @focusin=${ifDefined(context.focusHelper.forwardToLast)}></span><div style="${ifDefined(styleMap(context.styles.main))}" role="dialog" aria-labelledby="${ifDefined(context.headerId)}" tabindex="-1" class="${ifDefined(classMap(context.classes.main))}">			${ !context.noHeader ? block1(context) : undefined }<div id="${ifDefined(context._id)}-content" role="application" style="${ifDefined(styleMap(context.styles.content))}" class="sapMPopupContent"><div class="sapMPopupScroll"><slot></slot></div></div>			${ context.footer.length ? block4(context) : undefined }<span id="${ifDefined(context._id)}-arrow" style="${ifDefined(styleMap(context.styles.arrow))}" class="${ifDefined(classMap(context.classes.arrow))}"></span></div><span id="${ifDefined(context._id)}-lastfe" tabindex="0" @focusin=${ifDefined(context.focusHelper.forwardToFirst)}></span><div tabindex="0" id="${ifDefined(context._id)}-blocklayer" style="${ifDefined(styleMap(context.styles.blockLayer))}" class="${ifDefined(classMap(context.classes.blockLayer))}"></div></span>`; };
+const block1 = (context) => { return html`<header>			${ context.header.length ? block2(context) : block3(context) }</header>	`; };
 const block2 = (context) => { return html`<div role="toolbar" class="sapMPopupHeader"><slot name="header"></slot></div>			`; };
@@ -9,0 +9,0 @@ const block3 = (context) => { return html`<h2 role="toolbar" class="sapMPopupHeader sapMPopupHeaderText">${ifDefined(context.headerText)}</h2>			`; };

dist/build/compiled/ShellBarTemplate.lit.js

@@ -5,3 +5,3 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<div	class="${ifDefined(classMap(context.classes.wrapper))}"	dir="${ifDefined(context.rtl)}"><div class="${ifDefined(classMap(context.classes.leftContainer))}">		${ context.icon ? block1(context) : undefined }${ !context.interactiveLogo ? block2(context) : undefined }${ context.showArrowDown ? block3(context) : undefined }<ui5-popover class="sapWCShellBarMenuPopover" no-header placement-type="Bottom"><ui5-list separators="None" mode="SingleSelect" @ui5-itemPress=${ifDefined(context._menuItemPress)}><slot name="menuItems"></slot></ui5-list></ui5-popover><h2 class="${ifDefined(classMap(context.classes.secondaryTitle))}">${ifDefined(context.secondaryTitle)}</h2></div><div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerMiddle">		${ context.showCoPilot ? block6(context) : block7(context) }</div><div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerRight"><div class="sapWCShellBarOverflowContainerRightChild">			${ repeat(context._itemsInfo, undefined, (item, index) => block8(item, index, context)) }</div></div><ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="${ifDefined(context.popoverHorizontalAlign)}" no-header no-arrow><ui5-list separators="None" @ui5-itemPress="${ifDefined(context._actionList.itemPress)}">			${ repeat(context._hiddenIcons, undefined, (item, index) => block11(item, index, context)) }</ui5-list></ui5-popover><div class="${ifDefined(classMap(context.classes.blockLayer))}"></div><div id="${ifDefined(context._id)}-searchfield-wrapper"		class="${ifDefined(classMap(context.classes.searchField))}"		style="${ifDefined(styleMap(context.styles.searchField))}"		@focusout=${ifDefined(context._searchField.focusout)}	>		${ context.searchField ? block12(context) : undefined }</div></div>`; };
+const block0 = (context) => { return html`<div	class="${ifDefined(classMap(context.classes.wrapper))}"	dir="${ifDefined(context.rtl)}"><div class="${ifDefined(classMap(context.classes.leftContainer))}">		${ context.icon.length ? block1(context) : undefined }${ !context.interactiveLogo ? block2(context) : undefined }${ context.showArrowDown ? block3(context) : undefined }<ui5-popover class="sapWCShellBarMenuPopover" no-header placement-type="Bottom"><ui5-list separators="None" mode="SingleSelect" @ui5-itemPress=${ifDefined(context._menuItemPress)}><slot name="menuItems"></slot></ui5-list></ui5-popover><h2 class="${ifDefined(classMap(context.classes.secondaryTitle))}">${ifDefined(context.secondaryTitle)}</h2></div><div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerMiddle">		${ context.showCoPilot ? block6(context) : block7(context) }</div><div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerRight"><div class="sapWCShellBarOverflowContainerRightChild">			${ repeat(context._itemsInfo, undefined, (item, index) => block8(item, index, context)) }</div></div><ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="${ifDefined(context.popoverHorizontalAlign)}" no-header no-arrow><ui5-list separators="None" @ui5-itemPress="${ifDefined(context._actionList.itemPress)}">			${ repeat(context._hiddenIcons, undefined, (item, index) => block11(item, index, context)) }</ui5-list></ui5-popover><div class="${ifDefined(classMap(context.classes.blockLayer))}"></div><div id="${ifDefined(context._id)}-searchfield-wrapper"		class="${ifDefined(classMap(context.classes.searchField))}"		style="${ifDefined(styleMap(context.styles.searchField))}"		@focusout=${ifDefined(context._searchField.focusout)}	>		${ context.searchField.length ? block12(context) : undefined }</div></div>`; };
 const block1 = (context) => { return html`<slot name="icon"></slot>		`; };
@@ -8,0 +8,0 @@ const block2 = (context) => { return html`<img class="${ifDefined(classMap(context.classes.logo))}" src="${ifDefined(context.logo)}" @click="${ifDefined(context._logoPress)}" />		`; };

dist/build/compiled/StandardListItemTemplate.lit.js

@@ -5,3 +5,3 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<li	tabindex="${ifDefined(context._tabIndex)}"	class="${ifDefined(classMap(context.classes.main))}"	dir="${ifDefined(context.rtl)}"	@focusin="${ifDefined(context.onfocusin)}"	@focusout="${ifDefined(context.onfocusout)}">		${ context.placeSelectionElementBefore ? block1(context) : undefined }<div id="${ifDefined(context._id)}-content" class="${ifDefined(classMap(context.classes.inner))}">			${ context.displayImage ? block5(context) : undefined }${ context.displayIconBegin ? block6(context) : undefined }<div class="sapMSLITextWrapper">		${ context.text.length ? block7(context) : undefined }${ context.description ? block8(context) : undefined }</div>	${ context.info ? block9(context) : undefined }</div>		${ context.displayIconEnd ? block10(context) : undefined }${ context.placeSelectionElementAfter ? block11(context) : undefined }</li>`; };
+const block0 = (context) => { return html`<li	tabindex="${ifDefined(context._tabIndex)}"	class="${ifDefined(classMap(context.classes.main))}"	dir="${ifDefined(context.rtl)}"	@focusin="${ifDefined(context.onfocusin)}"	@focusout="${ifDefined(context.onfocusout)}">		${ context.placeSelectionElementBefore ? block1(context) : undefined }<div id="${ifDefined(context._id)}-content" class="${ifDefined(classMap(context.classes.inner))}">			${ context.displayImage ? block5(context) : undefined }${ context.displayIconBegin ? block6(context) : undefined }<div class="sapMSLITextWrapper">		${ context.textContent.length ? block7(context) : undefined }${ context.description ? block8(context) : undefined }</div>	${ context.info ? block9(context) : undefined }</div>		${ context.displayIconEnd ? block10(context) : undefined }${ context.placeSelectionElementAfter ? block11(context) : undefined }</li>`; };
 const block1 = (context) => { return html`${ context.modeSingleSelect ? block2(context) : undefined }${ context.modeMultiSelect ? block3(context) : undefined }${ context.modeDelete ? block4(context) : undefined }`; };
@@ -8,0 +8,0 @@ const block2 = (context) => { return html`<ui5-radiobutton				id="${ifDefined(context._id)}-singleSelectionElement"				class="singleSelectionRadioButton"				?selected="${ifDefined(context.selected)}"></ui5-radiobutton>	`; };

dist/build/compiled/TableColumnTemplate.lit.js

@@ -5,5 +5,4 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<div class="${ifDefined(classMap(context.classes.main))}" >	${ context.header ? block1(context) : undefined }</div>`; };
-const block1 = (context) => { return html`<slot></slot>	`; };
+const block0 = (context) => { return html`<div class="${ifDefined(classMap(context.classes.main))}" ><slot></slot></div>`; };
 
 export default block0;

dist/build/compiled/TimelineItemTemplate.lit.js

@@ -5,6 +5,6 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<div	class="${ifDefined(classMap(context.classes.main))}"	dir="${ifDefined(context.rtl)}"><div class="${ifDefined(classMap(context.classes.indicator))}">		${ context.icon ? block1(context) : undefined }</div><div class="sapWCTimelineBubble" tabindex="${ifDefined(context._tabIndex)}" data-sap-focus-ref><div class="sapWCTimelineItemTitle">			${ context.itemName ? block2(context) : undefined }<span>${ifDefined(context.titleText)}</span></div><div class="sapWCTimelineItemSubtitle">${ifDefined(context.subtitleText)}</div>		${ context.description ? block5(context) : undefined }<span class="sapWCTimelineBubbleArrow sapWCTimelineBubbleArrowLeft"></span></div></div>`; };
+const block0 = (context) => { return html`<div	class="${ifDefined(classMap(context.classes.main))}"	dir="${ifDefined(context.rtl)}"><div class="${ifDefined(classMap(context.classes.indicator))}">		${ context.icon ? block1(context) : undefined }</div><div class="sapWCTimelineBubble" tabindex="${ifDefined(context._tabIndex)}" data-sap-focus-ref><div class="sapWCTimelineItemTitle">			${ context.itemName ? block2(context) : undefined }<span>${ifDefined(context.titleText)}</span></div><div class="sapWCTimelineItemSubtitle">${ifDefined(context.subtitleText)}</div>		${ context.textContent ? block5(context) : undefined }<span class="sapWCTimelineBubbleArrow sapWCTimelineBubbleArrowLeft"></span></div></div>`; };
 const block1 = (context) => { return html`<ui5-icon class="sapWCTimelineItemIcon" src="${ifDefined(context.icon)}"></ui5-icon>		`; };
 const block2 = (context) => { return html`${ context.itemNameClickable ? block3(context) : undefined }${ !context.itemNameClickable ? block4(context) : undefined }`; };
-const block3 = (context) => { return html`<ui5-link @ui5-press="${ifDefined(context.onItemNamePress)}">${ifDefined(context.itemName)}</ui5-link>	`; };
+const block3 = (context) => { return html`<ui5-link @click="${ifDefined(context.onItemNamePress)}">${ifDefined(context.itemName)}</ui5-link>	`; };
 const block4 = (context) => { return html`<span>${ifDefined(context.itemName)}</span>	`; };
@@ -11,0 +11,0 @@ const block5 = (context) => { return html`<div class="sapWCTimelineItemDesc"><slot></slot></div>		`; };

dist/build/compiled/ToggleButtonTemplate.lit.js

@@ -5,3 +5,3 @@
 import { html, svg, repeat, classMap, styleMap } from '@ui5/webcomponents-base/src/renderer/LitRenderer.js';
-const block0 = (context) => { return html`<button		type="button"		class="${ifDefined(classMap(context.classes.main))}"		?disabled="${ifDefined(context.disabled)}"		data-sap-focus-ref			aria-pressed="${ifDefined(context.pressed)}"		dir="${ifDefined(context.rtl)}"		@focusout=${ifDefined(context.onfocusout)}	>		${ context.icon ? block1(context) : undefined }${ context.textContent ? block2(context) : undefined }</button>`; };
+const block0 = (context) => { return html`<button		type="button"		class="${ifDefined(classMap(context.classes.main))}"		?disabled="${ifDefined(context.disabled)}"		data-sap-focus-ref			aria-pressed="${ifDefined(context.pressed)}"		dir="${ifDefined(context.rtl)}"		@focusout=${ifDefined(context._onfocusout)}		@click=${ifDefined(context._onclick)}		@mousedown=${ifDefined(context._onmousedown)}	>		${ context.icon ? block1(context) : undefined }${ context.textContent ? block2(context) : undefined }</button>`; };
 const block1 = (context) => { return html`<ui5-icon				class="${ifDefined(classMap(context.classes.icon))}"				src="${ifDefined(context.icon)}"			></ui5-icon>		`; };
@@ -8,0 +8,0 @@ const block2 = (context) => { return html`<span id="${ifDefined(context._id)}-content" class="${ifDefined(classMap(context.classes.text))}"><bdi><slot></slot></bdi></span>		`; };

dist/Button.js

@@ -114,13 +114,11 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 		 */
-		text: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
 	},
-	defaultSlot: "text",
 	events: /** @lends sap.ui.webcomponents.main.Button.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-button</code> is pressed either with a
-		 * click/tap or by using the Enter or Space key.
+		 * Fired when the <code>ui5-button</code> is activated either with a
+		 * mouse/tap or by using the Enter or Space key.
 		 * <br><br>
@@ -133,3 +131,3 @@ * <b>Note:</b> The event will not be fired if the <code>disabled</code>
 		 */
-		press: {},
+		click: {},
 	},
@@ -214,19 +212,14 @@ };
 
-	onclick(event) {
+	_onclick(event) {
 		event.isMarked = "button";
-		if (!this.disabled) {
-			this.fireEvent("press", {});
-			const FormSupport = getFeature("FormSupport");
-			if (FormSupport) {
-				FormSupport.triggerFormSubmit(this);
-			}
+		this.fireEvent("press", {});
+		const FormSupport = getFeature("FormSupport");
+		if (FormSupport) {
+			FormSupport.triggerFormSubmit(this);
 		}
 	}
 
-	onmousedown(event) {
+	_onmousedown(event) {
 		event.isMarked = "button";
-
-		if (!this.disabled) {
-			this._active = true;
-		}
+		this._active = true;
 	}
@@ -250,3 +243,3 @@
 
-	onfocusout(_event) {
+	_onfocusout(_event) {
 		this._active = false;
@@ -261,3 +254,3 @@ }
 				sapMBtnWithIcon: this.icon,
-				sapMBtnNoText: !this.text.length,
+				sapMBtnNoText: !this.textContent.length,
 				sapMBtnDisabled: this.disabled,
@@ -264,0 +257,0 @@ sapMBtnIconEnd: this.iconEnd,

dist/CalendarHeader.js

 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
+import getShadowDOMTarget from "@ui5/webcomponents-base/src/events/getShadowDOMTarget.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
@@ -99,6 +100,7 @@ import { getCompactSize } from "@ui5/webcomponents-base/src/Configuration.js";
 		const composedPath = event.composedPath();
+		const eventTarget = getShadowDOMTarget(event);
 
 		for (let index = 0; index < composedPath.length; index++) {
 			const sAttributeValue = composedPath[index].getAttribute && composedPath[index].getAttribute("data-sap-cal-head-button");
-			const showPickerButton = event.ui5target.getAttribute("data-sap-show-picker");
+			const showPickerButton = eventTarget.getAttribute("data-sap-show-picker");
 
@@ -118,4 +120,5 @@ if (showPickerButton) {
 	onkeydown(event) {
+		const eventTarget = getShadowDOMTarget(event);
 		if (isSpace(event) || isEnter(event)) {
-			const showPickerButton = event.ui5target.getAttribute("data-sap-show-picker");
+			const showPickerButton = eventTarget.getAttribute("data-sap-show-picker");
 
@@ -122,0 +125,0 @@ if (showPickerButton) {

dist/Card.js

@@ -17,3 +17,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-card",
-	defaultSlot: "content",
 	slots: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
@@ -27,5 +26,5 @@
 		 */
-		content: {
+		"default": {
+			propertyName: "content",
 			type: HTMLElement,
-			multiple: true,
 		},
@@ -96,4 +95,4 @@ },
 		/**
-		 * Fired when the <code>ui5-card</code> header is pressed
-		 * by click/tap or by using the Enter or Space key.
+		 * Fired when the <code>ui5-card</code> header is activated
+		 * by mouse/tap or by using the Enter or Space key.
 		 * <br><br>
@@ -105,3 +104,3 @@ * <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
 		 */
-		headerPress: {},
+		headerClick: {},
 	},
@@ -189,3 +188,3 @@ };
 		if (this.headerInteractive) {
-			this.fireEvent("headerPress");
+			this.fireEvent("headerClick");
 		}
@@ -205,3 +204,3 @@ }
 		if (enter) {
-			this.fireEvent("headerPress");
+			this.fireEvent("headerClick");
 			return;
@@ -225,3 +224,3 @@ }
 		if (space) {
-			this.fireEvent("headerPress");
+			this.fireEvent("headerClick");
 		}
@@ -228,0 +227,0 @@ }

dist/CustomListItem.js

@@ -13,3 +13,2 @@ import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
 	tag: "ui5-li-custom",
-	defaultSlot: "content",
 	slots: /** @lends sap.ui.webcomponents.main.CustomListItem.prototype */ {
@@ -19,9 +18,8 @@
 		 * Defines the content of the <code>ui5-li-custom</code>.
-		 * @type {HTMLElement[]}
+		 * @type {Node[]}
 		 * @slot
 		 * @public
 		 */
-		content: {
-			type: HTMLElement,
-			multiple: true,
+		"default": {
+			type: Node,
 		},
@@ -28,0 +26,0 @@ },

dist/DatePicker.js

@@ -16,2 +16,3 @@ import "@ui5/webcomponents-base/src/shims/jquery-shim.js";
 import { isShow } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
+import getShadowDOMTarget from "@ui5/webcomponents-base/src/events/getShadowDOMTarget.js";
 import Icon from "./Icon.js";
@@ -321,6 +322,7 @@ import Popover from "./Popover.js";
 	onclick(event) {
+		const eventTarget = getShadowDOMTarget(event);
 		const icon = this.shadowRoot.querySelector("ui5-icon");
-		const isIconTab = (event.ui5target === icon);
+		const isIconTab = (eventTarget === icon);
 
-		if (icon && (isIconTab || event.ui5target.contains(icon.getDomRef()))) {
+		if (icon && (isIconTab || eventTarget.contains(icon.getDomRef()))) {
 			this.togglePicker();
@@ -327,0 +329,0 @@ }

dist/DayPicker.js

@@ -12,2 +12,3 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import { calculateWeekNumber } from "@ui5/webcomponents-base/src/dates/CalendarUtils.js";
+import getShadowDOMTarget from "@ui5/webcomponents-base/src/events/getShadowDOMTarget.js";
 import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js";
@@ -256,3 +257,8 @@ import DayPickerTemplate from "./build/compiled/DayPickerTemplate.lit.js";
 	onclick(event) {
-		const target = event.ui5target;
+		const target = getShadowDOMTarget(event);
+
+		if (target.className.indexOf("sapWCDayPickerItem") === -1) {
+			return;
+		}
+
 		const dayPressed = this._isDayPressed(target);
@@ -290,5 +296,6 @@
 	_handleEnter(event) {
+		const eventTarget = getShadowDOMTarget(event);
 		event.preventDefault();
-		if (event.ui5target.className.indexOf("sapWCDayPickerItem") > -1) {
-			const targetDate = parseInt(event.ui5target.getAttribute("data-sap-timestamp"));
+		if (eventTarget.className.indexOf("sapWCDayPickerItem") > -1) {
+			const targetDate = parseInt(eventTarget.getAttribute("data-sap-timestamp"));
 			this._modifySelectionAndNotifySubscribers(targetDate, event.ctrlKey);
@@ -299,5 +306,6 @@ }
 	_handleSpace(event) {
+		const eventTarget = getShadowDOMTarget(event);
 		event.preventDefault();
-		if (event.ui5target.className.indexOf("sapWCDayPickerItem") > -1) {
-			const targetDate = parseInt(event.ui5target.getAttribute("data-sap-timestamp"));
+		if (eventTarget.className.indexOf("sapWCDayPickerItem") > -1) {
+			const targetDate = parseInt(eventTarget.getAttribute("data-sap-timestamp"));
 			this._modifySelectionAndNotifySubscribers(targetDate, event.ctrlKey);
@@ -304,0 +312,0 @@ }

dist/GroupHeaderListItem.js

@@ -26,8 +26,6 @@ import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
 		 */
-		text: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
 	},
-	defaultSlot: "text",
 	events: /** @lends  sap.ui.webcomponents.main.GroupHeaderListItem.prototype */ {
@@ -34,0 +32,0 @@ },

dist/Input.js

@@ -27,3 +27,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-input",
-	defaultSlot: "suggestionItems",
 	slots: /** @lends sap.ui.webcomponents.main.Input.prototype */ {
@@ -34,3 +33,3 @@
 		 *
-		 * @type {Icon}
+		 * @type {Icon[]}
 		 * @slot
@@ -60,5 +59,5 @@ * @public
 		 */
-		suggestionItems: {
+		"default": {
+			propertyName: "suggestionItems",
 			type: HTMLElement,
-			multiple: true,
 		},
@@ -65,0 +64,0 @@

dist/Label.js

@@ -65,8 +65,6 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 		 */
-		text: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
 	},
-	defaultSlot: "text",
 };
@@ -123,3 +121,3 @@
 				sapMLabel: true,
-				sapMLabelNoText: !this.text.length,
+				sapMLabelNoText: !this.textContent.length,
 				sapMLabelWrapped: this.wrap,
@@ -126,0 +124,0 @@ sapMLabelRequired: this.required,

dist/Link.js

 import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
-import { isSpace } from "@ui5/webcomponents-base/src/events/PseudoEvents.js";
 import LinkDesign from "./types/LinkDesign.js";
@@ -102,13 +101,11 @@
 		 */
-		text: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
 	},
-	defaultSlot: "text",
 	events: /** @lends sap.ui.webcomponents.main.Link.prototype */ {
 
 		/**
-		 * Fired when the <code>ui5-link</code> is triggered either with a click/tap
-		 * or by using the Space or Enter key.
+		 * Fired when the <code>ui5-link</code> is triggered either with a mouse/tap
+		 * or by using the Enter key.
 		 *
@@ -118,3 +115,3 @@ * @event
 		 */
-		press: {},
+		click: {},
 	},
@@ -186,3 +183,2 @@ };
 
-
 	onBeforeRendering() {
@@ -196,41 +192,2 @@ const needsNoReferrer = this.target === "_blank"
 
-	onclick(event) {
-		if (this.disabled) {
-			return;
-		}
-
-		const defaultPrevented = !this.fireEvent("press", {}, true);
-		if (defaultPrevented) {
-			event.preventDefault();
-		}
-	}
-
-	onkeydown(event) {
-		if (this.disabled) {
-			return;
-		}
-
-		if (isSpace(event)) {
-			event.preventDefault();
-		}
-	}
-
-	onkeyup(event) {
-		if (this.disabled) {
-			return;
-		}
-
-		if (isSpace(event)) {
-			const defaultPrevented = !this.fireEvent("press", {}, true);
-			if (defaultPrevented) {
-				return;
-			}
-
-			// Simulate click event
-			const oClickEvent = document.createEvent("MouseEvents");
-			oClickEvent.initEvent("click" /* event type */, false/* no-bubbling */, true /* cancelable */);
-			this.getDomRef().dispatchEvent(oClickEvent);
-		}
-	}
-
 	_isCrossOrigin() {
@@ -247,3 +204,3 @@ const loc = window.location;
 	get tabIndex() {
-		return (this.disabled || !this.text.length) ? "-1" : "0";
+		return (this.disabled || !this.textContent.length) ? "-1" : "0";
 	}
@@ -250,0 +207,0 @@

dist/List.js

@@ -23,3 +23,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-list",
-	defaultSlot: "items",
 	slots: /** @lends sap.ui.webcomponents.main.List.prototype */ {
@@ -32,3 +31,3 @@
 		 *
-		 * @type {HTMLElement}
+		 * @type {HTMLElement[]}
 		 * @slot
@@ -49,5 +48,5 @@ * @public
 		 */
-		items: {
+		"default": {
+			propertyName: "items",
 			type: ListItemBase,
-			multiple: true,
 		},
@@ -141,10 +140,10 @@ },
 		/**
-		 * Fired when an item is pressed, unless the item's <code>type</code> property
+		 * Fired when an item is activated, unless the item's <code>type</code> property
 		 * is set to <code>Inactive</code>.
 		 *
 		 * @event
-		 * @param {HTMLElement} item the pressed item.
+		 * @param {HTMLElement} item the clicked item.
 		 * @public
 		 */
-		itemPress: {
+		itemClick: {
 			detail: {
@@ -450,2 +449,3 @@ item: { type: HTMLElement },
 			this.fireEvent("itemPress", { item: pressedItem });
+			this.fireEvent("itemClick", { item: pressedItem });
 		}
@@ -566,3 +566,3 @@
 	get shouldRenderH1() {
-		return !this.header && this.headerText;
+		return !this.header.length && this.headerText;
 	}
@@ -569,0 +569,0 @@

dist/MessageStrip.js

@@ -90,8 +90,6 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 		 */
-		text: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
 	},
-	defaultSlot: "text",
 	events: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
@@ -98,0 +96,0 @@

dist/MonthPicker.js

@@ -12,2 +12,3 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate.js";
+import getShadowDOMTarget from "@ui5/webcomponents-base/src/events/getShadowDOMTarget.js";
 import MonthPickerTemplate from "./build/compiled/MonthPickerTemplate.lit.js";
@@ -165,4 +166,5 @@
 	onclick(event) {
-		if (event.ui5target.className.indexOf("sapWCMonthPickerItem") > -1) {
-			const timestamp = this.getTimestampFromDOM(event.ui5target);
+		const eventTarget = getShadowDOMTarget(event);
+		if (eventTarget.className.indexOf("sapWCMonthPickerItem") > -1) {
+			const timestamp = this.getTimestampFromDOM(eventTarget);
 			this.timestamp = timestamp;
@@ -181,5 +183,6 @@ this._itemNav.current = this._month;
 	_activateMonth(event) {
+		const eventTarget = getShadowDOMTarget(event);
 		event.preventDefault();
-		if (event.ui5target.className.indexOf("sapWCMonthPickerItem") > -1) {
-			const timestamp = this.getTimestampFromDOM(event.ui5target);
+		if (eventTarget.className.indexOf("sapWCMonthPickerItem") > -1) {
+			const timestamp = this.getTimestampFromDOM(eventTarget);
 			this.timestamp = timestamp;
@@ -186,0 +189,0 @@ this.fireEvent("selectedMonthChange", { timestamp });

dist/MultiComboBox.js

@@ -23,3 +23,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-multi-combobox",
-	defaultSlot: "items",
 	slots: /** @lends sap.ui.webcomponents.main.MultiComboBox.prototype */ {
@@ -40,5 +39,5 @@ /**
 		 */
-		items: {
+		"default": {
+			propertyName: "items",
 			type: HTMLElement,
-			multiple: true,
 			listenFor: { include: ["*"] },
@@ -45,0 +44,0 @@ },

dist/Panel.js

@@ -23,3 +23,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-panel",
-	defaultSlot: "content",
 	slots: /** @lends sap.ui.webcomponents.main.Panel.prototype */ {
@@ -32,3 +31,3 @@
 		 *
-		 * @type {HTMLElement}
+		 * @type {HTMLElement[]}
 		 * @slot
@@ -45,9 +44,8 @@ * @public
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {Node[]}
 		 * @slot
 		 * @public
 		 */
-		content: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
@@ -221,3 +219,3 @@ },
 
-		const toggleWithInternalHeader = !this.header;
+		const toggleWithInternalHeader = !this.header.length;
 		this._icon.title = this.resourceBundle.getText(PANEL_ICON);
@@ -228,10 +226,12 @@ this._header.press = toggleWithInternalHeader ? this._toggle : this._noOp;
 
-	onkeydown(event) {
-		const headerUsed = this._headerOnTarget(event.ui5target);
+	onHeaderKeyDown(event) {
+		if (!this._headerOnTarget(event.target)) {
+			return;
+		}
 
-		if (isEnter(event) && headerUsed) {
+		if (isEnter(event)) {
 			this._toggleOpen();
 		}
 
-		if (isSpace(event) && headerUsed) {
+		if (isSpace(event)) {
 			event.preventDefault();
@@ -241,6 +241,8 @@ }
 
-	onkeyup(event) {
-		const headerUsed = this._headerOnTarget(event.ui5target);
+	onHeaderKeyUp(event) {
+		if (!this._headerOnTarget(event.target)) {
+			return;
+		}
 
-		if (isSpace(event) && headerUsed) {
+		if (isSpace(event)) {
 			this._toggleOpen();
@@ -289,3 +291,3 @@ }
 	get ariaLabelledBy() {
-		return this.header ? "" : `${this._id}-header`;
+		return this.header.length ? "" : `${this._id}-header`;
 	}
@@ -298,11 +300,11 @@
 	get headerTabIndex() {
-		return !this.header ? "0" : "";
+		return !this.header.length ? "0" : "";
 	}
 
 	get iconTabIndex() {
-		return this.header ? "0" : "";
+		return this.header.length ? "0" : "";
 	}
 
 	get shouldRenderH1() {
-		return !this.header && (this.headerText || !this.fixed);
+		return !this.header.length && (this.headerText || !this.fixed);
 	}
@@ -317,7 +319,7 @@
 			header: {
-				sapMPanelWrappingDivTb: this.header,
-				sapMPanelWrappingDivTbExpanded: this.header && this.collapsed,
-				sapMPanelWrappingDiv: !this.header,
-				sapMPanelWrappingDivClickable: !this.header,
-				sapMPanelWrappingDivExpanded: !this.header && !this.collapsed,
+				sapMPanelWrappingDivTb: this.header.length,
+				sapMPanelWrappingDivTbExpanded: this.header.length && this.collapsed,
+				sapMPanelWrappingDiv: !this.header.length,
+				sapMPanelWrappingDivClickable: !this.header.length,
+				sapMPanelWrappingDivExpanded: !this.header.length && !this.collapsed,
 			},
@@ -324,0 +326,0 @@ icon: {

dist/Popup.js

@@ -18,9 +18,8 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 		 * Defines the content of the Web Component.
-		 * @type {HTMLElement[]}
+		 * @type {Node[]}
 		 * @slot
 		 * @public
 		 */
-		content: {
-			type: HTMLElement,
-			multiple: true,
+		"default": {
+			type: Node,
 		},
@@ -31,3 +30,3 @@
 		 *
-		 * @type {HTMLElement}
+		 * @type {HTMLElement[]}
 		 * @slot
@@ -43,3 +42,3 @@ * @public
 		 *
-		 * @type {HTMLElement}
+		 * @type {HTMLElement[]}
 		 * @slot
@@ -46,0 +45,0 @@ * @public

dist/Select.js

@@ -33,3 +33,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-select",
-	defaultSlot: "options",
 	slots: /** @lends sap.ui.webcomponents.main.Select.prototype */ {
@@ -48,5 +47,5 @@
 		 */
-		options: {
+		"default": {
+			propertyName: "options",
 			type: Option,
-			multiple: true,
 			listenFor: { include: ["*"] },
@@ -312,2 +311,3 @@ },
 		if (isDownKey || isUpKey) {
+			event.preventDefault();
 			if (isDownKey) {
@@ -314,0 +314,0 @@ nextIndex = this._getNextOptionIndex();

dist/ShellBar.js

@@ -139,9 +139,9 @@ import { getRTL } from "@ui5/webcomponents-base/src/Configuration.js";
 		 *
-		 * @type {HTMLElement}
+		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
 		 */
-		items: {
+		"default": {
+			propertyName: "items",
 			type: HTMLElement,
-			multiple: true,
 		},
@@ -155,3 +155,3 @@
 		 *
-		 * @type {HTMLElement}
+		 * @type {HTMLElement[]}
 		 * @slot
@@ -163,3 +163,2 @@ * @since 0.10
 			type: HTMLElement,
-			multiple: true,
 		},
@@ -189,14 +188,13 @@
 	},
-	defaultSlot: "items",
 	events: /** @lends sap.ui.webcomponents.main.ShellBar.prototype */ {
 		/**
 		 *
-		 * Fired, when the notification icon is pressed.
+		 * Fired, when the notification icon is activated.
 		 *
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		notificationsPress: {
+		notificationsClick: {
 			detail: {
@@ -208,9 +206,9 @@ targetRef: { type: HTMLElement },
 		/**
-		 * Fired, when the profile icon is pressed.
+		 * Fired, when the profile icon is activated.
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		profilePress: {
+		profileClick: {
 			detail: {
@@ -222,9 +220,9 @@ targetRef: { type: HTMLElement },
 		/**
-		 * Fired, when the product switch icon is pressed.
+		 * Fired, when the product switch icon is activated.
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
-		productSwitchPress: {
+		productSwitchClick: {
 			detail: {
@@ -236,10 +234,10 @@ targetRef: { type: HTMLElement },
 		/**
-		 * Fired, when the logo is pressed.
+		 * Fired, when the logo is activated.
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
 		 */
-		logoPress: {
+		logoClick: {
 			detail: {
@@ -251,10 +249,10 @@ targetRef: { type: HTMLElement },
 		/**
-		 * Fired, when the co pilot is pressed.
+		 * Fired, when the co pilot is activated.
 		 *
 		 * @event
-		 * @param {HTMLElement} targetRef dom ref of the clicked element
+		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
 		 */
-		coPilotPress: {
+		coPilotClick: {
 			detail: {
@@ -266,10 +264,10 @@ targetRef: { type: HTMLElement },
 		/**
-		 * Fired, when a menu item is selected
+		 * Fired, when a menu item is activated
 		 *
 		 * @event
-		 * @param {HTMLElement} item dom ref of the clicked list item
+		 * @param {HTMLElement} item dom ref of the activated list item
 		 * @since 0.10
 		 * @public
 		 */
-		menuItemPress: {
+		menuItemClick: {
 			detail: {
@@ -438,3 +436,3 @@ item: { type: HTMLElement },
 	_menuItemPress(event) {
-		this.fireEvent("menuItemPress", {
+		this.fireEvent("menuItemClick", {
 			item: event.detail.item,
@@ -445,3 +443,3 @@ });
 	_logoPress(event) {
-		this.fireEvent("logoPress", {
+		this.fireEvent("logoClick", {
 			targetRef: this.shadowRoot.querySelector(".sapWCShellBarLogo"),
@@ -452,3 +450,3 @@ });
 	_coPilotPress(event) {
-		this.fireEvent("coPilotPress", {
+		this.fireEvent("coPilotClick", {
 			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-coPilot"),
@@ -509,3 +507,3 @@ });
 	_handleSizeS() {
-		const hasIcons = this.showNotifications || this.showProductSwitch || this.searchField || this.items.length;
+		const hasIcons = this.showNotifications || this.showProductSwitch || this.searchField.length || this.items.length;
 
@@ -687,3 +685,3 @@ this._itemsInfo = this._getAllItems(hasIcons).map(info => {
 
-		if (this.searchField) {
+		if (this.searchField.length) {
 			elementIndex += 1;
@@ -710,3 +708,3 @@ }
 	_handleNotificationsPress(event) {
-		this.fireEvent("notificationsPress", {
+		this.fireEvent("notificationsClick", {
 			targetRef: this.shadowRoot.querySelector(".sapWCShellBarBellIcon"),
@@ -717,3 +715,3 @@ });
 	_handleProfilePress(event) {
-		this.fireEvent("profilePress", {
+		this.fireEvent("profileClick", {
 			targetRef: this.shadowRoot.querySelector(".sapWCShellBarImageButton"),
@@ -724,3 +722,3 @@ });
 	_handleProductSwitchPress(event) {
-		this.fireEvent("productSwitchPress", {
+		this.fireEvent("productSwitchClick", {
 			targetRef: this.shadowRoot.querySelector(".sapWCShellBarIconProductSwitch"),
@@ -741,6 +739,6 @@ });
 				text: "Search",
-				classes: `${this.searchField ? "" : "sapWCShellBarUnsetIcon"} sapWCShellBarSearchIcon sapWCShellBarIconButton`,
+				classes: `${this.searchField.length ? "" : "sapWCShellBarUnsetIcon"} sapWCShellBarSearchIcon sapWCShellBarIconButton`,
 				priority: 4,
-				domOrder: this.searchField ? (++domOrder) : -1,
-				style: `order: ${this.searchField ? 1 : -10}`,
+				domOrder: this.searchField.length ? (++domOrder) : -1,
+				style: `order: ${this.searchField.length ? 1 : -10}`,
 				id: `${this._id}-item-${1}`,
@@ -824,3 +822,3 @@ press: this._handleSearchIconPress.bind(this),
 				[`sapWCShellBarSize${this._breakpointSize}`]: true,
-				"sapWCShellBarHasSearchField": this.searchField,
+				"sapWCShellBarHasSearchField": this.searchField.length,
 				"sapWCShellBarBlockLayerShown": this._showBlockLayer,
@@ -827,0 +825,0 @@ "sapWCShellBarHasNotifications": !!this.notificationCount,

dist/StandardListItem.js

@@ -96,8 +96,6 @@ import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
 		 */
-		text: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
 	},
-	defaultSlot: "text",
 };
@@ -104,0 +102,0 @@

dist/Tab.js

@@ -12,3 +12,2 @@ import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
 	tag: "ui5-tab",
-	defaultSlot: "content",
 	slots: /** @lends sap.ui.webcomponents.main.Tab.prototype */ {
@@ -18,9 +17,8 @@
 		 * Defines the tab content.
-		 * @type {HTMLElement[]}
+		 * @type {Node[]}
 		 * @slot
 		 * @public
 		 */
-		content: {
-			type: HTMLElement,
-			multiple: true,
+		"default": {
+			type: Node,
 		},
@@ -27,0 +25,0 @@ },

dist/TabContainer.js

@@ -29,3 +29,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-tabcontainer",
-	defaultSlot: "items",
 	slots: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
@@ -40,5 +39,5 @@ /**
 		 */
-		items: {
+		"default": {
+			propertyName: "items",
 			type: TabBase,
-			multiple: true,
 			individualSlots: true,
@@ -239,3 +238,3 @@ listenFor: { include: ["*"] },
 
-		if (!hasSelected) {
+		if (this.items.length && !hasSelected) {
 			this.items[0].selected = true;
@@ -242,0 +241,0 @@ }

dist/Table.js

@@ -29,5 +29,5 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 		 */
-		rows: {
+		"default": {
+			propertyName: "rows",
 			type: TableRow,
-			multiple: true,
 			individualSlots: true,
@@ -46,3 +46,2 @@ },
 			type: TableColumn,
-			multiple: true,
 			individualSlots: true,
@@ -52,3 +51,2 @@ listenFor: { exclude: ["header"] },
 	},
-	defaultSlot: "rows",
 	properties: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
@@ -55,0 +53,0 @@

dist/TableCell.js

@@ -17,9 +17,8 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {Node[]}
 		 * @slot
 		 * @public
 		 */
-		content: {
-			type: HTMLElement,
-			multiple: true,
+		"default": {
+			type: Node,
 		},
@@ -26,0 +25,0 @@ },

dist/TableColumn.js

@@ -18,11 +18,10 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 		 *
-		 * @type {HTMLElement}
+		 * @type {Node[]}
 		 * @slot
 		 * @public
 		 */
-		header: {
-			type: HTMLElement,
+		"default": {
+			type: Node,
 		},
 	},
-	defaultSlot: "header",
 	properties: /** @lends sap.ui.webcomponents.main.TableColumn.prototype */ {
@@ -29,0 +28,0 @@

dist/TableRow.js

@@ -14,3 +14,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-table-row",
-	defaultSlot: "cells",
 	slots: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
@@ -25,5 +24,5 @@ /**
 		 */
-		cells: {
+		"default": {
+			propertyName: "cells",
 			type: TableCell,
-			multiple: true,
 			individualSlots: true,
@@ -30,0 +29,0 @@ },

dist/themes/Button.css.js

@@ -1,1 +0,1 @@
-export default ":host(ui5-button:not([hidden])){display:inline-block}ui5-button:not([hidden]){display:inline-block}button[dir=rtl].sapMBtn.sapMBtnWithIcon .sapMBtnText{margin-right:var(--_ui5_button_base_icon_margin,.375rem);margin-left:0}button[dir=rtl].sapMBtn.sapMBtnIconEnd .sapWCIconInButton{margin-right:var(--_ui5_button_base_icon_margin,.375rem);margin-left:0}button.sapUiSizeCompact .sapWCIconInButton{font-size:1rem}button.sapUiSizeCompact.sapMBtn{padding:var(--_ui5_button_compact_padding,0 .4375rem);min-height:var(--_ui5_button_compact_height,1.625rem);min-width:var(--_ui5_button_base_min_compact_width,2rem)}ui5-button .sapMBtn:before{content:\"\";min-height:inherit;font-size:0}.sapMBtn{width:100%;height:100%;min-width:var(--_ui5_button_base_min_width,2.25rem);min-height:var(--_ui5_button_base_height,2.25rem);font-family:var(--sapUiFontFamily,var(--sapFontFamily,\"72\",\"72full\",Arial,Helvetica,sans-serif));font-size:var(--sapMFontMediumSize,.875rem);font-weight:400;box-sizing:border-box;padding:var(--_ui5_button_base_padding,0 .5625rem);border-radius:var(--_ui5_button_border_radius,.25rem);border-width:.0625rem;cursor:pointer;display:flex;justify-content:center;align-items:center;background-color:var(--sapUiButtonBackground,var(--sapButton_Background,var(--sapBaseColor,var(--sapPrimary3,#fff))));border:1px solid var(--sapUiButtonBorderColor,var(--sapButton_BorderColor,#0854a0));color:var(--sapUiButtonTextColor,var(--sapButton_TextColor,#0854a0));text-shadow:var(--sapUiShadowText,0 0 .125rem var(--sapUiContentContrastShadowColor,var(--sapContent_ContrastShadowColor,#fff)));outline:none;position:relative}.sapMBtn:not(.sapMBtnActive):hover{background:var(--sapUiButtonHoverBackground,var(--sapButton_Hover_Background,#ebf5fe))}.sapMBtn .sapWCIconInButton{font-size:var(--_ui5_button_base_icon_only_font_size,1rem);position:relative;color:inherit}.sapMBtn.sapMBtnIconEnd{flex-direction:row-reverse}.sapMBtn.sapMBtnIconEnd .sapWCIconInButton{margin-left:var(--_ui5_button_base_icon_margin,.375rem)}.sapMBtn.sapMBtnNoText{padding:var(--_ui5_button_base_icon_only_padding,0 .5625rem)}.sapMBtnText{outline:none;position:relative}.sapMBtn.sapMBtnWithIcon .sapMBtnText{margin-left:var(--_ui5_button_base_icon_margin,.375rem)}.sapMBtnDisabled{opacity:.5;pointer-events:none}.sapMBtn:focus:after{content:\"\";position:absolute;border:var(--_ui5_button_focus_after_border,1px dotted var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000)));top:var(--_ui5_button_focus_after_top,1px);bottom:var(--_ui5_button_focus_after_bottom,1px);left:var(--_ui5_button_focus_after_left,1px);right:var(--_ui5_button_focus_after_right,1px)}.sapMBtn::-moz-focus-inner{border:0}.sapMBtnActive{background-image:none;background-color:var(--sapUiButtonActiveBackground,var(--sapUiActive,var(--sapActiveColor,var(--sapHighlightColor,#0854a0))));border-color:var(--_ui5_button_active_border_color,var(--sapUiButtonActiveBorderColor,var(--sapUiButtonActiveBackground,var(--sapUiActive,var(--sapActiveColor,var(--sapHighlightColor,#0854a0))))));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtnActive:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMBtnPositive{background-color:var(--sapUiButtonAcceptBackground,var(--sapButton_Accept_Background,var(--sapButton_Background,var(--sapBaseColor,var(--sapPrimary3,#fff)))));border-color:var(--_ui5_button_positive_border_color,var(--sapUiButtonAcceptBorderColor,var(--sapUiPositiveElement,var(--sapPositiveElementColor,var(--sapPositiveColor,#107e3e)))));color:var(--sapUiButtonAcceptTextColor,#107e3e);text-shadow:var(--sapUiShadowText,0 0 .125rem var(--sapUiContentContrastShadowColor,var(--sapContent_ContrastShadowColor,#fff)))}.sapMBtn.sapMBtnPositive:hover{background-color:var(--sapUiButtonAcceptHoverBackground,var(--sapUiSuccessBG,var(--sapSuccessBackground,#f1fdf6)));border-color:var(--_ui5_button_positive_border_hover_color,var(--sapUiButtonAcceptHoverBorderColor,var(--sapUiButtonAcceptBorderColor,var(--sapUiPositiveElement,var(--sapPositiveElementColor,var(--sapPositiveColor,#107e3e))))))}.sapMBtn.sapMBtnPositive.sapMBtnActive{background-color:var(--sapUiButtonAcceptActiveBackground,#0d6733);border-color:var(--_ui5_button_positive_border_active_color,var(--sapUiButtonAcceptActiveBorderColor,var(--sapUiButtonAcceptActiveBackground,#0d6733)));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtn.sapMBtnPositive:focus{border-color:var(--_ui5_button_positive_focus_border_color,var(--sapUiButtonAcceptBorderColor,var(--sapUiPositiveElement,var(--sapPositiveElementColor,var(--sapPositiveColor,#107e3e)))))}.sapMBtn.sapMBtnPositive.sapMBtnActive:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMBtnPositive:focus:after{border-color:var(--_ui5_button_positive_border_focus_hover_color,var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000)))}.sapMBtn.sapMBtnNegative{background-color:var(--sapUiButtonRejectBackground,var(--sapButton_Reject_Background,var(--sapButton_Background,var(--sapBaseColor,var(--sapPrimary3,#fff)))));border-color:var(--sapUiButtonRejectBorderColor,var(--sapUiNegativeElement,var(--sapNegativeElementColor,var(--sapNegativeColor,#b00))));color:var(--sapUiButtonRejectTextColor,#b00);text-shadow:var(--sapUiShadowText,0 0 .125rem var(--sapUiContentContrastShadowColor,var(--sapContent_ContrastShadowColor,#fff)))}.sapMBtn.sapMBtnNegative:hover{background-color:var(--sapUiButtonRejectHoverBackground,var(--sapUiErrorBG,var(--sapErrorBackground,#ffebeb)));border-color:var(--sapUiButtonRejectHoverBorderColor,var(--sapUiButtonRejectBorderColor,var(--sapUiNegativeElement,var(--sapNegativeElementColor,var(--sapNegativeColor,#b00)))))}.sapMBtn.sapMBtnNegative:focus{border-color:var(--_ui5_button_negative_focus_border_color,var(--sapUiButtonRejectBorderColor,var(--sapUiNegativeElement,var(--sapNegativeElementColor,var(--sapNegativeColor,#b00)))))}.sapMBtn.sapMBtnNegative.sapMBtnActive{background-color:var(--sapUiButtonRejectActiveBackground,#a20000);border-color:var(--_ui5_button_negative_active_border_color,var(--sapUiButtonRejectActiveBorderColor,var(--sapUiButtonRejectActiveBackground,#a20000)));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtn.sapMBtnNegative.sapMBtnActive:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMBtnNegative:focus:after{border-color:var(--_ui5_button_positive_border_focus_hover_color,var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000)))}.sapMBtn.sapMBtnEmphasized{background-color:var(--sapUiButtonEmphasizedBackground,var(--sapButton_Emphasized_Background,var(--sapBrandColor,var(--sapPrimary2,#0a6ed1))));border-color:var(--sapUiButtonEmphasizedBorderColor,var(--sapButton_Emphasized_BorderColor,var(--sapButton_Emphasized_Background,var(--sapBrandColor,var(--sapPrimary2,#0a6ed1)))));color:var(--sapUiButtonEmphasizedTextColor,var(--sapButton_Emphasized_TextColor,#fff));text-shadow:0 0 .125rem var(--sapUiButtonEmphasizedTextShadow,transparent);font-weight:var(--_ui5_button_emphasized_font_weight,bold)}.sapMBtn.sapMBtnEmphasized:hover{background-color:var(--sapUiButtonEmphasizedHoverBackground,#085caf);border-color:var(--sapUiButtonEmphasizedHoverBorderColor,var(--sapUiButtonEmphasizedHoverBackground,#085caf))}.sapMBtn.sapMBtnEmphasized.sapMBtnActive{background-color:var(--sapUiButtonEmphasizedActiveBackground,#0854a0);border-color:var(--sapUiButtonEmphasizedActiveBorderColor,var(--sapUiButtonEmphasizedActiveBackground,#0854a0));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtn.sapMBtnEmphasized.sapMBtnActive:focus:after,.sapMBtn.sapMBtnEmphasized:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMBtnEmphasized:focus{border-color:var(--_ui5_button_emphasized_focused_border_color,var(--sapUiButtonEmphasizedBorderColor,var(--sapButton_Emphasized_BorderColor,var(--sapButton_Emphasized_Background,var(--sapBrandColor,var(--sapPrimary2,#0a6ed1))))))}.sapMBtn.sapMBtnTransparent{background-color:var(--sapUiButtonLiteBackground,transparent);border-color:var(--sapUiButtonLiteBorderColor,transparent);color:var(--sapUiButtonLiteTextColor,var(--sapUiButtonTextColor,var(--sapButton_TextColor,#0854a0)));text-shadow:var(--sapUiShadowText,0 0 .125rem var(--sapUiContentContrastShadowColor,var(--sapContent_ContrastShadowColor,#fff)));border-color:transparent}.sapMBtn.sapMBtnTransparent:hover{background-color:var(--sapUiButtonLiteHoverBackground,var(--sapUiButtonHoverBackground,var(--sapButton_Hover_Background,#ebf5fe)))}.sapMBtn.sapMBtnTransparent.sapMBtnActive{background-color:var(--sapUiButtonLiteActiveBackground,var(--sapUiButtonActiveBackground,var(--sapUiActive,var(--sapActiveColor,var(--sapHighlightColor,#0854a0)))));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtn.sapMBtnTransparent:hover:not(.sapMBtnActive){border-color:transparent}"
+export default ":host(ui5-button:not([hidden])){display:inline-block}ui5-button:not([hidden]){display:inline-block}:host([disabled]){pointer-events:none}ui5-button[disabled]{pointer-events:none}button[dir=rtl].sapMBtn.sapMBtnWithIcon .sapMBtnText{margin-right:var(--_ui5_button_base_icon_margin,.375rem);margin-left:0}button[dir=rtl].sapMBtn.sapMBtnIconEnd .sapWCIconInButton{margin-right:var(--_ui5_button_base_icon_margin,.375rem);margin-left:0}button.sapUiSizeCompact .sapWCIconInButton{font-size:1rem}button.sapUiSizeCompact.sapMBtn{padding:var(--_ui5_button_compact_padding,0 .4375rem);min-height:var(--_ui5_button_compact_height,1.625rem);min-width:var(--_ui5_button_base_min_compact_width,2rem)}ui5-button .sapMBtn:before{content:\"\";min-height:inherit;font-size:0}.sapMBtn{width:100%;height:100%;min-width:var(--_ui5_button_base_min_width,2.25rem);min-height:var(--_ui5_button_base_height,2.25rem);font-family:var(--sapUiFontFamily,var(--sapFontFamily,\"72\",\"72full\",Arial,Helvetica,sans-serif));font-size:var(--sapMFontMediumSize,.875rem);font-weight:400;box-sizing:border-box;padding:var(--_ui5_button_base_padding,0 .5625rem);border-radius:var(--_ui5_button_border_radius,.25rem);border-width:.0625rem;cursor:pointer;display:flex;justify-content:center;align-items:center;background-color:var(--sapUiButtonBackground,var(--sapButton_Background,var(--sapBaseColor,var(--sapPrimary3,#fff))));border:1px solid var(--sapUiButtonBorderColor,var(--sapButton_BorderColor,#0854a0));color:var(--sapUiButtonTextColor,var(--sapButton_TextColor,#0854a0));text-shadow:var(--sapUiShadowText,0 0 .125rem var(--sapUiContentContrastShadowColor,var(--sapContent_ContrastShadowColor,#fff)));outline:none;position:relative}.sapMBtn:not(.sapMBtnActive):hover{background:var(--sapUiButtonHoverBackground,var(--sapButton_Hover_Background,#ebf5fe))}.sapMBtn .sapWCIconInButton{font-size:var(--_ui5_button_base_icon_only_font_size,1rem);position:relative;color:inherit}.sapMBtn.sapMBtnIconEnd{flex-direction:row-reverse}.sapMBtn.sapMBtnIconEnd .sapWCIconInButton{margin-left:var(--_ui5_button_base_icon_margin,.375rem)}.sapMBtn.sapMBtnNoText{padding:var(--_ui5_button_base_icon_only_padding,0 .5625rem)}.sapMBtnText{outline:none;position:relative}.sapMBtn.sapMBtnWithIcon .sapMBtnText{margin-left:var(--_ui5_button_base_icon_margin,.375rem)}.sapMBtnDisabled{opacity:.5;pointer-events:none}.sapMBtn:focus:after{content:\"\";position:absolute;border:var(--_ui5_button_focus_after_border,1px dotted var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000)));top:var(--_ui5_button_focus_after_top,1px);bottom:var(--_ui5_button_focus_after_bottom,1px);left:var(--_ui5_button_focus_after_left,1px);right:var(--_ui5_button_focus_after_right,1px)}.sapMBtn::-moz-focus-inner{border:0}.sapMBtnActive{background-image:none;background-color:var(--sapUiButtonActiveBackground,var(--sapUiActive,var(--sapActiveColor,var(--sapHighlightColor,#0854a0))));border-color:var(--_ui5_button_active_border_color,var(--sapUiButtonActiveBorderColor,var(--sapUiButtonActiveBackground,var(--sapUiActive,var(--sapActiveColor,var(--sapHighlightColor,#0854a0))))));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtnActive:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMBtnPositive{background-color:var(--sapUiButtonAcceptBackground,var(--sapButton_Accept_Background,var(--sapButton_Background,var(--sapBaseColor,var(--sapPrimary3,#fff)))));border-color:var(--_ui5_button_positive_border_color,var(--sapUiButtonAcceptBorderColor,var(--sapUiPositiveElement,var(--sapPositiveElementColor,var(--sapPositiveColor,#107e3e)))));color:var(--sapUiButtonAcceptTextColor,#107e3e);text-shadow:var(--sapUiShadowText,0 0 .125rem var(--sapUiContentContrastShadowColor,var(--sapContent_ContrastShadowColor,#fff)))}.sapMBtn.sapMBtnPositive:hover{background-color:var(--sapUiButtonAcceptHoverBackground,var(--sapUiSuccessBG,var(--sapSuccessBackground,#f1fdf6)));border-color:var(--_ui5_button_positive_border_hover_color,var(--sapUiButtonAcceptHoverBorderColor,var(--sapUiButtonAcceptBorderColor,var(--sapUiPositiveElement,var(--sapPositiveElementColor,var(--sapPositiveColor,#107e3e))))))}.sapMBtn.sapMBtnPositive.sapMBtnActive{background-color:var(--sapUiButtonAcceptActiveBackground,#0d6733);border-color:var(--_ui5_button_positive_border_active_color,var(--sapUiButtonAcceptActiveBorderColor,var(--sapUiButtonAcceptActiveBackground,#0d6733)));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtn.sapMBtnPositive:focus{border-color:var(--_ui5_button_positive_focus_border_color,var(--sapUiButtonAcceptBorderColor,var(--sapUiPositiveElement,var(--sapPositiveElementColor,var(--sapPositiveColor,#107e3e)))))}.sapMBtn.sapMBtnPositive.sapMBtnActive:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMBtnPositive:focus:after{border-color:var(--_ui5_button_positive_border_focus_hover_color,var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000)))}.sapMBtn.sapMBtnNegative{background-color:var(--sapUiButtonRejectBackground,var(--sapButton_Reject_Background,var(--sapButton_Background,var(--sapBaseColor,var(--sapPrimary3,#fff)))));border-color:var(--sapUiButtonRejectBorderColor,var(--sapUiNegativeElement,var(--sapNegativeElementColor,var(--sapNegativeColor,#b00))));color:var(--sapUiButtonRejectTextColor,#b00);text-shadow:var(--sapUiShadowText,0 0 .125rem var(--sapUiContentContrastShadowColor,var(--sapContent_ContrastShadowColor,#fff)))}.sapMBtn.sapMBtnNegative:hover{background-color:var(--sapUiButtonRejectHoverBackground,var(--sapUiErrorBG,var(--sapErrorBackground,#ffebeb)));border-color:var(--sapUiButtonRejectHoverBorderColor,var(--sapUiButtonRejectBorderColor,var(--sapUiNegativeElement,var(--sapNegativeElementColor,var(--sapNegativeColor,#b00)))))}.sapMBtn.sapMBtnNegative:focus{border-color:var(--_ui5_button_negative_focus_border_color,var(--sapUiButtonRejectBorderColor,var(--sapUiNegativeElement,var(--sapNegativeElementColor,var(--sapNegativeColor,#b00)))))}.sapMBtn.sapMBtnNegative.sapMBtnActive{background-color:var(--sapUiButtonRejectActiveBackground,#a20000);border-color:var(--_ui5_button_negative_active_border_color,var(--sapUiButtonRejectActiveBorderColor,var(--sapUiButtonRejectActiveBackground,#a20000)));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtn.sapMBtnNegative.sapMBtnActive:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMBtnNegative:focus:after{border-color:var(--_ui5_button_positive_border_focus_hover_color,var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000)))}.sapMBtn.sapMBtnEmphasized{background-color:var(--sapUiButtonEmphasizedBackground,var(--sapButton_Emphasized_Background,var(--sapBrandColor,var(--sapPrimary2,#0a6ed1))));border-color:var(--sapUiButtonEmphasizedBorderColor,var(--sapButton_Emphasized_BorderColor,var(--sapButton_Emphasized_Background,var(--sapBrandColor,var(--sapPrimary2,#0a6ed1)))));color:var(--sapUiButtonEmphasizedTextColor,var(--sapButton_Emphasized_TextColor,#fff));text-shadow:0 0 .125rem var(--sapUiButtonEmphasizedTextShadow,transparent);font-weight:var(--_ui5_button_emphasized_font_weight,bold)}.sapMBtn.sapMBtnEmphasized:hover{background-color:var(--sapUiButtonEmphasizedHoverBackground,#085caf);border-color:var(--sapUiButtonEmphasizedHoverBorderColor,var(--sapUiButtonEmphasizedHoverBackground,#085caf))}.sapMBtn.sapMBtnEmphasized.sapMBtnActive{background-color:var(--sapUiButtonEmphasizedActiveBackground,#0854a0);border-color:var(--sapUiButtonEmphasizedActiveBorderColor,var(--sapUiButtonEmphasizedActiveBackground,#0854a0));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtn.sapMBtnEmphasized.sapMBtnActive:focus:after,.sapMBtn.sapMBtnEmphasized:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMBtnEmphasized:focus{border-color:var(--_ui5_button_emphasized_focused_border_color,var(--sapUiButtonEmphasizedBorderColor,var(--sapButton_Emphasized_BorderColor,var(--sapButton_Emphasized_Background,var(--sapBrandColor,var(--sapPrimary2,#0a6ed1))))))}.sapMBtn.sapMBtnTransparent{background-color:var(--sapUiButtonLiteBackground,transparent);border-color:var(--sapUiButtonLiteBorderColor,transparent);color:var(--sapUiButtonLiteTextColor,var(--sapUiButtonTextColor,var(--sapButton_TextColor,#0854a0)));text-shadow:var(--sapUiShadowText,0 0 .125rem var(--sapUiContentContrastShadowColor,var(--sapContent_ContrastShadowColor,#fff)));border-color:transparent}.sapMBtn.sapMBtnTransparent:hover{background-color:var(--sapUiButtonLiteHoverBackground,var(--sapUiButtonHoverBackground,var(--sapButton_Hover_Background,#ebf5fe)))}.sapMBtn.sapMBtnTransparent.sapMBtnActive{background-color:var(--sapUiButtonLiteActiveBackground,var(--sapUiButtonActiveBackground,var(--sapUiActive,var(--sapActiveColor,var(--sapHighlightColor,#0854a0)))));color:var(--sapUiButtonActiveTextColor,#fff);text-shadow:none}.sapMBtn.sapMBtnTransparent:hover:not(.sapMBtnActive){border-color:transparent}"

dist/themes/Link.css.js

@@ -1,1 +0,1 @@
-export default ":host(ui5-link:not([hidden])){display:inline-flex;max-width:100%}ui5-link{display:inline-block;max-width:100%}.sapMLnk{color:var(--sapUiLink,var(--sapLinkColor,var(--sapPrimary2,#0a6ed1)));text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-wrap:normal;font-family:var(--sapUiFontFamily,var(--sapFontFamily,\"72\",\"72full\",Arial,Helvetica,sans-serif));font-size:var(--sapMFontMediumSize,.875rem);cursor:pointer;display:inline-block;justify-content:center;align-items:center;position:relative;outline:none}.sapMLnk.sapMLnkSubtle:not(.sapMLnkDsbl):hover,.sapMLnk:not(.sapMLnkDsbl):hover{text-decoration:underline;color:var(--sapUiLinkHover,#0854a0)}.sapMLnk:visited{color:var(--sapUiLinkVisited,var(--sapUiLink,var(--sapLinkColor,var(--sapPrimary2,#0a6ed1))))}.sapMLnk.sapMLnkDsbl{text-shadow:none;outline:none;cursor:default;pointer-events:none;opacity:var(--_ui5_link_opacity,.4)}.sapMLnk.sapMLnkEmphasized{font-weight:700}.sapMLnk.sapMLnkSubtle,.sapMLnk.sapMLnkSubtle:visited{color:var(--_ui5_link_subtle_color,var(--sapUiLinkDarken15,#074888))}.sapMLnk.sapMLnkSubtle:focus{color:var(--sapUiLink,var(--sapLinkColor,var(--sapPrimary2,#0a6ed1)))}.sapMLnk.sapMLnkWrapping{white-space:normal;word-wrap:break-word}.sapMLnk:focus{text-decoration:underline}.sapMLnk:focus:after{content:\"\";width:var(--_ui5_link_outline_element_size,calc(100% - .125rem));height:var(--_ui5_link_outline_element_size,calc(100% - .125rem));position:absolute;left:0;border:1px dotted var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000));top:0;outline:none}"
+export default ":host(ui5-link:not([hidden])){display:inline-flex;max-width:100%}:host([disabled]){pointer-events:none}ui5-link[disabled]{pointer-events:none}ui5-link{display:inline-block;max-width:100%}.sapMLnk{color:var(--sapUiLink,var(--sapLinkColor,var(--sapPrimary2,#0a6ed1)));text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-wrap:normal;font-family:var(--sapUiFontFamily,var(--sapFontFamily,\"72\",\"72full\",Arial,Helvetica,sans-serif));font-size:var(--sapMFontMediumSize,.875rem);cursor:pointer;display:inline-block;justify-content:center;align-items:center;position:relative;outline:none}.sapMLnk.sapMLnkSubtle:not(.sapMLnkDsbl):hover,.sapMLnk:not(.sapMLnkDsbl):hover{text-decoration:underline;color:var(--sapUiLinkHover,#0854a0)}.sapMLnk:visited{color:var(--sapUiLinkVisited,var(--sapUiLink,var(--sapLinkColor,var(--sapPrimary2,#0a6ed1))))}.sapMLnk.sapMLnkDsbl{text-shadow:none;outline:none;cursor:default;pointer-events:none;opacity:var(--_ui5_link_opacity,.4)}.sapMLnk.sapMLnkEmphasized{font-weight:700}.sapMLnk.sapMLnkSubtle,.sapMLnk.sapMLnkSubtle:visited{color:var(--_ui5_link_subtle_color,var(--sapUiLinkDarken15,#074888))}.sapMLnk.sapMLnkSubtle:focus{color:var(--sapUiLink,var(--sapLinkColor,var(--sapPrimary2,#0a6ed1)))}.sapMLnk.sapMLnkWrapping{white-space:normal;word-wrap:break-word}.sapMLnk:focus{text-decoration:underline}.sapMLnk:focus:after{content:\"\";width:var(--_ui5_link_outline_element_size,calc(100% - .125rem));height:var(--_ui5_link_outline_element_size,calc(100% - .125rem));position:absolute;left:0;border:1px dotted var(--sapUiContentFocusColor,var(--sapContent_FocusColor,#000));top:0;outline:none}"

dist/themes/sap_belize_hcb/derived-colors.js

@@ -1,4 +0,120 @@
-const themeDerivationsFactory = require("./global-derived-colors");
-const componentDerivationsFactory = require("../base/component-derived-colors");
+const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desaturate, mix, spin, concat }) => {
+	const derivations = {
+		"--sapHighlightTextColor": () => contrast("--sapHighlightColor", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapTile_TitleTextColor": () => contrast("--sapTile_Background", "--sapTile_TextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapTile_TextColor": () => contrast("--sapTile_Background", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapTile_IconColor": () => contrast("--sapTile_Background", "--sapContent_IconColor", "--sapContent_ContrastIconColor", "--sapContent_ContrastTextThreshold"),
+		"--sapPageHeader_TextColor": () => contrast("--sapPageHeader_Background", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapPageFooter_TextColor": () => contrast("--sapPageFooter_Background", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapList_HeaderTextColor": () => contrast("--sapList_HeaderBackground", "--sapTitleColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapGroup_TitleTextColor": () => contrast("--sapBackgroundColor", "--sapTitleColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapButton_Hover_TextColor": () => contrast("--sapButton_Hover_Background", "--sapButton_TextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapButton_TextColor": () => contrast("--sapButton_Background", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapButton_Emphasized_TextColor": () => contrast("--sapButton_Emphasized_Background", "--sapButton_TextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapContent_ForegroundTextColor": () => contrast("--sapContent_ForegroundColor", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
 
-module.exports = [themeDerivationsFactory, componentDerivationsFactory];
+		"--sapUiContentContrastShadowColorFade50": () => fade("--sapUiContentContrastShadowColor", 50),
+		"--sapUiContentContrastShadowColorFade60": () => fade("--sapUiContentContrastShadowColor", 60),
+		"--sapUiContentContrastShadowColorFade80": () => fade("--sapUiContentContrastShadowColor", 80),
+
+		"--sapUiShadowLevel1": () => concat({
+			static: "0 0 1rem 0",
+			var: "--sapUiContentContrastShadowColorFade50"
+		}, {
+			static: "0 0 0 2px",
+			var: "--sapUiContentShadowColor"
+		}),
+		"--sapUiShadowLevel2": () => concat({
+			static: "0 0.25rem 2rem 0",
+			var: "--sapUiContentContrastShadowColorFade60"
+		}, {
+			static: "0 0 0 2px",
+			var: "--sapUiContentShadowColor"
+		}),
+		"--sapUiShadowLevel3": () => concat({
+			static: "0 0.625rem 4rem 0",
+			var: "--sapUiContentContrastShadowColorFade80"
+		}, {
+			static: "0 0 0 2px",
+			var: "--sapUiContentShadowColor"
+		}),
+
+		"--sapUiListTableGroupHeaderBorderColor": () => lighten("--sapUiListBorderColor", 40),
+		"--sapUiListTableGroupHeaderTextColor": () => contrast("--sapUiListTableGroupHeaderBackground", "--sapUiListTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiListTableFooterBorder": () => lighten("--sapUiListBorderColor", 40),
+		"--sapUiListTableFixedBorder": () => lighten("--sapUiListBorderColor", 40),
+		"--sapUiListVerticalBorderColor": () => lighten("--sapUiListBorderColor", 40),
+		"--sapUiListActiveTextColor": () => contrast("--sapUiListActiveBackground", "--sapUiListTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonIconColor": () => contrast("--sapUiSegmentedButtonBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonActiveIconColor": () => contrast("--sapUiSegmentedButtonActiveBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonSelectedIconColor": () => contrast("--sapUiSegmentedButtonSelectedBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonTextColor": () => contrast("--sapUiSegmentedButtonBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonActiveTextColor": () => contrast("--sapUiSegmentedButtonActiveBackground", "--sapUiSegmentedButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiToggleButtonPressedTextColor": () => contrast("--sapUiToggleButtonPressedBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonFooterTextColor": () => contrast("--sapUiPageFooterBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonLiteTextColor": () => contrast("--sapUiButtonLiteBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonRejectTextColor": () => contrast("--sapUiButtonRejectBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonAcceptTextColor": () => contrast("--sapUiButtonAcceptBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonActiveTextColor": () => contrast("--sapUiButtonActiveBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonIconColor": () => contrast("--sapUiButtonBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+	};
+
+	return derivations;
+};
+
+var globalDerivedColors = derivationsFactory;
+
+const derivationsFactory$1 = ({ darken, lighten, contrast, fade, saturate, desaturate, mix, spin, concat }) => {
+	const derivations = {
+		"--sapUiFieldWarningColorDarken100": () => darken("--sapUiFieldWarningColor", 100), // #000000;
+		"--sapUiListBackgroundDarken3": () => darken("--sapUiListBackground", 3), // #f7f7f7;
+		"--sapUiListBackgroundDarken10": () => darken("--sapUiListBackground", 10), // #e6e6e6;
+		"--sapUiListBackgroundDarken13": () => darken("--sapUiListBackground", 13), // #dedede;
+		"--sapUiListBackgroundDarken15": () => darken("--sapUiListBackground", 15), // #d9d9d9;
+		"--sapUiListBackgroundDarken20": () => darken("--sapUiListBackground", 20), // #cccccc;
+		"--sapUiTileBackgroundDarken20": () => darken("--sapUiTileBackground", 20), // #000000;
+		"--sapUiListBorderColorLighten10": () => lighten("--sapUiListBorderColor", 10), // #ffffff;
+		"--sapUiActiveLighten3": () => lighten("--sapUiActive", 3), // #085caf;
+		"--sapUiLinkDarken15": () => darken("--sapUiLink", 15), // #004065;
+		"--sapUiSelectedDarken10": () => darken("--sapUiSelected", 10), // #346187;
+		"--sapUiShellBorderColorLighten30": () => lighten("--sapUiShellBorderColor", 30), // rgba(77, 77, 77, 0);
+		"--sapUiToggleButtonPressedBackgroundLighten50Desaturate47": () => lighten(desaturate("--sapUiToggleButtonPressedBackground", 47), 50), // #dddddd;
+		"--sapUiToggleButtonPressedBorderColorLighten19Desaturate46": () => lighten(desaturate("--sapUiToggleButtonPressedBorderColor", 46), 19), // #818181;
+		"--sapUiSuccessBGLighten5": () => lighten("--sapUiSuccessBG", 5), // #f6fcf6;
+		"--sapUiErrorBGLighten4": () => lighten("--sapUiErrorBG", 4), // #fff8f8;
+		"--sapUiButtonBackgroundDarken7": () => darken("--sapUiButtonBackground", 7), // #e5e5e5;
+		"--sapUiButtonBackgroundDarken2": () => darken("--sapUiButtonBackground", 2), // #f2f2f2;
+		"--sapUiButtonHoverBackgroundDarken2": () => darken("--sapUiButtonHoverBackground", 2), // #e5e5e5;
+		"--sapUiButtonHoverBackgroundDarken5": () => darken("--sapUiButtonHoverBackground", 5),
+		"--sapUiButtonRejectActiveBackgroundDarken5": () => darken("--sapUiButtonRejectActiveBackground", 5), // #a20000;
+		"--sapUiButtonAcceptActiveBackgroundDarken5": () => darken("--sapUiButtonAcceptActiveBackground", 5), // #246924;
+		"--sapUiContentForegroundColorLighten5": () => lighten("--sapUiContentForegroundColor", 5), // #f2f2f2;
+		"--sapUiContentForegroundColorLighten7": () => lighten("--sapUiContentForegroundColor", 7), // #f7f7f7;
+		"--sapUiContentForegroundColorDarken3": () => darken("--sapUiContentForegroundColor", 3), // #dedede;
+		"--sapUiContentForegroundColorDarken5": () => darken("--sapUiContentForegroundColor", 5), // #d9d9d9;
+		"--sapUiContentForegroundColorDarken10": () => darken("--sapUiContentForegroundColor", 10), // #cccccc;
+		"--sapUiButtonRejectActiveBackgroundLighten5": () => lighten("--sapUiButtonRejectActiveBackground", 5),
+		"--sapUiButtonAcceptActiveBackgroundLighten5": () => lighten("--sapUiButtonAcceptActiveBackground", 5),
+		"--sapUiButtonBackgroundDarken10": () => darken("--sapUiButtonBackground", 10),
+		"--sapBackgroundColorFade72": () => fade("--sapBackgroundColor", 72),
+		"--sapUiAccent1Lighten50": () => lighten("--sapUiAccent1", 50),
+		"--sapUiAccent2Lighten40": () => lighten("--sapUiAccent2", 40),
+		"--sapUiAccent3Lighten46": () => lighten("--sapUiAccent3", 46),
+		"--sapUiAccent4Lighten46": () => lighten("--sapUiAccent4", 46),
+		"--sapUiAccent5Lighten32": () => lighten("--sapUiAccent5", 32),
+		"--sapUiAccent6Lighten52": () => lighten("--sapUiAccent6", 52),
+		"--sapUiAccent7Lighten64": () => lighten("--sapUiAccent7", 64),
+		"--sapUiAccent8Lighten61": () => lighten("--sapUiAccent8", 61),
+		"--sapUiAccent9Lighten37": () => lighten("--sapUiAccent9", 37),
+		"--sapUiAccent10Lighten49": () => lighten("--sapUiAccent10", 49),
+	};
+
+	return derivations;
+};
+
+var componentDerivedColors = derivationsFactory$1;
+
+var derivedColors = [globalDerivedColors, componentDerivedColors];
+
+export default derivedColors;
+//# sourceMappingURL=derived-colors.js.map

dist/themes/sap_belize/derived-colors.js

@@ -1,4 +0,172 @@
-const themeDerivationsFactory = require("./global-derived-colors");
-const componentDerivationsFactory = require("../base/component-derived-colors");
+const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desaturate, mix, spin, concat }) => {
+	const derivations = {
+		"--sapErrorBackground": () => lighten("--sapNegativeColor", 58),
+		"--sapWarningBackground": () => lighten("--sapCriticalColor", 46),
+		"--sapSuccessBackground": () => lighten("--sapPositiveColor", 60),
+		"--sapInformationBackground": () => lighten("--sapInformativeColor", 48),
+		"--sapNeutralBackground": () => lighten("--sapNeutralColor", 56),
+		"--sapErrorColor": () => lighten("--sapNegativeColor", 10),
+		"--sapWarningColor": () => lighten("--sapCriticalColor", 10),
+		"--sapSuccessColor": () => lighten("--sapPositiveColor", 10),
+		"--sapContent_ImagePlaceholderForegroundColor": () => lighten("--sapBaseColor", 5),
+		"--sapContent_LabelColor": () => lighten("--sapTextColor", 20),
+		"--sapContent_ForegroundColor": () => lighten("--sapPrimary6", 15),
+		"--sapContent_ForegroundTextColor": () => contrast("--sapContent_ForegroundColor", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapContent_DisabledTextColor": () => fade("--sapTextColor", (100 - ("--sapContent_DisabledOpacity" * 100))),
+		"--sapButton_Emphasized_Background": () => lighten(saturate("--sapHighlightColor", 10), 10),
+		"--sapButton_Emphasized_BorderColor": () => darken("--sapButton_Emphasized_Background", 5),
+		"--sapButton_Emphasized_TextColor": () => contrast("--sapButton_Emphasized_Background", darken("--sapPrimary1", 8), "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapButton_Hover_TextColor": () => contrast("--sapButton_Hover_Background", darken("--sapHighlightColor", 10), "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapButton_Background": () => darken("--sapPrimary4", 3),
+		"--sapButton_BorderColor": () => darken("--sapButton_Background", 30),
+		"--sapButton_TextColor": () => contrast("--sapButton_Background", darken("--sapHighlightColor", 10), "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapField_ReadOnly_BorderColor": () => lighten("--sapField_BorderColor", 5),
+		"--sapGroup_TitleBorderColor": () => lighten("--sapPrimary6", 5),
+		"--sapGroup_TitleTextColor": () => contrast("--sapBackgroundColor", "--sapTitleColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapGroup_ContentBackground": () => lighten("--sapBackgroundColor", 2),
+		"--sapGroup_ContentBorderColor": () => darken("--sapGroup_ContentBackground", 8),
 
-module.exports = [themeDerivationsFactory, componentDerivationsFactory];
+		"--sapShell_TextColor": () => darken("--sapBrandColor", 10),
+		"--sapShell_Background": () => darken(desaturate("--sapBaseColor", 6), 11),
+		"--sapShell_BackgroundPatternColor": () => fade("--sapPrimary4", 8),
+		"--sapList_SelectionBackgroundColor": () => lighten(desaturate("--sapSelectedColor", 2), 47),
+		"--sapList_Hover_Background": () => contrast("--sapList_Background", darken("--sapList_Background", 6), lighten("--sapList_Background", 6)),
+		"--sapScrollBar_FaceColor": () => darken("--sapPrimary6", 5),
+		"--sapScrollBar_TrackColor": () => lighten("--sapScrollBar_FaceColor", 30),
+		"--sapScrollBar_Hover_FaceColor": () => darken("--sapScrollBar_FaceColor", 3),
+		"--sapPageHeader_BorderColor": () => darken("--sapPageHeader_Background", 8),
+		"--sapPageHeader_TextColor": () => contrast("--sapPageHeader_Background", lighten("--sapTextColor", 20), "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapTile_TitleTextColor": () => contrast("--sapTile_Background", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapTile_TextColor": () => contrast("--sapTile_Background", lighten("--sapTile_TitleTextColor", 20), "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapTile_IconColor": () => contrast("--sapTile_Background", lighten("--sapContent_IconColor", 34), "--sapContent_ContrastIconColor", "--sapContent_ContrastTextThreshold"),
+		"--sapContent_NonInteractiveIconColor": () => darken("--sapPrimary6", 22),
+		"--sapContent_IconColor": () => darken("--sapHighlightColor", 10),
+		"--sapContent_MarkerTextColor": () => darken("--sapAccentColor7", 8),
+		"--sapContent_ImagePlaceholderBackground": () => darken("--sapBaseColor", 9),
+		"--sapButton_Hover_Background": () => darken("--sapButton_Background", 5),
+		"--sapField_ReadOnly_Background": () => fade(darken("--sapField_Background", 5), 50),
+		"--sapList_BorderColor": () => darken("--sapList_Background", 10.15),
+		"--sapList_HeaderBackground": () => darken("--sapPrimary4", 3),
+		"--sapList_HeaderTextColor": () => contrast("--sapList_HeaderBackground", "--sapTitleColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+
+		"--sapPageFooter_TextColor": () => contrast("--sapPageFooter_Background", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapInfobar_Background": () => darken("--sapAccentColor7", 5),
+		"--sapToolbar_SeparatorColor": () => fade("--sapPrimary1", 20),
+		"--sapHighlightTextColor": () => contrast("--sapHighlightColor", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+
+		"--sapUiShellHoverBackground": () => darken("--sapUiBrand", 10),
+		"--sapUiShellActiveBackground": () => darken("--sapUiBrand", 17),
+		"--sapUiShellActiveTextColor": () => lighten("--sapUiBrand", 55),
+		"--sapUiShellHoverToggleBackground": () => darken("--sapUiBrand", 32),
+		"--sapUiShellContainerBackground": () => lighten("--sapUiShellBackground", 16),
+		"--sapUiShellAltContainerBackground": () => darken(saturate("--sapUiShellBackground", 6), 28),
+		"--sapUiShellGroupTextColor": () => darken(desaturate("--sapUiShellTextColor", 100), 16.5),
+		"--sapUiLinkInverted": () => lighten("--sapUiLink", 40),
+		"--sapUiNotificationBarBG": () => fade("--sapUiPrimary7", 98),
+		"--sapUiNotifierSeparator": () => darken("--sapUiPrimary7", 20),
+		"--sapUiNotificationBarBorder": () => lighten("--sapUiPrimary7", 20),
+		"--sapUiButtonIconColor": () => contrast("--sapUiButtonBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonActiveTextColor": () => contrast("--sapUiButtonActiveBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonEmphasizedHoverBackground": () => darken("--sapUiButtonEmphasizedBackground", 5),
+		"--sapUiButtonEmphasizedHoverBorderColor": () => darken("--sapUiButtonEmphasizedBackground", 5),
+		"--sapUiButtonEmphasizedTextShadow": () => contrast("--sapUiButtonEmphasizedTextColor", "--sapUiContentShadowColor", "--sapUiContentContrastShadowColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonAcceptTextColor": () => contrast("--sapUiButtonAcceptBackground", "--sapUiPositiveText", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonRejectTextColor": () => contrast("--sapUiButtonRejectBackground", "--sapUiNegativeText", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonLiteHoverBackground": () => fade(darken("--sapUiButtonHoverBackground", 22), 50),
+		"--sapUiButtonFooterTextColor": () => contrast("--sapUiPageFooterBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiToggleButtonPressedBackground": () => darken("--sapUiSelected", 10),
+		"--sapUiToggleButtonPressedBorderColor": () => darken("--sapUiToggleButtonPressedBackground", 5),
+		"--sapUiSegmentedButtonBackground": () => lighten("--sapUiButtonBackground", 3),
+		"--sapUiSegmentedButtonBorderColor": () => lighten("--sapUiButtonBorderColor", 8),
+		"--sapUiToggleButtonPressedHoverBackground": () => lighten("--sapUiToggleButtonPressedBackground", 10),
+		"--sapUiToggleButtonPressedTextColor": () => contrast("--sapUiToggleButtonPressedBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonTextColor": () => contrast("--sapUiSegmentedButtonBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonIconColor": () => contrast("--sapUiSegmentedButtonBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonActiveIconColor": () => contrast("--sapUiSegmentedButtonActiveBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonSelectedIconColor": () => contrast("--sapUiSegmentedButtonSelectedBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonFooterBorderColor": () => lighten("--sapUiButtonBorderColor", 8),
+		"--sapButton_Background": () => darken("--sapPrimary4", 3),
+		"--sapButton_BorderColor": () => darken("--sapButton_Background", 30),
+		"--sapUiFieldPlaceholderTextColor": () => lighten("--sapUiFieldTextColor", 46),
+		"--sapUiListActiveTextColor": () => contrast("--sapUiListActiveBackground", "--sapUiListTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiListSelectionHoverBackground": () => contrast("--sapUiListSelectionBackgroundColor", darken("--sapUiListSelectionBackgroundColor", 3), lighten("--sapUiListSelectionBackgroundColor", 3)),
+		"--sapUiListFooterBackground": () => darken("--sapUiBaseColor", 9),
+		"--sapUiListVerticalBorderColor": () => darken("--sapUiListBorderColor", 3),
+		"--sapUiListTableGroupHeaderBackground": () => darken("--sapUiListBackground", 5),
+		"--sapUiListTableGroupHeaderBorderColor": () => darken("--sapUiListBorderColor", 10),
+		"--sapUiListTableGroupHeaderTextColor": () => contrast("--sapUiListTableGroupHeaderBackground", "--sapUiContentMarkerTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiListTableFooterBorder": () => darken("--sapUiListBorderColor", 10),
+		"--sapUiListTableFixedBorder": () => darken("--sapUiListBorderColor", 30),
+		"--sapUiPageFooterBorderColor": () => contrast("--sapUiPageFooterBackground", darken("--sapUiPageFooterBackground", 8), lighten("--sapUiPageFooterBackground", 12)),
+		"--sapUiInfobarHoverBackground": () => darken("--sapUiInfobarBackground", 3),
+		"--sapUiObjectHeaderBorderColor": () => darken("--sapUiObjectHeaderBackground", 8),
+		"--sapUiDragAndDropActiveBackground": () => fade("--sapUiLink", 5),
+		"--sapUiSegmentedButtonActiveTextColor": () => contrast("--sapUiSegmentedButtonActiveBackground", "--sapUiSegmentedButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiContentShadowColorFade15": () => fade("--sapUiContentShadowColor", 15),
+		"--sapUiShadowText": () => concat({static: "0 0 0.125rem", var: "--sapUiContentContrastShadowColor"}),
+		"--sapUiShadowHeader": () => concat({static: "0 0.125rem 0 0", var: "--sapUiObjectHeaderBackground"}, {static: "inset 0 -0.125rem 0 0", var: "--sapUiObjectHeaderBorderColor"}),
+		"--sapUiShadowLevel0": () => concat({static: "0 0 0 1px", var: "--sapUiContentShadowColorFade15"}),
+		"--sapUiShadowLevel1": () => concat({static: "0 0.125rem 0.5rem 0", var: "--sapUiContentShadowColorFade15"}, {static: "", var: "--sapUiShadowLevel0"}),
+		"--sapUiShadowLevel2": () => concat({static: "0 0.625rem 1.875rem 0", var: "--sapUiContentShadowColorFade15"},{static: "", var: "--sapUiShadowLevel0"}),
+		"--sapUiShadowLevel3": () => concat({static: "0 1.25rem 5rem 0", var: "--sapUiContentShadowColorFade15"}, {static: "", var: "--sapUiShadowLevel0"}),
+	};
+
+	return derivations;
+};
+
+var globalDerivedColors = derivationsFactory;
+
+const derivationsFactory$1 = ({ darken, lighten, contrast, fade, saturate, desaturate, mix, spin, concat }) => {
+	const derivations = {
+		"--sapUiFieldWarningColorDarken100": () => darken("--sapUiFieldWarningColor", 100), // #000000;
+		"--sapUiListBackgroundDarken3": () => darken("--sapUiListBackground", 3), // #f7f7f7;
+		"--sapUiListBackgroundDarken10": () => darken("--sapUiListBackground", 10), // #e6e6e6;
+		"--sapUiListBackgroundDarken13": () => darken("--sapUiListBackground", 13), // #dedede;
+		"--sapUiListBackgroundDarken15": () => darken("--sapUiListBackground", 15), // #d9d9d9;
+		"--sapUiListBackgroundDarken20": () => darken("--sapUiListBackground", 20), // #cccccc;
+		"--sapUiTileBackgroundDarken20": () => darken("--sapUiTileBackground", 20), // #000000;
+		"--sapUiListBorderColorLighten10": () => lighten("--sapUiListBorderColor", 10), // #ffffff;
+		"--sapUiActiveLighten3": () => lighten("--sapUiActive", 3), // #085caf;
+		"--sapUiLinkDarken15": () => darken("--sapUiLink", 15), // #004065;
+		"--sapUiSelectedDarken10": () => darken("--sapUiSelected", 10), // #346187;
+		"--sapUiShellBorderColorLighten30": () => lighten("--sapUiShellBorderColor", 30), // rgba(77, 77, 77, 0);
+		"--sapUiToggleButtonPressedBackgroundLighten50Desaturate47": () => lighten(desaturate("--sapUiToggleButtonPressedBackground", 47), 50), // #dddddd;
+		"--sapUiToggleButtonPressedBorderColorLighten19Desaturate46": () => lighten(desaturate("--sapUiToggleButtonPressedBorderColor", 46), 19), // #818181;
+		"--sapUiSuccessBGLighten5": () => lighten("--sapUiSuccessBG", 5), // #f6fcf6;
+		"--sapUiErrorBGLighten4": () => lighten("--sapUiErrorBG", 4), // #fff8f8;
+		"--sapUiButtonBackgroundDarken7": () => darken("--sapUiButtonBackground", 7), // #e5e5e5;
+		"--sapUiButtonBackgroundDarken2": () => darken("--sapUiButtonBackground", 2), // #f2f2f2;
+		"--sapUiButtonHoverBackgroundDarken2": () => darken("--sapUiButtonHoverBackground", 2), // #e5e5e5;
+		"--sapUiButtonHoverBackgroundDarken5": () => darken("--sapUiButtonHoverBackground", 5),
+		"--sapUiButtonRejectActiveBackgroundDarken5": () => darken("--sapUiButtonRejectActiveBackground", 5), // #a20000;
+		"--sapUiButtonAcceptActiveBackgroundDarken5": () => darken("--sapUiButtonAcceptActiveBackground", 5), // #246924;
+		"--sapUiContentForegroundColorLighten5": () => lighten("--sapUiContentForegroundColor", 5), // #f2f2f2;
+		"--sapUiContentForegroundColorLighten7": () => lighten("--sapUiContentForegroundColor", 7), // #f7f7f7;
+		"--sapUiContentForegroundColorDarken3": () => darken("--sapUiContentForegroundColor", 3), // #dedede;
+		"--sapUiContentForegroundColorDarken5": () => darken("--sapUiContentForegroundColor", 5), // #d9d9d9;
+		"--sapUiContentForegroundColorDarken10": () => darken("--sapUiContentForegroundColor", 10), // #cccccc;
+		"--sapUiButtonRejectActiveBackgroundLighten5": () => lighten("--sapUiButtonRejectActiveBackground", 5),
+		"--sapUiButtonAcceptActiveBackgroundLighten5": () => lighten("--sapUiButtonAcceptActiveBackground", 5),
+		"--sapUiButtonBackgroundDarken10": () => darken("--sapUiButtonBackground", 10),
+		"--sapBackgroundColorFade72": () => fade("--sapBackgroundColor", 72),
+		"--sapUiAccent1Lighten50": () => lighten("--sapUiAccent1", 50),
+		"--sapUiAccent2Lighten40": () => lighten("--sapUiAccent2", 40),
+		"--sapUiAccent3Lighten46": () => lighten("--sapUiAccent3", 46),
+		"--sapUiAccent4Lighten46": () => lighten("--sapUiAccent4", 46),
+		"--sapUiAccent5Lighten32": () => lighten("--sapUiAccent5", 32),
+		"--sapUiAccent6Lighten52": () => lighten("--sapUiAccent6", 52),
+		"--sapUiAccent7Lighten64": () => lighten("--sapUiAccent7", 64),
+		"--sapUiAccent8Lighten61": () => lighten("--sapUiAccent8", 61),
+		"--sapUiAccent9Lighten37": () => lighten("--sapUiAccent9", 37),
+		"--sapUiAccent10Lighten49": () => lighten("--sapUiAccent10", 49),
+	};
+
+	return derivations;
+};
+
+var componentDerivedColors = derivationsFactory$1;
+
+var derivedColors = [globalDerivedColors, componentDerivedColors];
+
+export default derivedColors;
+//# sourceMappingURL=derived-colors.js.map

dist/themes/sap_fiori_3/derived-colors.js

@@ -1,4 +0,185 @@
-const themeDerivationsFactory = require("./global-derived-colors");
-const componentDerivationsFactory = require("../base/component-derived-colors");
+const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desaturate, mix, spin, concat }) => {
+	const derivations = {
+		"--sapHighlightColor": () => darken("--sapBrandColor", 10),
+		"--sapBackgroundColorDefault": () => darken("--sapPrimary3", 2),
+		"--sapBackgroundColor": () => darken("--sapPrimary3", 2),
 
-module.exports = [themeDerivationsFactory, componentDerivationsFactory];
+		"--sapErrorBackground": () => lighten("--sapNegativeColor", 59.5),
+		"--sapWarningBackground": () => lighten("--sapCriticalColor", 49),
+		"--sapSuccessBackground": () => lighten("--sapPositiveColor", 69),
+		"--sapInformationBackground": () => lighten("--sapInformativeColor", 55),
+		"--sapNeutralBackground": () => lighten("--sapNeutralColor", 53),
+		"--sapInformativeTextColor": () => darken("--sapInformativeColor", 20),
+		"--sapHighlightTextColor": () => contrast("--sapHighlightColor", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapContent_MarkerIconColor": () => darken("--sapAccentColor6", 13),
+		"--sapContent_MarkerTextColor": () => darken("--sapAccentColor7", 8),
+		"--sapContent_ImagePlaceholderBackground": () => darken("--sapBaseColor", 20),
+		"--sapContent_DisabledTextColor": () => fade("--sapTextColor", (100 - ("--sapContent_DisabledOpacity" * 100))),
+		"--sapContent_ForegroundColor": () => darken("--sapBaseColor", 6),
+		"--sapContent_ForegroundTextColor": () => contrast("--sapContent_ForegroundColor", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapContent_BadgeBackground": () => darken("--sapAccentColor2", 12),
+		"--sapShell_TextColor": () => contrast("--sapShellColor", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+
+		"--sapButton_Hover_Background": () => lighten("--sapHighlightColor", 63),
+		"--sapButton_BorderColor": () => darken("--sapBrandColor", 10),
+		"--sapButton_TextColor": () => contrast("--sapButton_Background", darken("--sapBrandColor", 10), "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapButton_Hover_TextColor": () => contrast("--sapButton_Hover_Background", darken("--sapBrandColor", 10), "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapButton_Emphasized_TextColor": () => contrast("--sapButton_Emphasized_Background", "--sapBrandColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapField_ReadOnly_Background": () => fade(darken("--sapField_Background", 5), 50),
+		"--sapField_RequiredColor": () => darken("--sapAccentColor3", 12),
+		"--sapGroup_TitleBorderColor": () => darken("--sapBaseColor", 15),
+		"--sapGroup_TitleTextColor": () => contrast("--sapBackgroundColor", "--sapTitleColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapGroup_ContentBorderColor": () => darken("--sapGroup_ContentBackground", 7),
+
+		"--sapList_HeaderTextColor": () => contrast("--sapList_HeaderBackground", "--sapTitleColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapList_BorderColor": () => darken("--sapList_Background", 7),
+		"--sapList_SelectionBackgroundColor": () => lighten(desaturate("--sapSelectedColor", 24), 61),
+		"--sapList_Hover_Background": () => contrast("--sapList_Background", darken("--sapList_Background", 2), lighten("--sapList_Background", 2)),
+		"--sapScrollBar_FaceColor": () => darken("--sapBaseColor", 30),
+		"--sapScrollBar_TrackColor": () => lighten("--sapScrollBar_FaceColor", 30),
+		"--sapScrollBar_Hover_FaceColor": () => darken("--sapScrollBar_FaceColor", 3),
+		"--sapPageHeader_BorderColor": () => darken("--sapPageHeader_Background", 15),
+		"--sapPageHeader_TextColor": () => contrast("--sapPageHeader_Background", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapPageFooter_TextColor": () => contrast("--sapPageFooter_Background", "--sapTextColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapInfobar_Background": () => darken("--sapAccentColor7", 8),
+		"--sapTile_TitleTextColor": () => contrast("--sapTile_Background", "--sapTitleColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapTile_TextColor": () => contrast("--sapTile_Background", "--sapContent_LabelColor", "--sapContent_ContrastTextColor", "--sapContent_ContrastTextThreshold"),
+		"--sapTile_IconColor": () => contrast("--sapTile_Background", "--sapContent_NonInteractiveIconColor", "--sapContent_ContrastIconColor", "--sapContent_ContrastTextThreshold"),
+		"--sapToolbar_SeparatorColor": () => darken("--sapBaseColor", 15),
+		"--sapList_HeaderBackground": () => darken("--sapList_Background", 3),
+
+		"--sapUiShellHoverBackground": () => darken("--sapUiShellColor", 7),
+		"--sapUiShellActiveBackground": () => darken("--sapUiShellColor", 10),
+		"--sapUiShellActiveTextColor": () => contrast("--sapUiShellActiveBackground", "--sapUiBaseText", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiShellHoverToggleBackground": () => darken("--sapUiShellColor", 10),
+		"--sapUiLinkHover": () => darken("--sapUiLink", 10),
+		"--sapUiLinkInverted": () => lighten(saturate("--sapUiLink", 9), 48),
+		"--sapUiNotificationBarBG": () => fade("--sapUiPrimary7", 98),
+		"--sapUiNotifierSeparator": () => darken("--sapUiPrimary7", 20),
+		"--sapUiNotificationBarBorder": () => lighten("--sapUiPrimary7", 20),
+		"--sapUiContentShadowColorFade30": () => fade("--sapUiContentShadowColor", 30),
+		"--sapUiCalloutShadow": () => concat({
+			static: "0px 6px 12px 0px",
+			var: "--sapUiContentShadowColorFade30"
+		}),
+		"--sapUiButtonIconColor": () => contrast("--sapUiButtonBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonActiveTextColor": () => contrast("--sapUiButtonActiveBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonEmphasizedHoverBackground": () => darken("--sapUiButtonEmphasizedBackground", 7),
+		"--sapUiButtonEmphasizedActiveBackground": () => darken("--sapUiButtonEmphasizedBackground", 10),
+		"--sapUiButtonAcceptActiveBackground": () => darken("--sapUiPositiveElement", 5),
+		"--sapUiButtonRejectTextColor": () => contrast("--sapUiButtonRejectBackground", "--sapUiNegativeText", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonAcceptTextColor": () => contrast("--sapUiButtonAcceptBackground", "--sapUiPositiveText", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiButtonRejectActiveBackground": () => darken("--sapUiNegativeElement", 5),
+		"--sapUiButtonFooterTextColor": () => contrast("--sapUiPageFooterBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonIconColor": () => contrast("--sapUiSegmentedButtonBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonActiveIconColor": () => contrast("--sapUiSegmentedButtonActiveBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonSelectedIconColor": () => contrast("--sapUiSegmentedButtonSelectedBackground", "--sapUiContentIconColor", "--sapUiContentContrastIconColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiToggleButtonPressedTextColor": () => contrast("--sapUiToggleButtonPressedBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiToggleButtonPressedHoverBackground": () => lighten("--sapUiToggleButtonPressedBackground", 3),
+		"--sapUiListActiveTextColor": () => contrast("--sapUiListActiveBackground", "--sapUiListTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonTextColor": () => contrast("--sapUiSegmentedButtonBackground", "--sapUiButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiSegmentedButtonActiveTextColor": () => contrast("--sapUiSegmentedButtonActiveBackground", "--sapUiSegmentedButtonTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiFieldPlaceholderTextColor": () => lighten("--sapUiContentLabelColor", 4),
+		"--sapUiListSelectionHoverBackground": () => contrast("--sapUiListSelectionBackgroundColor", darken("--sapUiListSelectionBackgroundColor", 3), lighten("--sapUiListSelectionBackgroundColor", 3)),
+		"--sapUiListFooterBackground": () => darken("--sapUiListBackground", 2),
+		"--sapUiListTableGroupHeaderBackground": () => darken("--sapUiListBackground", 3),
+		"--sapUiListTableGroupHeaderBorderColor": () => darken("--sapUiListBorderColor", 8),
+		"--sapUiListTableGroupHeaderTextColor": () => contrast("--sapUiListTableGroupHeaderBackground", "--sapUiListTextColor", "--sapUiContentContrastTextColor", "--sapUiContentContrastTextThreshold"),
+		"--sapUiListTableFixedBorder": () => darken("--sapUiListBorderColor", 8),
+		"--sapUiPageFooterBorderColor": () => contrast("--sapUiPageFooterBackground", darken("--sapUiPageFooterBackground", 15), lighten("--sapUiPageFooterBackground", 12), "--sapUiContentContrastTextThreshold"),
+		"--sapUiInfobarHoverBackground": () => darken("--sapUiInfobarBackground", 3),
+		"--sapUiObjectHeaderBorderColor": () => darken("--sapUiObjectHeaderBackground", 15),
+		"--sapUiDragAndDropActiveBackground": () => fade("--sapUiLink", 5),
+		"--sapUiContentShadowColorFade5": () => fade("--sapUiContentShadowColor", 5),
+		"--sapUiButtonBackgroundDarken24": () => darken("--sapUiButtonBackground", 24),
+		"--sapUiButtonHoverBorderColorLighten30": () => lighten("--sapUiButtonHoverBorderColor", 30),
+		"--sapUiShadowHeader": () => concat({
+			static: "0 1px 0.5rem 0",
+			var: "--sapUiContentShadowColorFade5"
+		}),
+		"--sapUiContentShadowColorFade15": () => fade("--sapUiContentShadowColor", 15),
+		"--sapUiShadowLevel0": () => concat({
+			static: "0 0 0 1px",
+			var: "--sapUiContentShadowColorFade15"
+		}),
+		"--sapUiShadowLevel1": () => concat({
+			static: "0 0.125rem 0.5rem 0",
+			var: "--sapUiContentShadowColorFade15"
+		}, {
+			static: "",
+			var: "--sapUiShadowLevel0"
+		}),
+		"--sapUiShadowLevel2": () => concat({
+			static: "0 0.625rem 1.875rem 0",
+			var: "--sapUiContentShadowColorFade15"
+		}, {
+			static: "",
+			var: "--sapUiShadowLevel0"
+		}),
+		"--sapUiShadowLevel3": () => concat({
+			static: "0 1.25rem 5rem 0",
+			var: "--sapUiContentShadowColorFade15"
+		}, {
+			static: "",
+			var: "--sapUiShadowLevel0"
+		}),
+	};
+	return derivations;
+};
+
+var globalDerivedColors = derivationsFactory;
+
+const derivationsFactory$1 = ({ darken, lighten, contrast, fade, saturate, desaturate, mix, spin, concat }) => {
+	const derivations = {
+		"--sapUiFieldWarningColorDarken100": () => darken("--sapUiFieldWarningColor", 100), // #000000;
+		"--sapUiListBackgroundDarken3": () => darken("--sapUiListBackground", 3), // #f7f7f7;
+		"--sapUiListBackgroundDarken10": () => darken("--sapUiListBackground", 10), // #e6e6e6;
+		"--sapUiListBackgroundDarken13": () => darken("--sapUiListBackground", 13), // #dedede;
+		"--sapUiListBackgroundDarken15": () => darken("--sapUiListBackground", 15), // #d9d9d9;
+		"--sapUiListBackgroundDarken20": () => darken("--sapUiListBackground", 20), // #cccccc;
+		"--sapUiTileBackgroundDarken20": () => darken("--sapUiTileBackground", 20), // #000000;
+		"--sapUiListBorderColorLighten10": () => lighten("--sapUiListBorderColor", 10), // #ffffff;
+		"--sapUiActiveLighten3": () => lighten("--sapUiActive", 3), // #085caf;
+		"--sapUiLinkDarken15": () => darken("--sapUiLink", 15), // #004065;
+		"--sapUiSelectedDarken10": () => darken("--sapUiSelected", 10), // #346187;
+		"--sapUiShellBorderColorLighten30": () => lighten("--sapUiShellBorderColor", 30), // rgba(77, 77, 77, 0);
+		"--sapUiToggleButtonPressedBackgroundLighten50Desaturate47": () => lighten(desaturate("--sapUiToggleButtonPressedBackground", 47), 50), // #dddddd;
+		"--sapUiToggleButtonPressedBorderColorLighten19Desaturate46": () => lighten(desaturate("--sapUiToggleButtonPressedBorderColor", 46), 19), // #818181;
+		"--sapUiSuccessBGLighten5": () => lighten("--sapUiSuccessBG", 5), // #f6fcf6;
+		"--sapUiErrorBGLighten4": () => lighten("--sapUiErrorBG", 4), // #fff8f8;
+		"--sapUiButtonBackgroundDarken7": () => darken("--sapUiButtonBackground", 7), // #e5e5e5;
+		"--sapUiButtonBackgroundDarken2": () => darken("--sapUiButtonBackground", 2), // #f2f2f2;
+		"--sapUiButtonHoverBackgroundDarken2": () => darken("--sapUiButtonHoverBackground", 2), // #e5e5e5;
+		"--sapUiButtonHoverBackgroundDarken5": () => darken("--sapUiButtonHoverBackground", 5),
+		"--sapUiButtonRejectActiveBackgroundDarken5": () => darken("--sapUiButtonRejectActiveBackground", 5), // #a20000;
+		"--sapUiButtonAcceptActiveBackgroundDarken5": () => darken("--sapUiButtonAcceptActiveBackground", 5), // #246924;
+		"--sapUiContentForegroundColorLighten5": () => lighten("--sapUiContentForegroundColor", 5), // #f2f2f2;
+		"--sapUiContentForegroundColorLighten7": () => lighten("--sapUiContentForegroundColor", 7), // #f7f7f7;
+		"--sapUiContentForegroundColorDarken3": () => darken("--sapUiContentForegroundColor", 3), // #dedede;
+		"--sapUiContentForegroundColorDarken5": () => darken("--sapUiContentForegroundColor", 5), // #d9d9d9;
+		"--sapUiContentForegroundColorDarken10": () => darken("--sapUiContentForegroundColor", 10), // #cccccc;
+		"--sapUiButtonRejectActiveBackgroundLighten5": () => lighten("--sapUiButtonRejectActiveBackground", 5),
+		"--sapUiButtonAcceptActiveBackgroundLighten5": () => lighten("--sapUiButtonAcceptActiveBackground", 5),
+		"--sapUiButtonBackgroundDarken10": () => darken("--sapUiButtonBackground", 10),
+		"--sapBackgroundColorFade72": () => fade("--sapBackgroundColor", 72),
+		"--sapUiAccent1Lighten50": () => lighten("--sapUiAccent1", 50),
+		"--sapUiAccent2Lighten40": () => lighten("--sapUiAccent2", 40),
+		"--sapUiAccent3Lighten46": () => lighten("--sapUiAccent3", 46),
+		"--sapUiAccent4Lighten46": () => lighten("--sapUiAccent4", 46),
+		"--sapUiAccent5Lighten32": () => lighten("--sapUiAccent5", 32),
+		"--sapUiAccent6Lighten52": () => lighten("--sapUiAccent6", 52),
+		"--sapUiAccent7Lighten64": () => lighten("--sapUiAccent7", 64),
+		"--sapUiAccent8Lighten61": () => lighten("--sapUiAccent8", 61),
+		"--sapUiAccent9Lighten37": () => lighten("--sapUiAccent9", 37),
+		"--sapUiAccent10Lighten49": () => lighten("--sapUiAccent10", 49),
+	};
+
+	return derivations;
+};
+
+var componentDerivedColors = derivationsFactory$1;
+
+var derivedColors = [globalDerivedColors, componentDerivedColors];
+
+export default derivedColors;
+//# sourceMappingURL=derived-colors.js.map

dist/themes/ToggleButton.css.js

@@ -1,1 +0,1 @@
-export default ":host(ui5-togglebutton:not([hidden])){display:inline-block}ui5-togglebutton:not([hidden]){display:inline-block}ui5-togglebutton .sapMBtn:before{content:\"\";min-height:inherit;font-size:0}.sapMBtn.sapMToggleBtnPressed{color:var(--sapUiToggleButtonPressedTextColor,#fff);text-shadow:none}.sapMBtn.sapMToggleBtnPressed.sapMBtnNegative{background-color:var(--sapUiButtonRejectActiveBackground,#a20000);border-color:var(--sapUiButtonRejectActiveBorderColor,var(--sapUiButtonRejectActiveBackground,#a20000));color:var(--sapUiToggleButtonPressedTextColor,#fff)}.sapMBtn.sapMToggleBtnPressed.sapMBtnNegative:active,.sapMBtn.sapMToggleBtnPressed.sapMBtnNegative:hover{background-color:var(--_ui5_toggle_button_pressed_negative_hover,var(--sapUiButtonRejectActiveBackgroundLighten5,#b00));border-color:var(--sapUiButtonRejectActiveBorderColor,var(--sapUiButtonRejectActiveBackground,#a20000))}.sapMBtn.sapMToggleBtnPressed.sapMBtnPositive{background-color:var(--sapUiButtonAcceptActiveBackground,#0d6733);border-color:var(--sapUiButtonAcceptActiveBorderColor,var(--sapUiButtonAcceptActiveBackground,#0d6733));color:var(--sapUiToggleButtonPressedTextColor,#fff)}.sapMBtn.sapMToggleBtnPressed.sapMBtnPositive:active,.sapMBtn.sapMToggleBtnPressed.sapMBtnPositive:hover{background-color:var(--_ui5_toggle_button_pressed_positive_hover,var(--sapUiButtonAcceptActiveBackgroundLighten5,#107e3e));border-color:var(--sapUiButtonAcceptActiveBorderColor,var(--sapUiButtonAcceptActiveBackground,#0d6733))}.sapMBtn.sapMToggleBtnPressed.sapMBtnDefault:not(:active):not(:hover),.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:not(:active):not(:hover),.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:not(:active):not(:hover){background-color:var(--sapUiToggleButtonPressedBackground,var(--sapUiSelected,var(--sapSelectedColor,var(--sapHighlightColor,#0854a0))));border-color:var(--sapUiToggleButtonPressedBorderColor,var(--sapUiToggleButtonPressedBackground,var(--sapUiSelected,var(--sapSelectedColor,var(--sapHighlightColor,#0854a0)))))}.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus,.sapMBtn.sapMToggleBtnPressed:not(.sapMBtnNegative):not(.sapMBtnPositive):focus{border-color:var(--_ui5_toggle_button_pressed_focussed,var(--sapUiToggleButtonPressedBorderColor,var(--sapUiToggleButtonPressedBackground,var(--sapUiSelected,var(--sapSelectedColor,var(--sapHighlightColor,#0854a0))))))}.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus:after,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus:after,.sapMBtn.sapMToggleBtnPressed:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active,.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover,.sapMBtn.sapMToggleBtnPressed:active,.sapMBtn.sapMToggleBtnPressed:hover{background-color:var(--sapUiToggleButtonPressedHoverBackground,#095caf);border-color:var(--sapUiToggleButtonPressedHoverBorderColor,var(--sapUiToggleButtonPressedHoverBackground,#095caf))}.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active:focus,.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover:focus,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active:focus,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover:focus,.sapMBtn.sapMToggleBtnPressed:active:focus .sapMBtn.sapMToggleBtnPressed:hover:focus{border-color:var(--_ui5_toggle_button_pressed_focussed_hovered,var(--sapUiToggleButtonPressedBorderColor,var(--sapUiToggleButtonPressedBackground,var(--sapUiSelected,var(--sapSelectedColor,var(--sapHighlightColor,#0854a0))))))}"
+export default ":host(ui5-togglebutton:not([hidden])){display:inline-block}ui5-togglebutton:not([hidden]){display:inline-block}:host([disabled]){pointer-events:none}ui5-togglebutton[disabled]{pointer-events:none}ui5-togglebutton .sapMBtn:before{content:\"\";min-height:inherit;font-size:0}.sapMBtn.sapMToggleBtnPressed{color:var(--sapUiToggleButtonPressedTextColor,#fff);text-shadow:none}.sapMBtn.sapMToggleBtnPressed.sapMBtnNegative{background-color:var(--sapUiButtonRejectActiveBackground,#a20000);border-color:var(--sapUiButtonRejectActiveBorderColor,var(--sapUiButtonRejectActiveBackground,#a20000));color:var(--sapUiToggleButtonPressedTextColor,#fff)}.sapMBtn.sapMToggleBtnPressed.sapMBtnNegative:active,.sapMBtn.sapMToggleBtnPressed.sapMBtnNegative:hover{background-color:var(--_ui5_toggle_button_pressed_negative_hover,var(--sapUiButtonRejectActiveBackgroundLighten5,#b00));border-color:var(--sapUiButtonRejectActiveBorderColor,var(--sapUiButtonRejectActiveBackground,#a20000))}.sapMBtn.sapMToggleBtnPressed.sapMBtnPositive{background-color:var(--sapUiButtonAcceptActiveBackground,#0d6733);border-color:var(--sapUiButtonAcceptActiveBorderColor,var(--sapUiButtonAcceptActiveBackground,#0d6733));color:var(--sapUiToggleButtonPressedTextColor,#fff)}.sapMBtn.sapMToggleBtnPressed.sapMBtnPositive:active,.sapMBtn.sapMToggleBtnPressed.sapMBtnPositive:hover{background-color:var(--_ui5_toggle_button_pressed_positive_hover,var(--sapUiButtonAcceptActiveBackgroundLighten5,#107e3e));border-color:var(--sapUiButtonAcceptActiveBorderColor,var(--sapUiButtonAcceptActiveBackground,#0d6733))}.sapMBtn.sapMToggleBtnPressed.sapMBtnDefault:not(:active):not(:hover),.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:not(:active):not(:hover),.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:not(:active):not(:hover){background-color:var(--sapUiToggleButtonPressedBackground,var(--sapUiSelected,var(--sapSelectedColor,var(--sapHighlightColor,#0854a0))));border-color:var(--sapUiToggleButtonPressedBorderColor,var(--sapUiToggleButtonPressedBackground,var(--sapUiSelected,var(--sapSelectedColor,var(--sapHighlightColor,#0854a0)))))}.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus,.sapMBtn.sapMToggleBtnPressed:not(.sapMBtnNegative):not(.sapMBtnPositive):focus{border-color:var(--_ui5_toggle_button_pressed_focussed,var(--sapUiToggleButtonPressedBorderColor,var(--sapUiToggleButtonPressedBackground,var(--sapUiSelected,var(--sapSelectedColor,var(--sapHighlightColor,#0854a0))))))}.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:focus:after,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:focus:after,.sapMBtn.sapMToggleBtnPressed:focus:after{border-color:var(--sapUiContentContrastFocusColor,var(--sapContent_ContrastFocusColor,#fff))}.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active,.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover,.sapMBtn.sapMToggleBtnPressed:active,.sapMBtn.sapMToggleBtnPressed:hover{background-color:var(--sapUiToggleButtonPressedHoverBackground,#095caf);border-color:var(--sapUiToggleButtonPressedHoverBorderColor,var(--sapUiToggleButtonPressedHoverBackground,#095caf))}.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:active:focus,.sapMBtn.sapMToggleBtnPressed.sapMBtnEmphasized:hover:focus,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:active:focus,.sapMBtn.sapMToggleBtnPressed.sapMBtnTransparent:hover:focus,.sapMBtn.sapMToggleBtnPressed:active:focus .sapMBtn.sapMToggleBtnPressed:hover:focus{border-color:var(--_ui5_toggle_button_pressed_focussed_hovered,var(--sapUiToggleButtonPressedBorderColor,var(--sapUiToggleButtonPressedBackground,var(--sapUiSelected,var(--sapSelectedColor,var(--sapHighlightColor,#0854a0))))))}"

dist/Timeline.js

@@ -16,3 +16,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-timeline",
-	defaultSlot: "items",
 	slots: /** @lends sap.ui.webcomponents.main.Timeline.prototype */ {
@@ -26,12 +25,8 @@ /**
 		 */
-		items: {
+		"default": {
+			propertyName: "items",
 			type: TimelineItem,
-			multiple: true,
 			individualSlots: true,
 		},
 	},
-	properties: /** @lends sap.ui.webcomponents.main.Timeline.prototype */ {
-	},
-	events: /** @lends sap.ui.webcomponents.main.Timeline.prototype */ {
-	},
 };
@@ -38,0 +33,0 @@

dist/TimelineItem.js

@@ -17,3 +17,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-timeline-item",
-	defaultSlot: "description",
 	slots: /** @lends sap.ui.webcomponents.main.TimelineItem.prototype */ {
@@ -23,9 +22,8 @@ /**
 		 *
-		 * @type {HTMLElement}
+		 * @type {Node[]}
 		 * @slot
 		 * @public
 		 */
-		description: {
-			type: HTMLElement,
-			multiple: false,
+		"default": {
+			type: Node,
 		},
@@ -108,3 +106,3 @@ },
 		 */
-		itemNamePress: {},
+		itemNameClick: {},
 	},
@@ -149,3 +147,3 @@ };
 	onItemNamePress() {
-		this.fireEvent("itemNamePress", {});
+		this.fireEvent("itemNameClick", {});
 	}
@@ -152,0 +150,0 @@

dist/Title.js

@@ -49,8 +49,6 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 		 */
-		text: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
 	},
-	defaultSlot: "text",
 };
@@ -57,0 +55,0 @@

dist/ToggleButton.js

@@ -25,3 +25,2 @@ import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
 	},
-	defaultSlot: "text",
 };
@@ -71,7 +70,5 @@
 
-	onclick() {
-		if (!this.disabled) {
-			this.pressed = !this.pressed;
-			this.fireEvent("press", { pressed: this.pressed });
-		}
+	_onclick(e) {
+		this.pressed = !this.pressed;
+		this.fireEvent("press", { pressed: this.pressed });
 	}
@@ -78,0 +75,0 @@

dist/Token.js

@@ -22,4 +22,2 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	tag: "ui5-token",
-	defaultSlot: "text",
-	usesNodeText: true,
 	slots: /** @lends sap.ui.webcomponents.main.Token.prototype */ {
@@ -34,5 +32,4 @@ /**
 		 */
-		text: {
+		"default": {
 			type: Node,
-			multiple: true,
 		},
@@ -39,0 +36,0 @@ },

dist/Tokenizer.js

@@ -19,9 +19,8 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 	slots: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
-		tokens: {
+		"default": {
+			propertyName: "tokens",
 			type: HTMLElement,
-			multiple: true,
 			individualSlots: true,
 		},
 	},
-	defaultSlot: "tokens",
 	properties: /** @lends sap.ui.webcomponents.main.Tokenizer.prototype */ {
@@ -28,0 +27,0 @@ showMore: { type: Boolean },

dist/YearPicker.js

@@ -10,2 +10,3 @@ import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
 import Integer from "@ui5/webcomponents-base/src/types/Integer.js";
+import getShadowDOMTarget from "@ui5/webcomponents-base/src/events/getShadowDOMTarget.js";
 import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat.js";
@@ -191,4 +192,5 @@ import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType.js";
 	onclick(event) {
-		if (event.ui5target.className.indexOf("sapWCYearPickerItem") > -1) {
-			const timestamp = this.getTimestampFromDom(event.ui5target);
+		const eventTarget = getShadowDOMTarget(event);
+		if (eventTarget.className.indexOf("sapWCYearPickerItem") > -1) {
+			const timestamp = this.getTimestampFromDom(eventTarget);
 			this.timestamp = timestamp;
@@ -217,5 +219,6 @@ this._selectedYear = this._year;
 	_handleEnter(event) {
+		const eventTarget = getShadowDOMTarget(event);
 		event.preventDefault();
-		if (event.ui5target.className.indexOf("sapWCYearPickerItem") > -1) {
-			const timestamp = this.getTimestampFromDom(event.ui5target);
+		if (eventTarget.className.indexOf("sapWCYearPickerItem") > -1) {
+			const timestamp = this.getTimestampFromDom(eventTarget);
 
@@ -230,5 +233,6 @@ this.timestamp = timestamp;
 	_handleSpace(event) {
+		const eventTarget = getShadowDOMTarget(event);
 		event.preventDefault();
-		if (event.ui5target.className.indexOf("sapWCYearPickerItem") > -1) {
-			const timestamp = this.getTimestampFromDom(event.ui5target);
+		if (eventTarget.className.indexOf("sapWCYearPickerItem") > -1) {
+			const timestamp = this.getTimestampFromDom(eventTarget);
 
@@ -235,0 +239,0 @@ this._selectedYear = CalendarDate.fromTimestamp(

package.json

 {
   "name": "@ui5/webcomponents",
-  "version": "0.13.1",
+  "version": "1.0.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
@@ -91,4 +91,4 @@ "author": "SAP SE (https://www.sap.com)",
   "dependencies": {
-    "@ui5/webcomponents-base": "0.13.1",
-    "@ui5/webcomponents-core": "0.13.1"
+    "@ui5/webcomponents-base": "0.14.0",
+    "@ui5/webcomponents-core": "0.14.0"
   },
@@ -107,2 +107,3 @@ "devDependencies": {
     "@webcomponents/webcomponentsjs": "^2.2.7",
+    "chai": "^4.2.0",
     "chromedriver": "^2.45.0",
@@ -136,3 +137,3 @@ "clean-css": "^4.2.1",
     "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-filesize": "^6.0.1",
@@ -139,0 +140,0 @@ "rollup-plugin-less": "^1.1.2",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3927818

increased by2.9%

Number of package files

243

increased by1.25%

Lines of code

15386

increased by2.49%

Worsened metrics

Dev dependency count

52

increased by1.96%

Dependency changes

• + Added@ui5/webcomponents-base@0.14.0(transitive)

• + Added@ui5/webcomponents-core@0.14.0(transitive)

• - Removed@ui5/webcomponents-base@0.13.1(transitive)

• - Removed@ui5/webcomponents-core@0.13.1(transitive)

• Updated@ui5/webcomponents-base@0.14.0

• Updated@ui5/webcomponents-core@0.14.0