@incursa/ui-kit 1.6.1 → 1.7.0

package/src/inc-design-language.scss

@@ -23,10 +23,10 @@
     --inc-control-surface-border: var(--inc-border-default);
     --inc-surface-contrast: var(--bs-secondary);
     --inc-surface-contrast-rgb: var(--bs-secondary-rgb);
-    --inc-surface-contrast-hover: #31384a;
-    --inc-surface-contrast-hover-rgb: 49, 56, 74;
-    --inc-surface-contrast-active: #2e3542;
-    --inc-surface-contrast-active-rgb: 46, 53, 66;
+    --inc-surface-contrast-hover: #273042;
+    --inc-surface-contrast-hover-rgb: 39, 48, 66;
+    --inc-surface-contrast-active: #1f2737;
+    --inc-surface-contrast-active-rgb: 31, 39, 55;
     --inc-surface-contrast-text: var(--inc-text-inverse);
     --inc-surface-contrast-text-rgb: var(--inc-text-inverse-rgb);
     --inc-surface-contrast-border: var(--bs-secondary);
@@ -49,10 +49,10 @@
     --inc-control-surface-border: var(--inc-border-default);
     --inc-surface-contrast: var(--bs-gray-100);
     --inc-surface-contrast-rgb: 253, 253, 253;
-    --inc-surface-contrast-hover: var(--bs-gray-200);
-    --inc-surface-contrast-hover-rgb: 246, 246, 246;
-    --inc-surface-contrast-active: var(--bs-gray-300);
-    --inc-surface-contrast-active-rgb: 241, 241, 241;
+    --inc-surface-contrast-hover: #dfe3e8;
+    --inc-surface-contrast-hover-rgb: 223, 227, 232;
+    --inc-surface-contrast-active: #c8d0d9;
+    --inc-surface-contrast-active-rgb: 200, 208, 217;
     --inc-surface-contrast-text: var(--bs-dark);
     --inc-surface-contrast-text-rgb: 18, 19, 22;
     --inc-surface-contrast-border: var(--bs-gray-400);
@@ -455,6 +455,7 @@
     justify-content: center;
     gap: 0.375rem;
     vertical-align: middle;
+    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
 
     &--primary {
         @extend .btn-primary;
@@ -467,7 +468,7 @@
         --bs-btn-border-color: var(--inc-surface-contrast-border);
         --bs-btn-hover-color: var(--inc-surface-contrast-text);
         --bs-btn-hover-bg: var(--inc-surface-contrast-hover);
-        --bs-btn-hover-border-color: var(--inc-surface-contrast-border);
+        --bs-btn-hover-border-color: var(--inc-surface-contrast-hover);
         --bs-btn-focus-shadow-rgb: var(--inc-surface-contrast-rgb);
         --bs-btn-active-color: var(--inc-surface-contrast-text);
         --bs-btn-active-bg: var(--inc-surface-contrast-active);
@@ -475,6 +476,20 @@
         --bs-btn-disabled-color: var(--inc-surface-contrast-text);
         --bs-btn-disabled-bg: var(--inc-surface-contrast);
         --bs-btn-disabled-border-color: var(--inc-surface-contrast-border);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.1);
