@ui5/webcomponents 1.24.0-rc.4 → 2.0.0-rc.0

package/src/TabContainerPopover.hbs

@@ -1,14 +1,15 @@
 <ui5-responsive-popover
 	id="{{_id}}-overflowMenu"
-	horizontal-align="Right"
-	placement-type="Bottom"
+	horizontal-align="End"
+	placement="Bottom"
 	content-only-on-desktop
 	hide-arrow
 	_hide-header
 	class="ui5-tab-container-responsive-popover"
+	@dragstart="{{_onDragStart}}"
 >
 	<ui5-list
-		mode="SingleSelect"
+		selection-mode="Single"
 		separators="None"
 		@ui5-item-click="{{_onOverflowListItemClick}}"
 		@ui5-move-over="{{_onPopoverListMoveOver}}"

package/src/TabInOverflow.hbs

@@ -1,7 +1,7 @@
 <ui5-li-custom
 	id="{{this._id}}-li"
 	class="{{this.overflowClasses}}"
-	style="{{this.forcedStyle}}"
+	style="{{this._forcedStyleInOverflow}}"
 	type="{{this.overflowState}}"
 	aria-disabled="{{this.effectiveDisabled}}"
 	aria-selected="{{this.effectiveSelected}}"

package/src/TabInStrip.hbs

@@ -4,8 +4,8 @@
 	role="tab"
 	aria-roledescription="{{_roleDescription}}"
 	aria-haspopup="{{_ariaHasPopup}}"
-	aria-posinset="{{this.forcedPosinset}}"
-	aria-setsize="{{this.forcedSetsize}}"
+	aria-posinset="{{this._forcedPosinset}}"
+	aria-setsize="{{this._forcedSetsize}}"
 	aria-controls="ui5-tc-content"
 	aria-selected="{{this.effectiveSelected}}"
 	aria-disabled="{{this.effectiveDisabled}}"
@@ -29,7 +29,7 @@
 	{{/if}}
 
 	<div class="ui5-tab-strip-itemContent">
