@ui5/webcomponents 2.8.0-rc.1 → 2.8.0-rc.2

package/dist/types/TableGrowingMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableGrowingMode.js","sourceRoot":"","sources":["../../src/types/TableGrowingMode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,gBAcJ;AAdD,WAAK,gBAAgB;IACpB;;;OAGG;IACH,qCAAiB,CAAA;IAEjB;;;;;OAKG;IACH,qCAAiB,CAAA;AAClB,CAAC,EAdI,gBAAgB,KAAhB,gBAAgB,QAcpB;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["/**\n * Growing mode of the <ui5-table> component.\n *\n * @public\n */\nenum TableGrowingMode {\n\t/**\n\t * Renders a growing button, which can be pressed to load more data.\n\t * @public\n\t */\n\tButton = \"Button\",\n\n\t/**\n\t * Scroll to load more data.\n\t *\n\t * **Note:** If the table is not scrollable, a growing button will be rendered instead to ensure growing functionality.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n}\n\nexport default TableGrowingMode;\n"]}
+{"version":3,"file":"TableGrowingMode.js","sourceRoot":"","sources":["../../src/types/TableGrowingMode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,IAAK,gBAcJ;AAdD,WAAK,gBAAgB;IACpB;;;OAGG;IACH,qCAAiB,CAAA;IAEjB;;;;;OAKG;IACH,qCAAiB,CAAA;AAClB,CAAC,EAdI,gBAAgB,KAAhB,gBAAgB,QAcpB;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["/**\n * Growing mode of the <ui5-table> component.\n *\n * @public\n * @experimental\n */\nenum TableGrowingMode {\n\t/**\n\t * Renders a growing button, which can be pressed to load more data.\n\t * @public\n\t */\n\tButton = \"Button\",\n\n\t/**\n\t * Scroll to load more data.\n\t *\n\t * **Note:** If the table is not scrollable, a growing button will be rendered instead to ensure growing functionality.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n}\n\nexport default TableGrowingMode;\n"]}

package/dist/types/TableOverflowMode.d.ts

@@ -2,6 +2,7 @@
  * Column mode of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 declare enum TableOverflowMode {
     /**

package/dist/types/TableOverflowMode.js

@@ -2,6 +2,7 @@
  * Column mode of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 var TableOverflowMode;
 (function (TableOverflowMode) {

package/dist/types/TableOverflowMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableOverflowMode.js","sourceRoot":"","sources":["../../src/types/TableOverflowMode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,iBAYJ;AAZD,WAAK,iBAAiB;IACrB;;;OAGG;IACH,sCAAiB,CAAA;IAEjB;;;OAGG;IACH,oCAAe,CAAA;AAChB,CAAC,EAZI,iBAAiB,KAAjB,iBAAiB,QAYrB;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Column mode of the <ui5-table> component.\n *\n * @public\n */\nenum TableOverflowMode {\n\t/**\n\t * Shows a scrollbar, when the table cannot fit all columns.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n\n\t/**\n\t * Pops in columns, that do not fit into the table anymore.\n\t * @public\n\t */\n\tPopin = \"Popin\"\n}\n\nexport default TableOverflowMode;\n"]}
+{"version":3,"file":"TableOverflowMode.js","sourceRoot":"","sources":["../../src/types/TableOverflowMode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,IAAK,iBAYJ;AAZD,WAAK,iBAAiB;IACrB;;;OAGG;IACH,sCAAiB,CAAA;IAEjB;;;OAGG;IACH,oCAAe,CAAA;AAChB,CAAC,EAZI,iBAAiB,KAAjB,iBAAiB,QAYrB;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Column mode of the <ui5-table> component.\n *\n * @public\n * @experimental\n */\nenum TableOverflowMode {\n\t/**\n\t * Shows a scrollbar, when the table cannot fit all columns.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n\n\t/**\n\t * Pops in columns, that do not fit into the table anymore.\n\t * @public\n\t */\n\tPopin = \"Popin\"\n}\n\nexport default TableOverflowMode;\n"]}

package/dist/types/TableSelectionMode.d.ts

@@ -2,6 +2,7 @@
  * Selection modes of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 declare enum TableSelectionMode {
     /**

package/dist/types/TableSelectionMode.js

@@ -2,6 +2,7 @@
  * Selection modes of the <ui5-table> component.
  *
  * @public
+ * @experimental
  */
 var TableSelectionMode;
 (function (TableSelectionMode) {

package/dist/types/TableSelectionMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSelectionMode.js","sourceRoot":"","sources":["../../src/types/TableSelectionMode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,kBAkBJ;AAlBD,WAAK,kBAAkB;IACtB;;;OAGG;IACH,mCAAa,CAAA;IAEb;;;OAGG;IACH,uCAAiB,CAAA;IAEjB;;;OAGG;IACH,2CAAqB,CAAA;AACtB,CAAC,EAlBI,kBAAkB,KAAlB,kBAAkB,QAkBtB;AAED,eAAe,kBAAkB,CAAC","sourcesContent":["/**\n * Selection modes of the <ui5-table> component.\n *\n * @public\n */\nenum TableSelectionMode {\n\t/**\n\t * Default mode (no selection).\n\t * @public\n\t */\n\tNone = \"None\",\n\n\t/**\n\t * Single selection mode (only one table row can be selected).\n\t * @public\n\t */\n\tSingle = \"Single\",\n\n\t/**\n\t * Multi selection mode (more than one table row can be selected).\n\t * @public\n\t */\n\tMultiple = \"Multiple\",\n}\n\nexport default TableSelectionMode;\n"]}
+{"version":3,"file":"TableSelectionMode.js","sourceRoot":"","sources":["../../src/types/TableSelectionMode.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,IAAK,kBAkBJ;AAlBD,WAAK,kBAAkB;IACtB;;;OAGG;IACH,mCAAa,CAAA;IAEb;;;OAGG;IACH,uCAAiB,CAAA;IAEjB;;;OAGG;IACH,2CAAqB,CAAA;AACtB,CAAC,EAlBI,kBAAkB,KAAlB,kBAAkB,QAkBtB;AAED,eAAe,kBAAkB,CAAC","sourcesContent":["/**\n * Selection modes of the <ui5-table> component.\n *\n * @public\n * @experimental\n */\nenum TableSelectionMode {\n\t/**\n\t * Default mode (no selection).\n\t * @public\n\t */\n\tNone = \"None\",\n\n\t/**\n\t * Single selection mode (only one table row can be selected).\n\t * @public\n\t */\n\tSingle = \"Single\",\n\n\t/**\n\t * Multi selection mode (more than one table row can be selected).\n\t * @public\n\t */\n\tMultiple = \"Multiple\",\n}\n\nexport default TableSelectionMode;\n"]}

package/dist/vscode.html-custom-data.json

@@ -3847,6 +3847,11 @@
             { "name": "Descending" }
           ]
         },
+        {
+          "name": "popin-hidden",
+          "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.",
+          "values": []
+        },
         {
           "name": "horizontal-align",
           "description": "Determines the horizontal alignment of table cells.",

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.8.0-rc.1",
+  "version": "2.8.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -8063,6 +8063,11 @@
                 "default": "\"None\""
               }
             },
+            {
+              "name": "popin-hidden",
+              "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "horizontal-align",
               "description": "Determines the horizontal alignment of table cells.",
@@ -8111,6 +8116,11 @@
                 "description": "Defines the sort indicator of the column.",
                 "value": { "type": "\"None\" | \"Ascending\" | \"Descending\"" }
               },
+              {
+                "name": "popin-hidden",
+                "description": "Defines if the column is hidden in the popin.\n\n**Note:** Please be aware that hiding the column in the popin might lead to accessibility issues as\nusers might not be able to access the content of the column on small screens.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "horizontal-align",
                 "description": "Determines the horizontal alignment of table cells.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.8.0-rc.1",
+  "version": "2.8.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -32,7 +32,7 @@
     "test:cypress:suite-1": "nps test-cy-ci-suite-1",
     "test:cypress:suite-2": "nps test-cy-ci-suite-2",
     "test:cypress:open": "nps test-cy-open",
-    "test:cypress:single": "nps test-cy-single",
+    "test:cypress:single": "npx cypress run --component --browser chrome --spec",
     "test:vitest": "yarn vitest run",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "create-ui5-element": "wc-create-ui5-element",
@@ -54,19 +54,19 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.8.0-rc.1",
-    "@ui5/webcomponents-icons": "2.8.0-rc.1",
-    "@ui5/webcomponents-icons-business-suite": "2.8.0-rc.1",
-    "@ui5/webcomponents-icons-tnt": "2.8.0-rc.1",
-    "@ui5/webcomponents-localization": "2.8.0-rc.1",
-    "@ui5/webcomponents-theming": "2.8.0-rc.1"
+    "@ui5/webcomponents-base": "2.8.0-rc.2",
+    "@ui5/webcomponents-icons": "2.8.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.8.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.8.0-rc.2",
+    "@ui5/webcomponents-localization": "2.8.0-rc.2",
+    "@ui5/webcomponents-theming": "2.8.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.8.0-rc.1",
+    "@ui5/webcomponents-tools": "2.8.0-rc.2",
     "chromedriver": "^132.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "3c8f6db1b5cc6e4f23423ab0075c009e9e4965e4"
+  "gitHead": "3f2bb39755164a9074948fca90a65818ac89af7c"
 }

package/src/AvatarTemplate.tsx

@@ -18,7 +18,7 @@ export default function AvatarTemplate(this: Avatar) {
 				<slot></slot>
 				:
 				<>
-					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon}></Icon> }
+					{ this.icon && <Icon class="ui5-avatar-icon" name={this.icon} accessibleName={this.accessibleName}></Icon> }
 
 					{ this.initials &&
 					<>

package/src/ExpandableTextTemplate.tsx

@@ -23,7 +23,6 @@ export default function ExpandableTextTemplate(this: ExpandableText) {
 					accessibleName={this._accessibleNameForToggle}
 					accessibilityAttributes={this._accessibilityAttributesForToggle}
 					onClick={this._handleToggleClick}
-					onMouseDown={this._handleToggleMousedown}
 				>
 					{this._textForToggle}
 				</Link>

package/src/InputPopoverTemplate.tsx

@@ -1,3 +1,4 @@
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import type Input from "./Input.js";
 import Icon from "./Icon.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
@@ -8,10 +9,12 @@ import information from "@ui5/webcomponents-icons/dist/information.js";
 import Popover from "./Popover.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 
-export default function InputPopoverTemplate(this: Input) {
+export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult }) {
+	const suggestionsList = hooks?.suggestionsList;
+
 	return (
 		<>
-			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, valueStateMessage, valueStateMessageInputIcon) }
+			{this._effectiveShowSuggestions && this.Suggestions?.template.call(this, { suggestionsList, valueStateMessage, valueStateMessageInputIcon }) }
 
 			{this.hasValueStateMessage &&
 				<Popover

package/src/InputTemplate.tsx

@@ -1,11 +1,13 @@
 import type Input from "./Input.js";
+import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import Icon from "./Icon.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import InputPopoverTemplate from "./InputPopoverTemplate.js";
 
-type TemplateHook = () => void;
+type TemplateHook = () => JsxTemplateResult;
 
-export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook }) {
+export default function InputTemplate(this: Input, hooks?: { preContent: TemplateHook, postContent: TemplateHook, suggestionsList?: TemplateHook }) {
+	const suggestionsList = hooks?.suggestionsList;
 	const preContent = hooks?.preContent || defaultPreContent;
 	const postContent = hooks?.postContent || defaultPostContent;
 
@@ -104,7 +106,7 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 				</div>
 			</div>
 
-			{ InputPopoverTemplate.call(this) }
+			{ InputPopoverTemplate.call(this, { suggestionsList }) }
 		</>
 	);
 }