+
+        &:hover,
+        &:focus-visible {
+            --bs-btn-hover-bg: var(--inc-surface-contrast-hover);
+            --bs-btn-hover-border-color: var(--inc-surface-contrast-hover);
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.1);
+        }
+
+        &:active,
+        &.active,
+        &:focus:active {
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
+        }
     }
 
     &--success {
@@ -518,14 +533,14 @@
     &--outline-secondary {
         @extend .btn-outline-secondary;
         --bs-btn-color: var(--inc-text-primary);
-        --bs-btn-border-color: var(--inc-border-default);
+        --bs-btn-border-color: var(--inc-border-subtle);
         --bs-btn-hover-color: var(--inc-text-primary);
-        --bs-btn-hover-bg: var(--inc-surface-secondary);
-        --bs-btn-hover-border-color: var(--inc-border-default);
+        --bs-btn-hover-bg: rgba(var(--inc-surface-strong-rgb), 0.12);
+        --bs-btn-hover-border-color: rgba(var(--inc-surface-strong-rgb), 0.32);
         --bs-btn-focus-shadow-rgb: var(--inc-surface-strong-rgb);
         --bs-btn-active-color: var(--inc-text-primary);
-        --bs-btn-active-bg: var(--inc-surface-muted);
-        --bs-btn-active-border-color: var(--inc-border-default);
+        --bs-btn-active-bg: rgba(var(--inc-surface-strong-rgb), 0.18);
+        --bs-btn-active-border-color: rgba(var(--inc-surface-strong-rgb), 0.4);
         --bs-btn-disabled-color: var(--inc-text-muted);
         --bs-btn-disabled-border-color: var(--inc-border-subtle);
     }
@@ -555,6 +570,17 @@
         --bs-btn-bg: rgba(var(--inc-surface-secondary-rgb), 0.74);
         --bs-btn-disabled-bg: rgba(var(--inc-surface-secondary-rgb), 0.54);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+
+        &:hover,
+        &:focus-visible {
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+        }
+
+        &:active,
+        &.active,
+        &:focus:active {
+            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
+        }
     }
 
     &--sm {
@@ -653,9 +679,10 @@
     }
 
     &--warning {
-        background-color: $inc-warning-50;
-        color: $inc-warning-700;
-        border: 1px solid $inc-warning-700;
+        background-color: #fff8df;
+        color: #765000;
+        border: 1px solid #b67b00;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 1px 2px rgba(182, 123, 0, 0.12);
     }
 
     &--info {
@@ -671,6 +698,8 @@
 
 .inc-alert {
     @extend .alert;
+    position: relative;
+    overflow: hidden;
     border-radius: $inc-radius-md;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
     background-clip: padding-box;
@@ -710,6 +739,18 @@
     &__heading {
         @extend .alert-heading;
     }
+
+    &__progress {
+        position: absolute;
+        inset-inline: 0;
+        inset-block-end: 0;
+        height: 0.1875rem;
+        background: currentColor;
+        opacity: 0.2;
+        transform-origin: left center;
+        transform: scaleX(1);
+        pointer-events: none;
+    }
 }
 
 .alert:empty {
@@ -2422,7 +2463,7 @@
             border: 1px solid var(--inc-border-subtle);
             cursor: pointer;
             appearance: none;
-            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
             transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 
             .inc-tab-icon {
@@ -2433,7 +2474,7 @@
                 color: var(--inc-text-primary);
                 background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 1), rgba(var(--inc-surface-muted-rgb), 0.9));
                 border-color: var(--inc-border-default);
-                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 2px 4px rgba(var(--inc-shadow-rgb), 0.07);
+                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
 
                 .inc-tab-icon {
                     color: var(--bs-primary);
@@ -2448,7 +2489,7 @@
                 border-bottom-color: var(--inc-surface-panel);
                 position: relative;
                 z-index: 1;
-                box-shadow: var(--inc-surface-panel-shadow-raised);
+                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
                 transform: translateY(-1px);
             }
         }
@@ -2462,7 +2503,7 @@
         border-top-left-radius: 0;
         border-top-right-radius: $inc-radius-panel;
         margin-top: -1px;
-        box-shadow: var(--inc-surface-panel-shadow-raised);
+        box-shadow: 0 0.125rem 0.25rem rgba(var(--inc-shadow-rgb), 0.06), 0 0.875rem 2rem rgba(var(--inc-shadow-rgb), 0.06);
     }
 }
 
@@ -3099,6 +3140,8 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     display: inline-flex;
     align-items: center;
     gap: 0.625rem;
+    width: max-content;
+    max-width: calc(100vw - 2rem);
     padding: 0.5rem 0.75rem;
     border: 1px solid var(--inc-border-subtle);
     border-radius: 999px;
@@ -3116,6 +3159,7 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
         bottom: auto;
         z-index: auto;
         vertical-align: middle;
+        max-width: 100%;
     }
 
     &__countdown,
@@ -3146,6 +3190,10 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     }
 
     &__toggle {
+        --bs-btn-color: var(--inc-text-primary);
+        --bs-btn-hover-color: var(--inc-text-primary);
+        --bs-btn-active-color: var(--inc-text-primary);
+        order: -1;
         flex: 0 0 auto;
         width: 1.875rem;
         height: 1.875rem;
@@ -3164,31 +3212,33 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
             font-size: 0.6875rem;
             line-height: 1;
         }