-		{{#unless this.isInline}}
+		{{#unless this._isInline}}
 			{{> additionalText}}
 		{{/unless}}
 

package/src/TabSeparatorInOverflow.hbs

@@ -3,7 +3,7 @@
 	role="separator"
 	class="{{classes.root}}"
 	disabled
-	style="{{this._style}}"
+	style="{{this._forcedStyleInOverflow}}"
 	.realTabReference="{{this}}"
 >
 </ui5-li-custom>

package/src/Table.hbs

@@ -115,7 +115,6 @@
 			class="ui5-table-busy-ind"
 			style="{{styles.busy}}"
 			active
-			size="Medium"
 			data-sap-focus-ref
 		></ui5-busy-indicator>
 	</div>

package/src/TextArea.hbs

@@ -51,3 +51,5 @@
 </div>
 
 {{#*inline "afterTextarea"}}{{/inline}}
+
+{{>include "./TextAreaPopover.hbs"}}

package/src/TextAreaPopover.hbs

@@ -6,7 +6,7 @@
 		_disable-initial-focus
 		class="ui5-valuestatemessage-popover"
 		style="{{styles.valueStateMsgPopover}}"
-		placement-type="Bottom"
+		placement="Bottom"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">

package/src/TimePicker.hbs

@@ -41,3 +41,5 @@
 	{{/unless}}
 	</ui5-input>
 </div>
+
+{{>include "./TimePickerPopover.hbs"}}

package/src/TimePickerPopover.hbs

@@ -1,8 +1,8 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
 	class="ui5-time-picker-popover"
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	allow-target-overlap
 	_hide-header
 	hide-arrow
@@ -20,7 +20,7 @@
 		@close-picker="{{submitPickers}}"
 	></ui5-time-selection-clocks>
 
-	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
+	<div slot="footer" class="ui5-time-picker-footer">
 		<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
 		<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
 	</div>
@@ -30,8 +30,8 @@
 <ui5-popover
 	id="{{_id}}-popover"
 	class="ui5-time-picker-inputs-popover"
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	allow-target-overlap
 	_hide-header
 	hide-arrow
@@ -50,7 +50,7 @@
 		></ui5-time-selection-inputs>
 	</div>
 
-	<div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
+	<div slot="footer" class="ui5-time-picker-footer">
 		<ui5-button id="submitInputs" design="Emphasized" @click="{{submitInputsPopover}}">{{submitButtonLabel}}</ui5-button>
 		<ui5-button id="closeInputs" design="Transparent" @click="{{closeInputsPopover}}">{{cancelButtonLabel}}</ui5-button>
 	</div>

package/src/Tokenizer.hbs

@@ -23,4 +23,6 @@
 			part="n-more-text"
 		>{{_nMoreText}}</span>
 	{{/if}}
-</div>
+</div>
+
+{{>include "./TokenizerPopover.hbs"}}

package/src/TokenizerPopover.hbs

@@ -4,8 +4,8 @@
 	class={{classes.popover}}
 	?content-only-on-desktop="{{noValueStatePopover}}"
 	hide-arrow
-	placement-type="Bottom"
-	horizontal-align="Left"
+	placement="Bottom"
+	horizontal-align="Start"
 	@before-close={{handleBeforeClose}}
 	@before-open="{{handleBeforeOpen}}"
 >
@@ -46,7 +46,7 @@
 	{{/if}}
 	<ui5-list
 		class="ui5-tokenizer-list"
-		mode="Delete"
+		selection-mode="Delete"
 		@ui5-item-delete={{itemDelete}}
 	>
 		{{#each _tokens}}

package/src/Toolbar.hbs

@@ -17,4 +17,6 @@
 		accessible-name="{{accInfo.overflowButton.accessibleName}}"
 		.accessibilityAttributes={{accInfo.overflowButton.accessibilityAttributes}}
 	></ui5-button>
-</div>
+</div>
+
+{{>include "./ToolbarPopover.hbs"}}

package/src/ToolbarPopover.hbs

@@ -1,7 +1,7 @@
 <ui5-popover
 	class="ui5-overflow-popover"
-	placement-type="Bottom"
-	horizontal-align="Right"
+	placement="Bottom"
+	horizontal-align="End"
 	@ui5-after-close="{{onOverflowPopoverClosed}}"
 	@ui5-after-open="{{onOverflowPopoverOpened}}"
 	hide-arrow

package/src/Tree.hbs

@@ -1,5 +1,5 @@
 <ui5-tree-list
-    .mode="{{mode}}"
+    .selectionMode="{{selectionMode}}"
     .headerText="{{headerText}}"
     .footerText="{{footerText}}"
     .noDataText="{{noDataText}}"

package/src/themes/Badge.css

@@ -51,7 +51,8 @@
 	cursor: pointer;
 }
 
-:host([interactive]) .ui5-badge-root:focus {
+:host([desktop][interactive]) .ui5-badge-root:focus,
+:host([interactive]) .ui5-badge-root:focus-visible {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	outline-offset: 1px;
 }

package/src/themes/Bar.css

@@ -0,0 +1,75 @@
+:host {
+	background-color: var(--sapPageHeader_Background);
+	height: var(--_ui5_bar_base_height);
+	width: 100%;
+	box-shadow: var(--sapContent_HeaderShadow);
+	display: block;
+}
+
+.ui5-bar-root {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: inherit;
+	width: inherit;
+	background-color: inherit;
+	box-shadow: inherit;
+	border-radius: inherit;
+}
+
+.ui5-bar-root .ui5-bar-startcontent-container {
+	padding-inline-start: var(--_ui5_bar-start-container-padding-start);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.ui5-bar-root .ui5-bar-content-container {
+	min-width: calc(30% - calc(var(--_ui5_bar-start-container-padding-start)
+							 + var(--_ui5_bar-end-container-padding-end)
+						  + (2*var(--_ui5_bar-mid-container-padding-start-end))));
+}
+
+.ui5-bar-root.ui5-bar-root-shrinked .ui5-bar-content-container {
+	min-width: 0px;
+	overflow: hidden;
+	height: 100%;
+}
+
+.ui5-bar-root .ui5-bar-endcontent-container {
+	padding-inline-end: var(--_ui5_bar-end-container-padding-end);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+}
+.ui5-bar-root .ui5-bar-midcontent-container {
+	padding: 0 var(--_ui5_bar-mid-container-padding-start-end);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+:host([design="Footer"]){
+	background-color: var(--sapPageFooter_Background);
+	border-top: 0.0625rem solid var(--sapPageFooter_BorderColor);
+	box-shadow: none;
+}
+
+:host([design="Subheader"]){
+	height: var(--_ui5_bar_subheader_height);
+	margin-top: var(--_ui5_bar_subheader_margin-top);
+}
+
+:host([design="FloatingFooter"]){
+	border-radius: var(--sapElement_BorderCornerRadius);
+	background-color: var(--sapPageFooter_Background);
+	box-shadow: var(--sapContent_Shadow1);
+	border: none;
+}
+
+::slotted(*) {
+	margin: 0 0.25rem;
+}

package/src/themes/Breadcrumbs.css

@@ -76,22 +76,22 @@
 }
 
 /* separator styles */
-:host([separator-style="DoubleSlash"]) .ui5-breadcrumbs-separator::after {
+:host([separators="DoubleSlash"]) .ui5-breadcrumbs-separator::after {
 	content: "//";
 }
 
-:host([separator-style="BackSlash"]) .ui5-breadcrumbs-separator::after {
+:host([separators="BackSlash"]) .ui5-breadcrumbs-separator::after {
 	content: "\\\\";
 }
 
-:host([separator-style="DoubleBackSlash"]) .ui5-breadcrumbs-separator::after {
+:host([separators="DoubleBackSlash"]) .ui5-breadcrumbs-separator::after {
 	content: "\\\\\\\\";
 }
 
-:host([separator-style="GreaterThan"]) .ui5-breadcrumbs-separator::after {
+:host([separators="GreaterThan"]) .ui5-breadcrumbs-separator::after {
 	content: ">";
 }
 
-:host([separator-style="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
+:host([separators="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
 	content: ">>";
 }

package/src/themes/BusyIndicator.css

@@ -6,62 +6,62 @@
 	color: var(--_ui5_busy_indicator_color);
 }
 
-:host([size="Small"]) .ui5-busy-indicator-root {
+:host([size="S"]) .ui5-busy-indicator-root {
 	min-width: 1.625rem; /*width of the dots plus the gap between them*/
 	min-height: .5rem;
 }
 
-:host([size="Small"][text]:not([text=""])) .ui5-busy-indicator-root {
+:host([size="S"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 1.75rem;
 }
 
-:host([size="Small"]) .ui5-busy-indicator-circle {
+:host([size="S"]) .ui5-busy-indicator-circle {
 	width: .5rem;
 	height: .5rem;
 }
 
-:host([size="Small"]) .ui5-busy-indicator-circle:first-child,
-:host([size="Small"]) .ui5-busy-indicator-circle:nth-child(2) {
+:host([size="S"]) .ui5-busy-indicator-circle:first-child,
+:host([size="S"]) .ui5-busy-indicator-circle:nth-child(2) {
 	margin-inline-end: 0.0625rem;
 }
 
 :host(:not([size])) .ui5-busy-indicator-root,
-:host([size="Medium"]) .ui5-busy-indicator-root {
+:host([size="M"]) .ui5-busy-indicator-root {
 	min-width: 3.375rem; /*width of the dots plus the gap between them*/
 	min-height: 1rem;
 }
 
-:host([size="Medium"]) .ui5-busy-indicator-circle:first-child,
-:host([size="Medium"]) .ui5-busy-indicator-circle:nth-child(2) {
+:host([size="M"]) .ui5-busy-indicator-circle:first-child,
+:host([size="M"]) .ui5-busy-indicator-circle:nth-child(2) {
 	margin-inline-end: 0.1875rem;
 }
 
 :host(:not([size])[text]:not([text=""])) .ui5-busy-indicator-root,
-:host([size="Medium"][text]:not([text=""])) .ui5-busy-indicator-root {
+:host([size="M"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 2.25rem;
 }
 
 :host(:not([size])) .ui5-busy-indicator-circle,
-:host([size="Medium"])  .ui5-busy-indicator-circle {
+:host([size="M"])  .ui5-busy-indicator-circle {
 	width: 1rem;
 	height: 1rem;
 }
 
-:host([size="Large"]) .ui5-busy-indicator-root {
+:host([size="L"]) .ui5-busy-indicator-root {
 	min-width: 6.5rem; /*width of the dots plus the gap between them*/
 	min-height: 2rem;
 }
 
-:host([size="Large"]) .ui5-busy-indicator-circle:first-child,
-:host([size="Large"]) .ui5-busy-indicator-circle:nth-child(2) {
+:host([size="L"]) .ui5-busy-indicator-circle:first-child,
+:host([size="L"]) .ui5-busy-indicator-circle:nth-child(2) {
 	margin-inline-end: 0.25rem;
 }
 
-:host([size="Large"][text]:not([text=""])) .ui5-busy-indicator-root {
+:host([size="L"][text]:not([text=""])) .ui5-busy-indicator-root {
 	min-height: 3.25rem;
 }
 
-:host([size="Large"]) .ui5-busy-indicator-circle {
+:host([size="L"]) .ui5-busy-indicator-circle {
 	width: 2rem;
 	height: 2rem;
 }
@@ -89,10 +89,11 @@
 	flex-direction: column;
 }
 
-.ui5-busy-indicator-busy-area:focus {
+:host([desktop]) .ui5-busy-indicator-busy-area:focus,
+.ui5-busy-indicator-busy-area:focus-visible {
 	outline: var(--_ui5_busy_indicator_focus_outline);
 	outline-offset: -2px;
-    border-radius: var(--_ui5_busy_indicator_focus_border_radius);
+	border-radius: var(--_ui5_busy_indicator_focus_border_radius);
 }
 
 .ui5-busy-indicator-circles-wrapper {

package/src/themes/CardHeader.css

@@ -12,7 +12,8 @@
 	align-items: flex-start;
 }
 
-.ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-within:before {
+:host([desktop]) .ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-within:before,
+.ui5-card-header.ui5-card-header-ff:not(.ui5-card-header-hide-focus):focus-visible:before {
 	outline: none;
 	content: "";
 	position: absolute;
@@ -29,7 +30,8 @@
 }
 
 /* cannot be combined with the above style, because :has selector breaks the whole style if FF */
-.ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus):before {
+:host([desktop]) .ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus):before,
+.ui5-card-header:not(.ui5-card-header-ff):not(.ui5-card-header-hide-focus):has(.ui5-card-header-focusable-element:focus-visible):before {
 	outline: none;
 	content: "";
 	position: absolute;
@@ -78,7 +80,7 @@
 	justify-content: space-between;
 }
 
-.ui5-card-header-status {
+.ui5-card-header-additionalText {
 	flex: none;
 }
 
@@ -105,7 +107,7 @@
 	border-radius: 50%;
 }
 
-.ui5-card-header .ui5-card-header-status {
+.ui5-card-header .ui5-card-header-additionalText {
 	display: inline-block;
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);

package/src/themes/Carousel.css

@@ -8,7 +8,8 @@
     height: 100%;
 }
 
-.ui5-carousel-root:focus {
+:host([desktop]) .ui5-carousel-root:focus,
+.ui5-carousel-root:focus-visible {
     outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 }
 

package/src/themes/CheckBox.css

@@ -61,7 +61,8 @@
 	align-self: center;
 }
 
-:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus::before {
+:host([desktop][wrapping-type="Normal"]) .ui5-checkbox-root:focus-within::before,
+:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus-visible::before {
 	bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
 }
 
@@ -99,7 +100,6 @@
 	background: var(--_ui5_checkbox_inner_information_background_hover);
 }
 
-
 :host([value-state="Success"]) .ui5-checkbox-inner,
 :host([value-state="Success"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner  {
 	background: var(--sapField_SuccessBackground);
@@ -116,14 +116,6 @@
 	color: var(--_ui5_checkbox_checkmark_warning_color);
 }
 
-:host([text]) .ui5-checkbox-root {
-	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
-}
-
-:host([text]) .ui5-checkbox-root:focus::before {
-	inset-inline-end: 0;
-}
-
 .ui5-checkbox-root {
 	position: relative;
 	display: inline-flex;
@@ -141,7 +133,8 @@
 }
 
 /* focused */
-.ui5-checkbox-root:focus::before {
+:host([desktop]) .ui5-checkbox-root:focus-within::before,
+.ui5-checkbox-root:focus-visible::before {
 	display: var(--_ui5_checkbox_focus_outline_display);
 	content: "";
 	position: absolute;
@@ -151,9 +144,13 @@
 	border-radius: var(--_ui5_checkbox_focus_border_radius);
 }
 
-:host .ui5-checkbox-root:focus {
-	border: var(--_ui5_checkbox_focus_border);
-	border-radius: 0.5rem;
+:host([text]) .ui5-checkbox-root {
+	padding-inline-end: var(--_ui5_checkbox_right_focus_distance);
+}
+
+:host([text]) .ui5-checkbox-root:focus-within::before,
+:host([text]) .ui5-checkbox-root:focus-visible::before {
+	inset-inline-end: 0;
 }
 
 /* hover */

package/src/themes/Dialog.css

@@ -96,7 +96,8 @@
 	outline: none;
 }
 
-.ui5-popup-header-root:focus:after {
+:host([desktop]) .ui5-popup-header-root:focus:after,
+.ui5-popup-header-root:focus-visible:after {
 	content: '';
 	position: absolute;
 	left: var(--_ui5_dialog_header_focus_left_offset);

package/src/themes/List.css

@@ -16,11 +16,11 @@
 	border-bottom: 0;
 }
 
-:host([busy]) {
+:host([loading]) {
 	opacity: 0.72;
 }
 
-:host([busy]) .ui5-list-busy-row {
+:host([loading]) .ui5-list-loading-row {
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -29,7 +29,7 @@
 	outline: none;
 }
 
-:host([busy]) .ui5-list-busy-ind {
+:host([loading]) .ui5-list-loading-ind {
 	position: absolute;
 	top: 50%;
 	left: 50%;

package/src/themes/ListItem.css

@@ -207,15 +207,15 @@
 	margin-top: var(--_ui5_list_item_selection_btn_margin_top);
 }
 
-:host([_mode="SingleSelectBegin"]) .ui5-li-root {
+:host([_selection-mode="SingleStart"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_mode="MultiSelect"]) .ui5-li-root {
+:host([_selection-mode="Multiple"]) .ui5-li-root {
 	padding-inline: 0 1rem;
 }
 
-:host([_mode="SingleSelectEnd"]) .ui5-li-root {
+:host([_selection-mode="SingleEnd"]) .ui5-li-root {
 	padding-inline: 1rem 0;
 }
 

package/src/themes/Menu.css

@@ -50,7 +50,7 @@
 	margin-inline: var(--_ui5_menu_submenu_margin_offset);
 }
 
-.ui5-menu-rp[sub-menu][actual-placement-type="Left"] {
+.ui5-menu-rp[sub-menu][actual-placement="Start"] {
 	margin-top: 0.25rem;
 	margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
 }

package/src/themes/Popover.css

@@ -8,58 +8,58 @@
 	box-shadow: var(--_ui5_popover_no_arrow_box_shadow);
 }
 
-:host([opened][actual-placement-type="Top"]) {
+:host([opened][actual-placement="Top"]) {
 	margin-top: var(--_ui5-popover-margin-bottom);
 }
 
-:host([opened][actual-placement-type="Bottom"]) {
+:host([opened][actual-placement="Bottom"]) {
 	margin-top: var(--_ui5-popover-margin-top);
 }
 
 /* pointing upward arrow */
-:host([actual-placement-type="Bottom"]) .ui5-popover-arrow {
+:host([actual-placement="Bottom"]) .ui5-popover-arrow {
 	left: calc(50% - 0.5625rem);
 	top: -0.5rem;
 	height: 0.5625rem;
 }
 
-:host([actual-placement-type="Bottom"]) .ui5-popover-arrow:after {
+:host([actual-placement="Bottom"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_upward_arrow_margin);
 }
 
 /* pointing right arrow */
-:host([actual-placement-type="Left"]) .ui5-popover-arrow {
+:host([actual-placement="Start"]) .ui5-popover-arrow {
 	top: calc(50% - 0.5625rem);
 	right: -0.5625rem;
 	width: 0.5625rem;
 }
 
-:host([actual-placement-type="Left"]) .ui5-popover-arrow:after {
+:host([actual-placement="Start"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_right_arrow_margin);
 }
 
 /* pointing downward arrow */
-:host([actual-placement-type="Top"]) .ui5-popover-arrow {
+:host([actual-placement="Top"]) .ui5-popover-arrow {
 	left: calc(50% - 0.5625rem);
 	height: 0.5625rem;
 	top: 100%;
 }
 
-:host([actual-placement-type="Top"]) .ui5-popover-arrow:after {
+:host([actual-placement="Top"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_downward_arrow_margin);
 }
 
 /* pointing left arrow */
-:host(:not([actual-placement-type])) .ui5-popover-arrow,
-:host([actual-placement-type="Right"]) .ui5-popover-arrow {
+:host(:not([actual-placement])) .ui5-popover-arrow,
+:host([actual-placement="End"]) .ui5-popover-arrow {
 	left: -0.5625rem;
 	top: calc(50% - 0.5625rem);
 	width: 0.5625rem;
 	height: 1rem;
 }
 
-:host(:not([actual-placement-type])) .ui5-popover-arrow:after,
-:host([actual-placement-type="Right"]) .ui5-popover-arrow:after {
+:host(:not([actual-placement])) .ui5-popover-arrow:after,
+:host([actual-placement="End"]) .ui5-popover-arrow:after {
 	margin: var(--_ui5_popover_left_arrow_margin);
 }
 

package/src/themes/Popup.css

@@ -1,5 +1,8 @@
 :host {
     min-width: 1px; /** So that it can always get focus **/
-    display: none;
-    position: fixed;
+    overflow: visible;
+    border: none;
+    inset: "unset";
+    margin: 0;
+    padding: 0;
 }