package/src/ListTemplate.tsx

@@ -54,7 +54,7 @@ export default function ListTemplate(this: List) {
 						<slot></slot>
 
 						{this.showNoDataText &&
-							<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata">
+							<li tabindex={0} id={`${this._id}-nodata`} class="ui5-list-nodata" role="listitem">
 								<div id={`${this._id}-nodata-text`} class="ui5-list-nodata-text">
 									{this.noDataText}
 								</div>

package/src/features/InputSuggestionsTemplate.tsx

@@ -7,7 +7,11 @@ import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import Button from "../Button.js";
 
-export default function InputSuggestionsTemplate(this: Input, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string) {
+export default function InputSuggestionsTemplate(this: Input, hooks?: { suggestionsList?: (this: Input) => JsxTemplateResult, valueStateMessage: (this: Input) => JsxTemplateResult, valueStateMessageInputIcon: (this: Input) => string }) {
+	const suggestionsList = hooks?.suggestionsList || defaultSuggestionsList;
+	const valueStateMessage = hooks?.valueStateMessage;
+	const valueStateMessageInputIcon = hooks?.valueStateMessageInputIcon;
+
 	return (
 		<ResponsivePopover
 			class={this.classes.popover}
@@ -55,8 +59,8 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 
 					{this.hasValueStateMessage &&
 					<div class={this.classes.popoverValueState} style={this.styles.suggestionPopoverHeader}>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
-						{ this.open && valueStateMessage.call(this) }
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+						{ this.open && valueStateMessage?.call(this) }
 					</div>
 					}
 				</>
@@ -72,8 +76,8 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 						}}
 						style={this.styles.suggestionPopoverHeader}
 					>
-						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
-						{ this.open && valueStateMessage.call(this) }
+						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon?.call(this)} />
+						{ this.open && valueStateMessage?.call(this) }
 					</div>
 			}
 
@@ -93,7 +97,7 @@ export default function InputSuggestionsTemplate(this: Input, valueStateMessage:
 	);
 }
 
