refactor(ui5-option): remove disabled property

packages/main/src/Option.ts

@@ -29,17 +29,6 @@ class Option extends UI5Element implements IOption {
 	@property({ type: Boolean })
 	selected!: boolean;
 
-	/**
-	 * Defines whether the component is in disabled state.
-	 *
-	 * **Note:** A disabled component is hidden.
-	 * @default false
-	 * @public
-	 * @since 1.0.0-rc.12
-	 */
-	@property({ type: Boolean })
-	disabled!: boolean;
-
 	/**
 	 * Defines the tooltip of the component.
 	 * @default ""

packages/main/src/ProgressIndicator.hbs

@@ -7,7 +7,7 @@
      aria-disabled="{{_ariaDisabled}}"
      aria-label="{{accessibleName}}"
 >
-    <div class="ui5-progress-indicator-bar" style="{{styles.bar}}">
+    <div class="ui5-progress-indicator-bar" part="bar" style="{{styles.bar}}">
         {{#unless showValueInRemainingBar}}
            {{> valueLabel}}
         {{/unless}}

packages/main/src/ProgressIndicator.ts

@@ -35,6 +35,7 @@ import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js";
  * ### ES6 Module Import
  *
  * `import "@ui5/webcomponents/dist/ProgressIndicator.js";`
+ * @csspart bar - Used to style the main bar of the `ui5-progress-indicator`
  * @csspart remaining-bar - Used to style the remaining bar of the `ui5-progress-indicator`
  * @constructor
  * @extends UI5Element

packages/main/src/Select.ts

@@ -79,7 +79,6 @@ import type { SelectMenuOptionClick, SelectMenuChange } from "./SelectMenu.js";
  */
 interface IOption extends UI5Element {
 	selected: boolean,
-	disabled: boolean,
 	title: string,
 	icon?: string | null,
 	value: string,
@@ -487,7 +486,7 @@ class Select extends UI5Element implements IFormElement {
 	 */
 	set value(newValue: string) {
 		const menu = this._getSelectMenu();
-		const selectOptions = Array.from(menu ? menu.children : this.children).filter(option => !option.getAttribute("disabled")) as Array<IOption>;
+		const selectOptions = Array.from(menu ? menu.children : this.children) as Array<IOption>;
 
 		selectOptions.forEach(option => {
 			option.selected = !!((option.getAttribute("value") || option.textContent) === newValue);
@@ -582,7 +581,7 @@ class Select extends UI5Element implements IFormElement {
 	_syncSelection() {
 		let lastSelectedOptionIndex = -1,
 			firstEnabledOptionIndex = -1;
-		const options = this._filteredItems;
+		const options = this.options;
 		const syncOpts = options.map((opt, index) => {
 			if (opt.selected) {
 				lastSelectedOptionIndex = index;
@@ -933,7 +932,7 @@ class Select extends UI5Element implements IFormElement {
 		if (menu) {
 			return menu.options;
 		}
-		return this._filteredItems;
+		return this.options;
 	}
 
 	get hasCustomLabel() {
@@ -1056,8 +1055,8 @@ class Select extends UI5Element implements IFormElement {
 				"max-width": `${this.offsetWidth}px`,
 			},
 			responsivePopoverHeader: {
-				"display": this._filteredItems.length && this._listWidth === 0 ? "none" : "inline-block",
-				"width": `${this._filteredItems.length ? this._listWidth : this.offsetWidth}px`,
+				"display": this.options.length && this._listWidth === 0 ? "none" : "inline-block",
+				"width": `${this.options.length ? this._listWidth : this.offsetWidth}px`,
 			},
 			responsivePopover: {
 				"min-width": `${this.offsetWidth}px`,
@@ -1094,10 +1093,6 @@ class Select extends UI5Element implements IFormElement {
 		return isPhone();
 	}
 
-	get _filteredItems() {
-		return this.options.filter(option => !option.disabled);
-	}
-
 	itemSelectionAnnounce() {
 		let text;
 		const optionsCount = this.selectOptions.length;

packages/main/test/pages/ProgressIndicator.html

@@ -104,6 +104,10 @@
 	<br />
 	<ui5-progress-indicator value="25" class="progressindicator2auto"></ui5-progress-indicator>
 	<br />
+	Custom Color
+	<br />
+	<ui5-progress-indicator value="25" class="progressindicator3auto"></ui5-progress-indicator>
+	<br />
 	Test progress indicator
 	<br />
 	<ui5-progress-indicator id="test-progress-indicator"></ui5-progress-indicator>

packages/main/test/pages/Select.html

@@ -112,7 +112,7 @@ <h2> Open event counter holder</h2>
 
 	<h2> Close event counter holder</h2>
 	<ui5-input id="inputResultClose"></ui5-input>
-	
+
 	<section>
 		<h3>Select aria-label and aria-labelledby</h3>
 		<span id="infoText">info text</span>
@@ -145,7 +145,7 @@ <h3>Select in Compact</h3>
 <section>
 	<h2>Select with a disabled option</h2>
 	<ui5-select id="mySelect5">
-		<ui5-option disabled>Cozy</ui5-option>
+		<ui5-option >Cozy</ui5-option>
 		<ui5-option selected>Compact</ui5-option>
 		<ui5-option>Condensed</ui5-option>
 	</ui5-select>

packages/main/test/pages/styles/ProgressIndicator.css

@@ -6,3 +6,12 @@
     height: 50px;
     width: 200px;
 }
+
+.progressindicator3auto::part(bar),
+.progressindicator3auto::part(remaining-bar)::after {
+    background-color: rgb(255, 0, 0);
+}
+
+.progressindicator3auto::part(remaining-bar) {
+    background-color: rgb(255, 225, 225);
+}

packages/playground/_stories/main/Select/Option/Option.stories.ts

@@ -13,14 +13,13 @@ export default {
   title: "Main/Select/Option",
   component: "Option",
   argTypes,
-  
+
 } as Meta<Option>;
 
 const Template: UI5StoryArgs<Option, StoryArgsSlots> = (args) => {
   return html`<ui5-select>
    <ui5-option
    additional-text="${ifDefined(args.additionalText)}"
-   ?disabled="${ifDefined(args.disabled)}"
    icon="${ifDefined(args.icon)}"
    ?selected="${ifDefined(args.selected)}"
    value="${ifDefined(args.value)}"