diff --git a/src/components/progress/base.ts b/src/components/progress/base.ts
index 6ab177569..f66e59077 100644
--- a/src/components/progress/base.ts
+++ b/src/components/progress/base.ts
@@ -115,10 +115,6 @@ export abstract class IgcProgressBaseComponent extends LitElement {
}
}
- protected slotChanged() {
- this.requestUpdate();
- }
-
constructor() {
super();
this.__internals = this.attachInternals();
@@ -127,6 +123,12 @@ export abstract class IgcProgressBaseComponent extends LitElement {
this.__internals.ariaValueMin = '0';
}
+ protected override createRenderRoot() {
+ const root = super.createRenderRoot();
+ root.addEventListener('slotchange', () => this.requestUpdate());
+ return root;
+ }
+
protected override updated() {
this._updateARIA();
}
@@ -201,7 +203,7 @@ export abstract class IgcProgressBaseComponent extends LitElement {
this.indeterminate || this.hideLabel || this.assignedElements.length;
return html`
-
+
${hasNoLabel
? nothing
: html`${this.renderLabelText()}`}
diff --git a/src/components/progress/circular-progress.ts b/src/components/progress/circular-progress.ts
index ee5c82771..5785d7a2d 100644
--- a/src/components/progress/circular-progress.ts
+++ b/src/components/progress/circular-progress.ts
@@ -20,19 +20,19 @@ import { all } from './themes/circular/themes.js';
* @slot - The text area container.
* @slot gradient - Customize the progress bar in order to use a color gradient instead of a solid color. Accepts `igc-circular-gradient` elements.
*
- * @csspart svg
- * @csspart gradient_start
- * @csspart gradient_end
- * @csspart track
- * @csspart fill
- * @csspart label
- * @csspart value
- * @csspart indeterminate
- * @csspart primary
- * @csspart danger
- * @csspart warning
- * @csspart info
- * @csspart success
+ * @csspart svg - The igc-circular-progress SVG element.
+ * @csspart gradient_start - The igc-circular-progress linear-gradient start color.
+ * @csspart gradient_end - The igc-circular-progress linear-gradient end color.
+ * @csspart track - The igc-circular-progress ring track area.
+ * @csspart fill - The igc-circular-progress indicator area.
+ * @csspart label - The igc-circular-progress label.
+ * @csspart value - The igc-circular-progress label value.
+ * @csspart indeterminate - The igc-circular-progress indeterminate state.
+ * @csspart primary - The igc-circular-progress primary state.
+ * @csspart danger - The igc-circular-progress error state.
+ * @csspart warning - The igc-circular-progress warning state.
+ * @csspart info - The igc-circular-progress info state.
+ * @csspart success - The igc-circular-progress success state.
*/
@themes(all)
export default class IgcCircularProgressComponent extends IgcProgressBaseComponent {
@@ -92,7 +92,7 @@ export default class IgcCircularProgressComponent extends IgcProgressBaseCompone
return html`
-
+
${this.renderDefaultSlot()}
`;
}
diff --git a/src/components/progress/linear-progress.ts b/src/components/progress/linear-progress.ts
index e0634a9da..02a0f3fd5 100644
--- a/src/components/progress/linear-progress.ts
+++ b/src/components/progress/linear-progress.ts
@@ -18,17 +18,17 @@ import { all } from './themes/linear/themes.js';
*
* @slot - The text area container.
*
- * @csspart track
- * @csspart fill
- * @csspart striped
- * @csspart label
- * @csspart value
- * @csspart indeterminate
- * @csspart primary
- * @csspart danger
- * @csspart warning
- * @csspart info
- * @csspart success
+ * @csspart track - The igc-linear-progress track area.
+ * @csspart fill - The igc-linear-progress indicator area.
+ * @csspart striped - The igc-linear-progress striped indicator.
+ * @csspart label - The igc-linear-progress label.
+ * @csspart value - The igc-linear-progress label value.
+ * @csspart indeterminate - The igc-linear-progress indeterminate state.
+ * @csspart primary - The igc-linear-progress indicator primary state.
+ * @csspart danger - The igc-linear-progress indicator error state.
+ * @csspart warning - The igc-linear-progress indicator warning state.
+ * @csspart info - The igc-linear-progress indicator info state.
+ * @csspart success - The igc-linear-progress indicator success state.
*/
@themes(all)
export default class IgcLinearProgressComponent extends IgcProgressBaseComponent {
@@ -61,7 +61,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
| 'bottom-end' = 'top-start';
protected override render() {
- const parts = {
+ const parts = partNameMap({
fill: true,
striped: this.striped,
indeterminate: this.indeterminate,
@@ -70,7 +70,7 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
danger: this.variant === 'danger',
warning: this.variant === 'warning',
info: this.variant === 'info',
- };
+ });
const animation = {
width: `${this.progress * 100}%`,
@@ -79,8 +79,8 @@ export default class IgcLinearProgressComponent extends IgcProgressBaseComponent
return html`
${this.renderDefaultSlot()}
`;