-function suggestionsList(this: Input) {
+function defaultSuggestionsList(this: Input) {
 	return (
 		<List
 			separators={this.suggestionSeparators}

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -413,3 +413,5 @@ TABLE_MORE=[[[Μŏŗē]]]
 TABLE_MORE_DESCRIPTION=[[[Ţŏ ĺŏąƌ ɱŏŗē ŗŏŵş, ρŗēşş Ĕŋţēŗ ŏŗ Ŝρąċē∙∙∙∙∙∙∙∙∙∙∙∙∙∙]]]
 TABLE_ROW_ACTIONS=[[[Řŏŵ Āċţįŏŋş∙∙∙∙∙∙∙∙]]]
 TABLE_NAVIGATION=[[[Ńąʋįğąţįŏŋ∙∙∙∙]]]
+TABLE_GENERATED_BY_AI=[[[Ģēŋēŗąţēƌ ƃŷ ĀĬ∙∙∙∙]]]
+TABLE_COLUMN_HEADER_ROW=[[[Ĉŏĺűɱŋ Ĥēąƌēŗ Řŏŵ∙∙∙∙∙∙∙]]]

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -413,3 +413,5 @@ TABLE_MORE=‌​​​‍​​​‍‍‍‌​‌​​‍​‌‍
 TABLE_MORE_DESCRIPTION=‌​​‌‍​‍‍​​‍‍​‍​​​‌‍​‌‌‌‍‌​‌‍​‍‍​‍‌‌​​‍‍​‌To load more rows, press Enter or Space
 TABLE_ROW_ACTIONS=‌‌‍‍‍‍​‍‍​‌‌‌​‌‌‌‍‍‍‌‍​‍‍​‌‍‍​‍‌‌‍‌‌‍‍Row Actions
 TABLE_NAVIGATION=‌‌​​‍​‌‍​​‌​​‌‍‌‌‌‍​‍‍​‍​‍‍‍‍‌‍‍‍‌‍​‌​Navigation
+TABLE_GENERATED_BY_AI=‌​‌‌​​‌​​‌‍​‌​​​​​​​​‍‍‌​​​‍‍‍‌‌​​​‍‌‍​‍Generated by AI
+TABLE_COLUMN_HEADER_ROW=‍​​​‍‌‌​‍‍‌​‍‌‌‍‌​‍‍‍‌​‌‍‌‌​‌‌‍‌‌​‍​​‌​‍Column Header Row

package/src/i18n/messagebundle_en_US_saptrc.properties

@@ -413,3 +413,5 @@ TABLE_MORE=e9f2uqDaKq//pPHVgPgVUQ_More
 TABLE_MORE_DESCRIPTION=07V7nFnmmsXPc7e5e1Lgxw_To load more rows, press Enter or Space
 TABLE_ROW_ACTIONS=d+acSF9P9XYhZsNi2A7O8Q_Row Actions
 TABLE_NAVIGATION=hr4qP8qbNMvgblRgE3rJwA_Navigation
+TABLE_GENERATED_BY_AI=33i9tgFMUlv4AgS6gWZLzw_Generated by AI
+TABLE_COLUMN_HEADER_ROW=VyPlAlHmZmjvfER6MHif7g_Column Header Row

package/src/themes/CheckBox.css

@@ -115,7 +115,7 @@
 	position: relative;
 	display: inline-flex;
 	align-items: center;
-	width: 100%;
+	max-width: 100%;
 	min-height: var(--_ui5_checkbox_width_height);
 	min-width: var(--_ui5_checkbox_width_height);
 	padding: 0 var(--_ui5_checkbox_wrapper_padding);

package/src/themes/List.css

@@ -90,6 +90,7 @@
 	height: var(--_ui5_list_no_data_height);
 	font-size: var(--_ui5_list_no_data_font_size);
 	font-family: "72override", var(--sapFontFamily);
+	position: relative;
 }
 
 .ui5-list-nodata:focus::after {
@@ -98,7 +99,6 @@
 	position: absolute;
 	inset: 0.125rem;
 	pointer-events: none;
-	top: calc(50% + 0.125rem);
 }
 
 .ui5-list-nodata-text {

package/src/themes/Tag.css

@@ -14,7 +14,7 @@
 
 .ui5-tag-root {
 	display: flex;
-	align-items: center;
+	align-items: baseline;
 	justify-content: center;
 	width: 100%;
 	min-width: 1.125em;
@@ -74,11 +74,6 @@
 	align-self: flex-start;
 }
 
-:host([wrapping-type="None"]) [ui5-icon],
-:host([wrapping-type="None"]) ::slotted([ui5-icon]) {
-	align-self: auto;
-}
-
 /* Value State Design Types */
 .ui5-tag-root {
 	background-color: var(--sapNeutralBackground);