@ui5/webcomponents 2.17.1 → 2.18.0-rc.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents",
-  "version": "2.17.0",
+  "version": "2.18.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4139,7 +4139,7 @@
         },
         {
           "name": "ui5-link",
-          "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\n### **CSS Parts:**\n - **icon** - Used to style the provided icon within the link\n- **endIcon** - Used to style the provided endIcon within the link",
+          "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\n### **CSS Parts:**\n - **icon** - Used to style the provided icon within the link\n- **endIcon** - Used to style the provided endIcon within the link",
           "doc-url": "",
           "attributes": [
             {
@@ -4229,6 +4229,10 @@
             }
           ],
           "slots": [
+            {
+              "name": "default",
+              "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
+            },
             {
               "name": "default",
               "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design."
@@ -6847,12 +6851,12 @@
             {
               "name": "start-value",
               "description": "Defines start point of a selection - position of a first handle on the slider.",
-              "value": { "type": "number", "default": "undefined" }
+              "value": { "type": "any", "default": "undefined" }
             },
             {
               "name": "end-value",
               "description": "Defines end point of a selection - position of a second handle on the slider.",
-              "value": { "type": "number", "default": "undefined" }
+              "value": { "type": "any", "default": "undefined" }
             },
             {
               "name": "min",
@@ -6920,12 +6924,12 @@
               {
                 "name": "start-value",
                 "description": "Defines start point of a selection - position of a first handle on the slider.",
-                "value": { "type": "number" }
+                "value": { "type": "any" }
               },
               {
                 "name": "end-value",
                 "description": "Defines end point of a selection - position of a second handle on the slider.",
-                "value": { "type": "number" }
+                "value": { "type": "any" }
               },
               {
                 "name": "min",
@@ -10901,7 +10905,7 @@
             {
               "name": "selected",
               "description": "Defines the selected state of the component.",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "any", "default": "false" }
             }
           ],
           "slots": [
@@ -10916,7 +10920,7 @@
               {
                 "name": "selected",
                 "description": "Defines the selected state of the component.",
-                "value": { "type": "boolean" }
+                "value": { "type": "any" }
               }
             ],
             "events": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.17.1",
+  "version": "2.18.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,22 +52,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.17.1",
-    "@ui5/webcomponents-icons": "2.17.1",
-    "@ui5/webcomponents-icons-business-suite": "2.17.1",
-    "@ui5/webcomponents-icons-tnt": "2.17.1",
-    "@ui5/webcomponents-localization": "2.17.1",
-    "@ui5/webcomponents-theming": "2.17.1"
+    "@ui5/webcomponents-base": "2.18.0-rc.1",
+    "@ui5/webcomponents-icons": "2.18.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.18.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.18.0-rc.1",
+    "@ui5/webcomponents-localization": "2.18.0-rc.1",
+    "@ui5/webcomponents-theming": "2.18.0-rc.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.17.1",
+    "@ui5/webcomponents-tools": "2.18.0-rc.1",
     "cypress": "^15.3.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "48db20034ae9198de4b4367866506631afe74105"
+  "gitHead": "988e821178b9ff6c47c2faeae3ef1d5a56f46280"
 }

package/src/BreadcrumbsTemplate.tsx

@@ -52,7 +52,6 @@ export default function BreadcrumbsTemplate(this: Breadcrumbs) {
 					<li class="ui5-breadcrumbs-current-location" onClick={this._onLabelPress}>
 						<span
 							id={`${this._id}-labelWrapper`}
-							role="link"
 							aria-current="page"
 							aria-label={this._currentLocationAccName}
 						>

package/src/DatePickerPopoverTemplate.tsx

@@ -14,10 +14,11 @@ import information from "@ui5/webcomponents-icons/dist/information.js";
 
 type TemplateHook = () => void;
 
-export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { header?: TemplateHook, content?: TemplateHook, footer?: TemplateHook }) {
+export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { header?: TemplateHook, content?: TemplateHook, footer?: TemplateHook, initialFocus?: string }) {
 	const header = hooks?.header || defaultHeader;
 	const content = hooks?.content || defaultContent;
 	const footer = hooks?.footer || defaultFooter;
+	const initialFocus = hooks?.initialFocus;
 
 	return (
 		<ResponsivePopover
@@ -31,6 +32,7 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 			accessibleName={this.pickerAccessibleName}
 			hideArrow={true}
 			_hideHeader={this._shouldHideHeader}
+			initialFocus={initialFocus}
 			onKeyDown={this._onkeydown}
 			onClose={this.onResponsivePopoverAfterClose}
 			onOpen={this.onResponsivePopoverAfterOpen}

package/src/DateTimePickerTemplate.tsx

@@ -12,7 +12,7 @@ import TimeSelectionClocks from "./TimeSelectionClocks.js";
 export default function DateTimePickerTemplate(this: DateTimePicker) {
 	return [
 		DatePickerInputTemplate.call(this),
-		DatePickerPopoverTemplate.call(this, { content, footer }),
+		DatePickerPopoverTemplate.call(this, { content, footer, initialFocus: this._initialFocusId }),
 	];
 }
 

package/src/DynamicDateRangePopoverTemplate.tsx

@@ -19,7 +19,7 @@ export default function DynamicDateRangePopoverTemplate(this: DynamicDateRange)
 			hideArrow={true}
 			_hideHeader={true}
 			onClose={this.onPopoverClose}
-			onOpen={this.onPopoverOpen}
+			onBeforeOpen={this.onPopoverBeforeOpen}
 			onKeyDown={this.onKeyDownPopover}
 		>
 			{this._hasCurrentOptionTemplate &&

package/src/FileUploaderTemplate.tsx

@@ -20,7 +20,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 				onDragOver={this._ondrag}
 				onDrop={this._ondrop}
 			>
-				<form class="ui5-file-uploader-form" onSubmit={this._onFormSubmit}>
+				<div class="ui5-file-uploader-form">
 					<input
 						type="file"
 						class="ui5-file-uploader-native-input"
@@ -39,7 +39,7 @@ export default function FileUploaderTemplate(this: FileUploader) {
 						onChange={this._onChange}
 						data-sap-focus-ref
 					/>
-				</form>
+				</div>
 
 				{this.hideInput ? (
 					<slot></slot>

package/src/InputTemplate.tsx

@@ -33,6 +33,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						inner-input-with-icon={!!this.icon.length}
 						disabled={this.disabled}
 						readonly={this._readonly}
+						required={this.required}
 						value={this._innerValue}
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}

package/src/RangeSliderTemplate.tsx

@@ -70,14 +70,18 @@ export function handles(this: RangeSlider) {
 
 			<SliderTooltip
 				open={this._tooltipsOpen}
-				value={this.startValue.toString()}
+				value={this.tooltipStartValue}
+				valueState={this.tooltipStartValueState}
 				min={this.min}
 				max={this.max}
 				data-sap-ui-start-value
 				editable={this.editableTooltip}
 				followRef={this._startHandle}
 				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
 			>
 			</SliderTooltip>
 		</div>
@@ -105,14 +109,18 @@ export function handles(this: RangeSlider) {
 
 			<SliderTooltip
 				open={this._tooltipsOpen}
-				value={this.endValue.toString()}
+				value={this.tooltipEndValue}
+				valueState={this.tooltipEndValueState}
 				min={this.min}
 				max={this.max}
 				data-sap-ui-end-value
 				editable={this.editableTooltip}
 				followRef={this._endHandle}
 				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
 			>
 			</SliderTooltip>
 		</div>

package/src/SliderTemplate.tsx

@@ -64,8 +64,12 @@ export function handles(this: Slider) {
 				max={this.max}
 				editable={this.editableTooltip}
 				followRef={this.shadowRoot?.querySelector("#handle1") as HTMLElement}
+				valueState={this.tooltipValueState}
 				onChange={this._onTooltipChange}
-				onForwardFocus={this._onTooltopForwardFocus}
+				onKeyDown={this._onTooltipKeydown}
+				onFocusChange={this._onTooltipFocusChange}
+				onOpen={this._onTooltipOpen}
+				onInput={this._onTooltipInput}
 			>
 			</SliderTooltip>
 		</div>

package/src/SliderTooltipTemplate.tsx

@@ -9,9 +9,10 @@ export default function SliderTooltipTemplate(this: SliderTooltip) {
 					value={this.value}
 					type="Number"
 					accessibleNameRef="ui5-slider-InputLabel"
-					onKeyDown={this._keydown}
 					onFocusIn={this._onInputFocusin}
 					onFocusOut={this._onInputFocusOut}
+					onKeyDown={this._onInputKeydown}
+					onInput={this._onInputInput}
 					tabIndex={-1}
 					data-sap-focus-ref
 					valueState={this.valueState}

package/src/TimePickerPopoverTemplate.tsx

@@ -5,6 +5,7 @@ import Icon from "./Icon.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import TimeSelectionClocks from "./TimeSelectionClocks.js";
 import TimeSelectionInputs from "./TimeSelectionInputs.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
 import alert from "@ui5/webcomponents-icons/dist/alert.js";
@@ -22,7 +23,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				opener={this}
 				open={this.open}
 				allowTargetOverlap={true}
-				_hideHeader={!this.hasValueStateText}
+				_hideHeader={this._shouldHideHeader}
 				hideArrow={true}
 				accessibleName={this.pickerAccessibleName}
 				onClose={this.onResponsivePopoverAfterClose}
@@ -31,6 +32,8 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 				onWheel={this._handleWheel}
 				onKeyDown={this._onkeydown}
 			>
+				{ !!this.showHeader && defaultHeader.call(this) }
+
 				{ this.shouldDisplayValueStateMessageInResponsivePopover && valueStateTextHeader.call(this) }
 
 				<TimeSelectionClocks
@@ -61,7 +64,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 					onWheel={this._handleWheel}
 					onKeyDown={this._onkeydown}
 				>
-					{ this.hasValueStateText && valueStateTextHeader.call(this, { "width": "100%" }) }
+					{ this.hasValueStateText && valueStateTextHeader.call(this) }
 
 					<div class="popover-content">
 						<TimeSelectionInputs
@@ -83,20 +86,37 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 	);
 }
 
+function defaultHeader(this: TimePicker) {
+	return (
+		<div slot="header" class="ui5-responsive-popover-header">
+			<div class="row">
+				<span>{this._headerTitleText}</span>
+				<Button
+					class="ui5-responsive-popover-close-btn"
+					icon={decline}
+					design="Transparent"
+					onClick={this._togglePicker}
+				>
+				</Button>
+			</div>
+		</div>
+	);
+}
+
 function valueStateMessage(this: TimePicker) {
 	return (
 		this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot>
 	);
 }
 
-function valueStateTextHeader(this: TimePicker, style?: Record<string, string>) {
+function valueStateTextHeader(this: TimePicker) {
 	if (!this.hasValueStateText) {
 		return;
 	}
 
 	return (
 		<div
-			slot="header"
+			slot={!this.showHeader ? "header" : undefined}
 			class={{
 				"ui5-popover-header": true,
 				"ui5-valuestatemessage-header": true,
@@ -106,7 +126,6 @@ function valueStateTextHeader(this: TimePicker, style?: Record<string, string>)
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			}}
-			style={style}
 		>
 			<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)}/>
 			{ valueStateMessage.call(this) }

package/src/i18n/messagebundle.properties

@@ -16,6 +16,12 @@ ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=Interactive Card Header
 #XACT: ARIA announcement for the Avatar default tooltip
 AVATAR_TOOLTIP=Avatar
 
+#XACT: ARIA type description for interactive Avatar (when the Avatar is a button)
+AVATAR_TYPE_BUTTON=Button
+
+#XACT: ARIA type description for non-interactive Avatar (when the Avatar is an image)
+AVATAR_TYPE_IMAGE=Image
+
 #XACT: ARIA announcement for the Avatar default tooltip
 AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL={0} displayed, {1} hidden.
 
@@ -525,6 +531,9 @@ TEXTAREA_CHARACTERS_LEFT={0} characters remaining
 #XTXT: Text for characters over
 TEXTAREA_CHARACTERS_EXCEEDED={0} characters over limit
 
+#XTXT: Text for characters over in form
+TEXTAREA_EXCEEDS_MAXLENGTH =Value too long by {0} characters.
+
 #XFLD: Timepicker slider header
 TIMEPICKER_HOURS_LABEL=Hours
 

package/src/themes/Button.css

@@ -377,7 +377,7 @@ bdi {
 	top:0;
 }
 
-:host([has-end-icon]) .ui5-button-root {
+:host([has-end-icon]:not([icon])) .ui5-button-root {
 	justify-content: flex-start;
 }
 
@@ -385,6 +385,6 @@ bdi {
 	justify-content: center;
 }
 
-:host([has-end-icon]) .ui5-button-end-icon {
+:host([has-end-icon]:not([icon])) .ui5-button-end-icon {
 	margin-left: auto;
 }

package/src/themes/CheckBox.css

@@ -1,5 +1,6 @@
 @import "./InvisibleTextStyles.css";
 @import "./TapHighlightColor.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/DatePicker.css

@@ -1,6 +1,7 @@
 @import "./InvisibleTextStyles.css";
 @import "./InputIcon.css";
 @import "./InputSharedStyles.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/RadioButton.css

@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/RatingIndicator.css

@@ -1,3 +1,5 @@
+ @import "./FormComponents.css";
+
 :host(:not([hidden])) {
 	display: inline-block;
 	font-size: 24px;

package/src/themes/SliderBase.css

@@ -1,4 +1,5 @@
 @import "./InvisibleTextStyles.css";
+@import "./FormComponents.css";
 
 :host([disabled]) {
 	opacity: var(--_ui5_slider_disabled_opacity);
@@ -9,7 +10,6 @@
 :host {
 	box-sizing: border-box;
 	cursor: pointer;
-	vertical-align: top;
 	width: 100%;
 }
 

package/src/themes/StepInput.css

@@ -5,7 +5,6 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	width: 100%;
 	line-height: normal;
 	letter-spacing: normal;
 	word-spacing: normal;

package/src/themes/Switch.css

@@ -1,5 +1,6 @@
 @import "./InvisibleTextStyles.css";
 @import "./TapHighlightColor.css";
+@import "./FormComponents.css";
 
 :host(:not([hidden])) {
 	display: inline-block;

package/src/themes/TableGrowing.css

@@ -6,6 +6,7 @@
 	flex-direction: column;
 	cursor: pointer;
 	border-bottom: 1px solid var(--sapList_BorderColor);
+	background: var(--sapList_Background);
 }
 
 #button:focus {

package/src/themes/Text.css

@@ -15,7 +15,7 @@
 }
 
 :host(:not([max-lines="1"])) {
-	display: -webkit-box;
+	display: -webkit-inline-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
 	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;

package/src/themes/sap_horizon/SliderBase-parameters.css

@@ -43,7 +43,7 @@
 
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_progress_focus_top: -15px;
+	--_ui5_range_slider_progress_focus_top: -1.063rem;
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
 	--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
@@ -64,7 +64,7 @@
 	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
-	--_ui5_range_slider_progress_focus_top: -.8125rem;
+	--_ui5_range_slider_progress_focus_top: -.938rem;
 	--_ui5_slider_tooltip_bottom: 1.75rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);

package/src/themes/sap_horizon_dark/SliderBase-parameters.css

@@ -43,7 +43,7 @@
 
 	--_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground);
 	--_ui5_range_slider_active_handle_icon_display: none;
-	--_ui5_range_slider_progress_focus_top: -15px;
+	--_ui5_range_slider_progress_focus_top: -1.063rem;
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);
 	--_ui5_range_slider_progress_focus_padding: 0 1rem 0 1rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
@@ -64,7 +64,7 @@
 	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px);
 	--_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px);
-	--_ui5_range_slider_progress_focus_top: -.8125rem;
+	--_ui5_range_slider_progress_focus_top: -.938rem;
 	--_ui5_slider_tooltip_bottom: 1.75rem;
 	--_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width));
 	--_ui5_range_slider_progress_focus_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 5px);