+
+        &:hover,
+        &:focus-visible,
+        &:active {
+            color: var(--inc-text-primary);
+        }
     }
 
     &__toggle-icon {
-        position: relative;
         display: inline-flex;
-        width: 0.75rem;
-        height: 0.75rem;
-        color: currentColor;
-
-        &::before,
-        &::after {
-            content: "";
-            position: absolute;
-            inset-block: 0.0625rem;
-            width: 0.1875rem;
-            border-radius: 999px;
-            background: currentColor;
-        }
+        align-items: center;
+        justify-content: center;
+        width: 1rem;
+        height: 1rem;
+        color: var(--inc-text-primary);
 
-        &::before {
-            left: 0.125rem;
+        .inc-auto-refresh__toggle:hover &,
+        .inc-auto-refresh__toggle:focus-visible &,
+        .inc-auto-refresh__toggle:active & {
+            color: var(--inc-text-primary);
         }
 
-        &::after {
-            right: 0.125rem;
+        svg {
+            display: block;
+            width: 1rem;
+            height: 1rem;
+            fill: currentColor;
         }
     }
 
@@ -3202,21 +3252,18 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
 
         .inc-auto-refresh__toggle {
             color: var(--bs-warning-text-emphasis);
-        }
 
-        .inc-auto-refresh__toggle-icon {
-            width: 0.7rem;
-            height: 0.7rem;
-
-            &::before {
-                inset: 0;
-                width: 100%;
-                background: currentColor;
-                clip-path: polygon(14% 8%, 14% 92%, 86% 50%);
+            &:hover,
+            &:focus-visible,
+            &:active {
+                color: var(--bs-warning-text-emphasis);
             }
+        }
 
-            &::after {
-                display: none;
+        .inc-auto-refresh__toggle-icon {
+            color: var(--inc-text-primary);
+            svg {
+                transform: translateX(0.03125rem);
             }
         }
     }
@@ -3224,6 +3271,16 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
     &.is-loading {
         border-color: var(--bs-primary-border-subtle);
         box-shadow: 0 0.9rem 1.75rem rgba(var(--bs-primary-rgb), 0.14);
+
+        .inc-auto-refresh__toggle {
+            color: var(--inc-text-primary);
+
+            &:hover,
+            &:focus-visible,
+            &:active {
+                color: var(--inc-text-primary);
+            }
+        }
     }
 }
 
@@ -4543,6 +4600,22 @@ body.inc-offcanvas-open {
     }
 }
 
+[data-bs-theme="dark"] {
+    .inc-filter-chip {
+        &--accent {
+            border-color: rgba(var(--bs-primary-rgb), 0.5);
+            background: rgba(var(--bs-primary-rgb), 0.4);
+            color: var(--bs-white);
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.12);
+        }
+
+        &--accent .inc-filter-chip__remove {
+            color: currentColor;
+            opacity: 0.88;
+        }
+    }
+}
+
 .inc-state-panel {
     display: flex;
     flex-direction: column;
@@ -4969,20 +5042,20 @@ body.inc-offcanvas-open {
     .inc-table__row--selected > *,
     .inc-table__row--warning > *,
     .inc-table__row--danger > * {
-        background: rgba(var(--bs-primary-rgb), 0.14) !important;
+        background: rgba(var(--bs-primary-rgb), 0.26) !important;
         color: var(--inc-text-primary);
     }
 
     .inc-table__row--warning > * {
-        background: rgba(var(--bs-warning-rgb), 0.14) !important;
+        background: rgba(var(--bs-warning-rgb), 0.24) !important;
     }
 
     .inc-table__row--danger > * {
-        background: rgba(var(--bs-danger-rgb), 0.14) !important;
+        background: rgba(var(--bs-danger-rgb), 0.24) !important;
     }
 
     .inc-table__row--locked > * {
-        background: rgba(var(--bs-secondary-rgb), 0.22) !important;
+        background: rgba(var(--bs-secondary-rgb), 0.32) !important;
         color: var(--inc-text-secondary);
     }
 }
@@ -5175,6 +5248,11 @@ body.inc-offcanvas-open {
     border: 1.5px dashed $inc-border-strong;
     border-radius: $inc-radius-md;
     background: linear-gradient(180deg, var(--inc-surface-secondary), var(--inc-surface-primary));
+    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
+
+    &[role="button"] {
+        cursor: pointer;
+    }
 
     &__content {
         display: flex;
@@ -5199,6 +5277,14 @@ body.inc-offcanvas-open {
         background: linear-gradient(180deg, var(--bs-primary-bg-subtle), var(--inc-surface-primary));
     }
 
+    &.is-drag-over,
+    &:focus-visible {
+        border-color: var(--bs-primary);
+        background: linear-gradient(180deg, var(--bs-primary-bg-subtle), var(--inc-surface-primary));
+        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.14);
+        outline: 0;
+    }
+
     @media (max-width: 767.98px) {
         flex-direction: column;
         align-items: stretch;

package/src/web-components/components/actions.js

@@ -24,6 +24,10 @@ const BUTTON_VARIANTS = new Set([
     "outline-info",
 ]);
 const BUTTON_SIZES = new Set(["sm", "lg", "micro"]);
+const ALERT_DEFAULT_ROLE_BY_TONE = new Map([
+    ["info", "status"],
+    ["secondary", "status"],
+]);
 
 const HostElement = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
 
@@ -35,6 +39,11 @@ function toBoolean(value, fallback = false) {
     return !FALSE_TOKENS.has(String(value).toLowerCase());
 }
 
+function toPositiveInt(value) {
+    const parsed = Number.parseInt(String(value ?? "").trim(), 10);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+
 function emit(host, type, detail = {}, options = {}) {
     return host.dispatchEvent(new CustomEvent(type, {
         detail,
@@ -292,7 +301,6 @@ export class IncCloseButtonElement extends IncElement {
     }
 
     connectedCallback() {
-        addClass(this, "inc-close-button");
         this.sync();
     }
 
@@ -303,7 +311,7 @@ export class IncCloseButtonElement extends IncElement {
     }
 
     sync() {
-        addClass(this, "inc-close-button");
+        this.classList.remove("inc-close-button", "inc-close-button--white");
         this.setAttribute("part", "close-button");
         const control = this.ensureControl();
         const variant = normalizeToken(this.getAttribute("variant"));
@@ -316,9 +324,7 @@ export class IncCloseButtonElement extends IncElement {
 
         control.type = "button";
         control.setAttribute("aria-label", this.getAttribute("label") || "Close");
-        if (!control.childNodes.length) {
-            control.textContent = "×";
-        }
+        control.textContent = "";
     }
 
     ensureControl() {
@@ -344,7 +350,7 @@ export class IncCloseButtonElement extends IncElement {
 
 export class IncAlertElement extends IncElement {
     static get observedAttributes() {
-        return ["tone", "variant", "dismissible", "dismiss-label"];
+        return ["tone", "variant", "dismissible", "dismiss-label", "timeout"];
     }
 
     connectedCallback() {
@@ -354,6 +360,7 @@ export class IncAlertElement extends IncElement {
     }
 
     disconnectedCallback() {
+        this.stopDismissTimer();
         if (this._boundClick) {
             this.removeEventListener("click", this._boundClick);
         }
@@ -377,7 +384,7 @@ export class IncAlertElement extends IncElement {
             }
 
             event.preventDefault();
-            this.hide();
+            this.dismiss("manual");
         };
 
         this.addEventListener("click", this._boundClick);
@@ -400,12 +407,25 @@ export class IncAlertElement extends IncElement {
         }
 
         if (!this.hasAttribute("role")) {
-            this.setAttribute("role", resolvedTone === "info" || resolvedTone === "secondary" ? "status" : "alert");
+            this.setAttribute("role", ALERT_DEFAULT_ROLE_BY_TONE.get(resolvedTone) || "alert");
         }
         if (!this.hasAttribute("aria-live")) {
             this.setAttribute("aria-live", this.getAttribute("role") === "alert" ? "assertive" : "polite");
         }
         this.setAttribute("aria-atomic", "true");
+
+        const timeoutMs = toPositiveInt(this.getAttribute("timeout"));
+        if (timeoutMs) {
+            this.ensureProgressBar();
+            if (!this.hidden && this.getAttribute("aria-hidden") !== "true") {
+                this.startDismissTimer(timeoutMs);
+            } else {
+                this.stopDismissTimer();
+            }
+        } else {
+            this.stopDismissTimer();
+            this.removeProgressBar();
+        }
     }
 
     ensureDismissButton() {
@@ -420,9 +440,7 @@ export class IncAlertElement extends IncElement {
         button.className = "inc-close-button";
         button.setAttribute("part", "dismiss");
         button.setAttribute("aria-label", this.getAttribute("dismiss-label") || "Dismiss alert");
-        if (!button.childNodes.length) {
-            button.textContent = "×";
-        }
+        button.textContent = "";
         return button;
     }
 
@@ -430,10 +448,68 @@ export class IncAlertElement extends IncElement {
         this.querySelectorAll(":scope > [data-inc-alert-dismiss]").forEach((node) => node.remove());
     }
 
-    hide() {
+    ensureProgressBar() {
+        let progress = this.querySelector(":scope > .inc-alert__progress");
+        if (!progress) {
+            progress = document.createElement("div");
+            progress.className = "inc-alert__progress";
+            progress.setAttribute("part", "progress");
+            progress.setAttribute("aria-hidden", "true");
+            this.append(progress);
+        }
+
+        return progress;
+    }
+
+    removeProgressBar() {
+        this.querySelectorAll(":scope > .inc-alert__progress").forEach((node) => node.remove());
+    }
+
+    startDismissTimer(timeoutMs) {
+        const progress = this.ensureProgressBar();
+        this.stopDismissTimer();
+        this._dismissTimeoutMs = timeoutMs;
+        this._dismissStartedAt = performance.now();
+
+        const tick = (now) => {
+            if (this.hidden || this.getAttribute("aria-hidden") === "true") {
+                this.stopDismissTimer();
+                return;
+            }
+
+            const elapsed = Math.max(0, now - this._dismissStartedAt);
+            const remaining = Math.max(0, timeoutMs - elapsed);
+            const ratio = timeoutMs > 0 ? remaining / timeoutMs : 0;
+            progress.style.transform = `scaleX(${ratio})`;
+
+            if (remaining <= 0) {
+                this.dismiss("timeout");
+                return;
+            }
+
+            this._dismissFrame = window.requestAnimationFrame(tick);
+        };
+
+        progress.style.transform = "scaleX(1)";
+        this._dismissFrame = window.requestAnimationFrame(tick);
+    }
+
+    stopDismissTimer() {
+        if (this._dismissFrame) {
+            window.cancelAnimationFrame(this._dismissFrame);
+            this._dismissFrame = 0;
+        }
+    }
+
+    dismiss(reason = "manual") {
+        this.hide(reason);
+    }
+
+    hide(reason = "manual") {
+        this.stopDismissTimer();
         this.hidden = true;
         this.setAttribute("aria-hidden", "true");
-        this.emit("dismiss", { hidden: true });
+        this.emit("dismiss", { hidden: true, reason });
     }
 }
 

package/src/web-components/components/feedback.js

@@ -2,6 +2,14 @@ const THEME_MODES = ["light", "dark", "system"];
 const DEFAULT_THEME_STORAGE_KEY = "inc-theme-mode";
 const BADGE_TONES = new Set(["primary", "secondary", "success", "danger", "warning", "info"]);
 const SPINNER_VARIANTS = new Set(["border", "grow"]);
+const AUTO_REFRESH_PAUSE_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+  <path d="M4 3h3v10H4zM9 3h3v10H9z"></path>
+</svg>`.trim();
+const AUTO_REFRESH_PLAY_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+  <path d="M4 3.5v9l8-4.5-8-4.5z"></path>
+</svg>`.trim();
 const HostElement = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
 const themeSubscribers = new Set();
 
@@ -677,6 +685,10 @@ export class IncAutoRefresh extends HostElement {
         }
 
         this.innerHTML = `
+<button type="button" class="inc-auto-refresh__toggle inc-btn inc-btn--outline-secondary inc-btn--micro" part="toggle">
+  <span class="inc-auto-refresh__toggle-icon" aria-hidden="true"></span>
+  <span class="inc-auto-refresh__toggle-text"></span>
+</button>
 <span class="inc-auto-refresh__countdown" part="countdown">
   <span class="inc-auto-refresh__label" part="label"></span>
   <span class="inc-auto-refresh__value" part="value"></span>
@@ -684,10 +696,6 @@ export class IncAutoRefresh extends HostElement {
 <span class="inc-auto-refresh__status" part="status" hidden>
   <span class="inc-auto-refresh__status-text"></span>
 </span>
-<button type="button" class="inc-auto-refresh__toggle inc-btn inc-btn--outline-secondary inc-btn--micro" part="toggle">
-  <span class="inc-auto-refresh__toggle-icon" aria-hidden="true"></span>
-  <span class="inc-auto-refresh__toggle-text"></span>
-</button>
         `.trim();
 
         this.#parts = this.#getParts();
@@ -701,6 +709,7 @@ export class IncAutoRefresh extends HostElement {
             status: this.querySelector(".inc-auto-refresh__status"),
             statusText: this.querySelector(".inc-auto-refresh__status-text"),
             toggle: this.querySelector(".inc-auto-refresh__toggle"),
+            toggleIcon: this.querySelector(".inc-auto-refresh__toggle-icon"),
             toggleText: this.querySelector(".inc-auto-refresh__toggle-text"),
         };
     }
@@ -861,6 +870,10 @@ export class IncAutoRefresh extends HostElement {
         if (this.#parts.toggleText) {
             this.#parts.toggleText.textContent = actionLabel;
         }
+
+        if (this.#parts.toggleIcon instanceof HTMLElement) {
+            this.#parts.toggleIcon.innerHTML = this.#isPaused ? AUTO_REFRESH_PLAY_ICON : AUTO_REFRESH_PAUSE_ICON;
+        }
     }
 
     #stop() {