@ui5/webcomponents 1.24.13 → 1.24.14

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": "1.24.13",
+  "version": "1.24.14",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2515,7 +2515,7 @@
         },
         {
           "name": "ui5-dialog",
-          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that an user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the\n`ui5-dialog` on full screen.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n\n**Note:** We recommend placing popup-like components (`ui5-dialog` and `ui5-popover`)\noutside any other components. Preferably, the popup-like components should be placed\nin an upper level HTML element. Otherwise, in some cases the parent HTML elements can break\nthe position and/or z-index management of the popup-like components.\n\n**Note:** We don't recommend nesting popup-like components (`ui5-dialog`, `ui5-popover`).\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **after-open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **after-close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **show(preventInitialFocus: _boolean_): _Promise<void>_** - Shows the dialog.\n- **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n- **isOpen(): _boolean_** - Tells if the component is opened\n- **close(): _void_** - Closes the popup.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that an user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n\n**Note:** We recommend placing popup-like components (`ui5-dialog` and `ui5-popover`)\noutside any other components. Preferably, the popup-like components should be placed\nin an upper level HTML element. Otherwise, in some cases the parent HTML elements can break\nthe position and/or z-index management of the popup-like components.\n\n**Note:** We don't recommend nesting popup-like components (`ui5-dialog`, `ui5-popover`).\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **after-open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **after-close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **show(preventInitialFocus: _boolean_): _Promise<void>_** - Shows the dialog.\n- **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n- **isOpen(): _boolean_** - Tells if the component is opened\n- **close(): _void_** - Closes the popup.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -2525,7 +2525,7 @@
             },
             {
               "name": "stretch",
-              "description": "Determines whether the component should be stretched to fullscreen.\n\n**Note:** The component will be stretched to approximately\n90% of the viewport.",
+              "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -2617,7 +2617,7 @@
               },
               {
                 "name": "stretch",
-                "description": "Determines whether the component should be stretched to fullscreen.\n\n**Note:** The component will be stretched to approximately\n90% of the viewport.",
+                "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.",
                 "value": { "type": "boolean" }
               },
               {
@@ -4868,7 +4868,7 @@
             },
             {
               "name": "readonly",
-              "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+              "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -4878,7 +4878,7 @@
             },
             {
               "name": "checked",
-              "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.",
+              "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -4938,7 +4938,7 @@
               },
               {
                 "name": "readonly",
-                "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+                "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.",
                 "value": { "type": "boolean" }
               },
               {
@@ -4948,7 +4948,7 @@
               },
               {
                 "name": "checked",
-                "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.",
+                "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.",
                 "value": { "type": "boolean" }
               },
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "1.24.13",
+  "version": "1.24.14",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -48,16 +48,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "1.24.13",
-    "@ui5/webcomponents-icons": "1.24.13",
-    "@ui5/webcomponents-icons-business-suite": "1.24.13",
-    "@ui5/webcomponents-icons-tnt": "1.24.13",
-    "@ui5/webcomponents-localization": "1.24.13",
-    "@ui5/webcomponents-theming": "1.24.13"
+    "@ui5/webcomponents-base": "1.24.14",
+    "@ui5/webcomponents-icons": "1.24.14",
+    "@ui5/webcomponents-icons-business-suite": "1.24.14",
+    "@ui5/webcomponents-icons-tnt": "1.24.14",
+    "@ui5/webcomponents-localization": "1.24.14",
+    "@ui5/webcomponents-theming": "1.24.14"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.24.13",
-    "chromedriver": "^129.0.0"
+    "@ui5/webcomponents-tools": "1.24.14",
+    "chromedriver": "^131.0.0"
   },
-  "gitHead": "99eb83b61ce7c554eb03e8b883057efd239c1203"
+  "gitHead": "daa060cd1fef57d639aee0e60cdc750dc1b648b8"
 }

package/src/RadioButton.hbs

@@ -17,7 +17,7 @@
 			<circle part="outer-ring" class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
 			<circle part="inner-ring" class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
-		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{effectiveAriaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
+		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}

package/src/themes/Dialog.css

@@ -21,6 +21,7 @@
 	max-height: 100%;
 	max-width: 100%;
 	border-radius: 0;
+	min-width: 0; /*this is for preventing the dialog to hold its width on small screens*/
 }
 
 :host([draggable]) .ui5-popup-header-root,

package/src/themes/ListItem.css

@@ -19,6 +19,10 @@
 /* hovered */
 :host([actionable]:not([active]):not([selected]):hover) {
 	background : var(--sapList_Hover_Background);
+
+	.ui5-li-additional-text {
+		text-shadow: var(--sapContent_TextShadow);
+	}
 }
 
 /* focused */
@@ -49,6 +53,10 @@
 	color: var(--sapList_Active_TextColor);
 }
 
+:host([active][actionable]) .ui5-li-additional-text {
+	text-shadow: none;
+}
+
 /* [ui5-li]: additionalTextState */
 :host([additional-text-state="Warning"]) .ui5-li-additional-text {
 	color: var(--sapCriticalTextColor);

package/src/themes/ListItemBase.css

@@ -12,6 +12,10 @@
 /* selected */
 :host([selected]) {
 	background: var(--sapList_SelectionBackgroundColor);
+
+	.ui5-li-additional-text {
+		text-shadow: var(--sapContent_TextShadow);
+	}
 }
 
 :host([has-border]) {

package/src/themes/Table.css

@@ -10,13 +10,17 @@
 	border-bottom: var(--ui5_table_bottom_border);
 }
 
-.ui5-table-root,
-.ui5-table-busy-indicator {
+.ui5-table-root {
 	width: 100%;
 	height: 100%;
+	display: flex;
 	box-sizing: border-box;
 }
 
+.ui5-table-busy-indicator {
+	flex-grow: 1;
+}
+
 table {
 	width: 100%;
 	border-spacing: 0;

package/src/themes/base/rtl-parameters.css

@@ -22,7 +22,8 @@
 	--_ui5-shellbar-notification-btn-count-offset: -0.125rem;
 }
 
-[dir="rtl"] {
+[dir="rtl"],
+[dir="rtl"] :host {
 	--_ui5_icon_transform_scale: scale(-1, 1);
 	--_ui5_panel_toggle_btn_rotation: var(--_ui5_rotation_minus_90deg);
 	--_ui5_li_notification_group_toggle_btn_rotation: var(--_ui5_rotation_minus_90deg);