@sebgroup/green-core 3.18.1 → 3.20.0

package/components/alert/alert.component.d.ts

@@ -1,5 +1,7 @@
 import { PropertyValues } from 'lit';
 import { GdsElement } from '../../gds-element';
+type AlertRole = 'alert' | 'status';
+declare const GdsAlert_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & typeof GdsElement;
 /**
  * @element gds-alert
  * @status beta
@@ -10,10 +12,12 @@ import { GdsElement } from '../../gds-element';
  * @slot - Alert message content
  * @event gds-close - Fired when alert is dismissed
  * @event gds-action - Fired when action button is clicked
+ * @event gds-ui-state - Fired when the alert is closed internally
  */
-export declare class GdsAlert extends GdsElement {
+export declare class GdsAlert extends GdsAlert_base {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    static styleExpressionBaseSelector: string;
     /**
      * The variant of the alert, which determines its appearance and icon.
      */
@@ -24,14 +28,29 @@ export declare class GdsAlert extends GdsElement {
      */
     label: string;
     /**
-     * The role of the alert, which can be 'alert' or 'status'.
+     * The role of the alert live region, which can be 'alert' or 'status'.
      * 'alert' is used for critical messages that require immediate attention,
-     * while 'status' is for informational messages. These corresponds to the
+     * while 'status' is for informational messages. These correspond to the
      * ARIA roles, which you can read more about on MDN:
      * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role
      * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role
      */
-    role: 'alert' | 'status';
+    alertRole?: AlertRole;
+    /**
+     * The role of the alert live region.
+     *
+     * @deprecated Use `alertRole` / `alert-role` instead. The native `role`
+     * attribute is reserved for the host element and will be removed from the
+     * host to avoid nested live regions.
+     */
+    role: AlertRole;
+    /**
+     * Whether the alert is closed.
+     *
+     * For dynamic announcements, mount the alert before the message should be
+     * announced, keep it closed, and then set `closed` to `false`.
+     */
+    closed: boolean;
     /**
      * The dismissibility of the alert, which determines whether it can be closed by the user.
      */
@@ -48,8 +67,8 @@ export declare class GdsAlert extends GdsElement {
     buttonLabel: string;
     private _progress;
     private _isClosing;
-    private _cardHidden;
     constructor();
+    connectedCallback(): void;
     protected updated(changed: PropertyValues): void;
     render(): any;
 }
@@ -58,3 +77,4 @@ declare global {
         'gds-alert': GdsAlert;
     }
 }
+export {};

package/components/alert/alert.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _timeoutId, _progressIntervalId, _alertRef, _observer, _isVisible, _remaining, _lastTick, _timerController, _setupObserver, setupObserver_fn, _disconnectObserver, disconnectObserver_fn, _startTicking, startTicking_fn, _resumeTimer, resumeTimer_fn, _pauseTimer, pauseTimer_fn, _clearTimers, clearTimers_fn, _dismiss, dismiss_fn, _handleButtonClick, handleButtonClick_fn, _handleKeyDown, handleKeyDown_fn, _config, config_get, _renderIcon, renderIcon_fn, _renderMessage, renderMessage_fn, _renderActionButton, renderActionButton_fn, _renderCloseButton, renderCloseButton_fn, _renderProgressBar, renderProgressBar_fn;
+var _timeoutId, _progressIntervalId, _alertRef, _observer, _remaining, _lastTick, _timerController, _setupObserver, setupObserver_fn, _disconnectObserver, disconnectObserver_fn, _startTicking, startTicking_fn, _resumeTimer, resumeTimer_fn, _pauseTimer, pauseTimer_fn, _clearTimers, clearTimers_fn, _dismiss, dismiss_fn, _dispatchUiStateEvent, dispatchUiStateEvent_fn, _consumeDeprecatedRoleAttribute, consumeDeprecatedRoleAttribute_fn, _handleButtonClick, handleButtonClick_fn, _handleKeyDown, handleKeyDown_fn, _config, config_get, _effectiveRole, effectiveRole_get, _renderIcon, renderIcon_fn, _renderMessage, renderMessage_fn, _renderActionButton, renderActionButton_fn, _renderCloseButton, renderCloseButton_fn, _renderProgressBar, renderProgressBar_fn;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -16,6 +16,7 @@ import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, getScopedTagName, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
+import { withMarginProps } from "../../utils/mixins/declarative-layout-mixins.js";
 import { GdsButton } from "../button/button.component.js";
 import { GdsCard } from "../card/card.component.js";
 import { IconCircleCheck } from "../icon/icons/circle-check.component.js";
@@ -62,7 +63,7 @@ const VARIANT_CONFIG = {
 };
 const FADE_DURATION = 300;
 const PROGRESS_INTERVAL = 100;
-let GdsAlert = class extends GdsElement {
+let GdsAlert = class extends withMarginProps(GdsElement) {
   constructor() {
     super();
     __privateAdd(this, _setupObserver);
@@ -73,11 +74,15 @@ let GdsAlert = class extends GdsElement {
     __privateAdd(this, _pauseTimer);
     __privateAdd(this, _clearTimers);
     __privateAdd(this, _dismiss);
+    __privateAdd(this, _dispatchUiStateEvent);
+    // Remove when deprecated role attribute is removed
+    __privateAdd(this, _consumeDeprecatedRoleAttribute);
     // Event handlers
     __privateAdd(this, _handleButtonClick);
     __privateAdd(this, _handleKeyDown);
     // Helpers
     __privateAdd(this, _config);
+    __privateAdd(this, _effectiveRole);
     // Render methods
     __privateAdd(this, _renderIcon);
     __privateAdd(this, _renderMessage);
@@ -87,22 +92,21 @@ let GdsAlert = class extends GdsElement {
     this.variant = "information";
     this.label = "";
     this.role = "alert";
+    this.closed = false;
     this.dismissible = false;
     this.timeout = 0;
     this.buttonLabel = "";
     this._progress = 100;
     this._isClosing = false;
-    this._cardHidden = false;
     __privateAdd(this, _timeoutId, void 0);
     __privateAdd(this, _progressIntervalId, void 0);
     __privateAdd(this, _alertRef, createRef());
     __privateAdd(this, _observer, void 0);
-    __privateAdd(this, _isVisible, false);
     __privateAdd(this, _remaining, 0);
     __privateAdd(this, _lastTick, 0);
     __privateAdd(this, _timerController, {
       hostConnected: () => {
-        if (this.timeout > 0) {
+        if (!this.closed && this.timeout > 0) {
           __privateMethod(this, _setupObserver, setupObserver_fn).call(this);
         }
       },
@@ -113,19 +117,28 @@ let GdsAlert = class extends GdsElement {
     });
     this.addController(__privateGet(this, _timerController));
   }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateMethod(this, _consumeDeprecatedRoleAttribute, consumeDeprecatedRoleAttribute_fn).call(this);
+  }
   updated(changed) {
-    if (changed.has("timeout")) {
+    if (this.hasAttribute("role")) {
+      __privateMethod(this, _consumeDeprecatedRoleAttribute, consumeDeprecatedRoleAttribute_fn).call(this);
+    }
+    if (changed.has("closed") && this.closed) {
+      __privateMethod(this, _disconnectObserver, disconnectObserver_fn).call(this);
+      __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
+    }
+    if (changed.has("timeout") || changed.has("closed") && !this.closed) {
       __privateMethod(this, _disconnectObserver, disconnectObserver_fn).call(this);
       __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
       __privateSet(this, _remaining, Math.max(0, this.timeout));
       this._progress = 100;
-      if (this.timeout > 0)
+      if (!this.closed && this.timeout > 0)
         __privateMethod(this, _setupObserver, setupObserver_fn).call(this);
     }
   }
   render() {
-    if (this._cardHidden)
-      return nothing;
     const classes = {
       dismissing: this._isClosing,
       dismissible: this.dismissible,
@@ -133,24 +146,30 @@ let GdsAlert = class extends GdsElement {
       timeout: this.timeout > 0
     };
     return html`
-      <gds-card
-        ${ref(__privateGet(this, _alertRef))}
-        role=${this.role}
-        aria-label=${this.label}
-        border=${`5xs solid ${__privateGet(this, _config, config_get).border}`}
-        background=${__privateGet(this, _config, config_get).background}
-        color=${__privateGet(this, _config, config_get).color}
-        class=${classMap(classes)}
-        @keydown=${__privateMethod(this, _handleKeyDown, handleKeyDown_fn)}
-        id="alert-message"
-        padding="m"
+      <div
+        id="alert-region"
+        role=${__privateGet(this, _effectiveRole, effectiveRole_get)}
+        aria-label=${!this.closed || this._isClosing ? this.label || nothing : nothing}
       >
-        <div class="wrapper">
-          ${__privateMethod(this, _renderIcon, renderIcon_fn).call(this)} ${__privateMethod(this, _renderMessage, renderMessage_fn).call(this)}
-        </div>
-        ${!this.timeout && this.buttonLabel ? __privateMethod(this, _renderActionButton, renderActionButton_fn).call(this, this.buttonLabel) : nothing}
-        ${__privateMethod(this, _renderCloseButton, renderCloseButton_fn).call(this)} ${__privateMethod(this, _renderProgressBar, renderProgressBar_fn).call(this)}
-      </gds-card>
+        ${!this.closed || this._isClosing ? html`
+              <gds-card
+                ${ref(__privateGet(this, _alertRef))}
+                border=${`5xs solid ${__privateGet(this, _config, config_get).border}`}
+                background=${__privateGet(this, _config, config_get).background}
+                color=${__privateGet(this, _config, config_get).color}
+                class=${classMap(classes)}
+                @keydown=${__privateMethod(this, _handleKeyDown, handleKeyDown_fn)}
+                id="alert-message"
+                padding="m"
+              >
+                <div class="wrapper">
+                  ${__privateMethod(this, _renderIcon, renderIcon_fn).call(this)} ${__privateMethod(this, _renderMessage, renderMessage_fn).call(this)}
+                </div>
+                ${!this.timeout && this.buttonLabel ? __privateMethod(this, _renderActionButton, renderActionButton_fn).call(this, this.buttonLabel) : nothing}
+                ${__privateMethod(this, _renderCloseButton, renderCloseButton_fn).call(this)} ${__privateMethod(this, _renderProgressBar, renderProgressBar_fn).call(this)}
+              </gds-card>
+            ` : nothing}
+      </div>
     `;
   }
 };
@@ -158,7 +177,6 @@ _timeoutId = new WeakMap();
 _progressIntervalId = new WeakMap();
 _alertRef = new WeakMap();
 _observer = new WeakMap();
-_isVisible = new WeakMap();
 _remaining = new WeakMap();
 _lastTick = new WeakMap();
 _timerController = new WeakMap();
@@ -173,11 +191,9 @@ setupObserver_fn = function() {
       const entry = entries[0];
       const ratio = entry?.intersectionRatio ?? 0;
       const nowVisible = ratio >= 0.1;
-      if (nowVisible && !__privateGet(this, _isVisible)) {
-        __privateSet(this, _isVisible, true);
+      if (nowVisible) {
         __privateMethod(this, _resumeTimer, resumeTimer_fn).call(this);
-      } else if (!nowVisible && __privateGet(this, _isVisible)) {
-        __privateSet(this, _isVisible, false);
+      } else {
         __privateMethod(this, _pauseTimer, pauseTimer_fn).call(this);
       }
     },
@@ -194,7 +210,6 @@ disconnectObserver_fn = function() {
     __privateGet(this, _observer).disconnect();
     __privateSet(this, _observer, void 0);
   }
-  __privateSet(this, _isVisible, false);
 };
 _startTicking = new WeakSet();
 startTicking_fn = function() {
@@ -228,7 +243,11 @@ clearTimers_fn = function() {
 };
 _dismiss = new WeakSet();
 dismiss_fn = async function(source) {
+  if (this.closed || this._isClosing)
+    return;
   this._isClosing = true;
+  this.closed = true;
+  __privateMethod(this, _dispatchUiStateEvent, dispatchUiStateEvent_fn).call(this, source);
   __privateMethod(this, _disconnectObserver, disconnectObserver_fn).call(this);
   __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
   await this.updateComplete;
@@ -238,7 +257,23 @@ dismiss_fn = async function(source) {
     composed: true
   });
   await new Promise((r) => setTimeout(r, FADE_DURATION));
-  this._cardHidden = true;
+  this._isClosing = false;
+};
+_dispatchUiStateEvent = new WeakSet();
+dispatchUiStateEvent_fn = function(reason) {
+  this.dispatchCustomEvent("gds-ui-state", {
+    detail: { closed: this.closed, open: !this.closed, reason },
+    bubbles: false,
+    composed: false
+  });
+};
+_consumeDeprecatedRoleAttribute = new WeakSet();
+consumeDeprecatedRoleAttribute_fn = function() {
+  const role = this.getAttribute("role");
+  if (role === "alert" || role === "status") {
+    this.removeAttribute("role");
+    this.role = role;
+  }
 };
 _handleButtonClick = new WeakSet();
 handleButtonClick_fn = function(e) {
@@ -259,6 +294,10 @@ _config = new WeakSet();
 config_get = function() {
   return VARIANT_CONFIG[this.variant];
 };
+_effectiveRole = new WeakSet();
+effectiveRole_get = function() {
+  return this.alertRole ?? this.role ?? "alert";
+};
 _renderIcon = new WeakSet();
 renderIcon_fn = function() {
   const icon = `gds-icon-${__privateGet(this, _config, config_get).icon}`;
@@ -320,6 +359,7 @@ renderProgressBar_fn = function() {
         ` : nothing;
 };
 GdsAlert.styles = [tokens, AlertStyles];
+GdsAlert.styleExpressionBaseSelector = "#alert-message";
 __decorateClass([
   property({ type: String, reflect: true })
 ], GdsAlert.prototype, "variant", 2);
@@ -327,8 +367,14 @@ __decorateClass([
   property({ type: String })
 ], GdsAlert.prototype, "label", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ attribute: "alert-role" })
+], GdsAlert.prototype, "alertRole", 2);
+__decorateClass([
+  property({ type: String })
 ], GdsAlert.prototype, "role", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsAlert.prototype, "closed", 2);
 __decorateClass([
   property({ type: Boolean })
 ], GdsAlert.prototype, "dismissible", 2);
@@ -344,9 +390,6 @@ __decorateClass([
 __decorateClass([
   state()
 ], GdsAlert.prototype, "_isClosing", 2);
-__decorateClass([
-  state()
-], GdsAlert.prototype, "_cardHidden", 2);
 GdsAlert = __decorateClass([
   gdsCustomElement("gds-alert", {
     dependsOn: [
@@ -359,8 +402,8 @@ GdsAlert = __decorateClass([
     ]
   }),
   ariaForwarding({
-    labelledBy: '[role="alert"]',
-    describedBy: '[role="alert"]'
+    labelledBy: "#alert-region",
+    describedBy: "#alert-region"
   }),
   localized()
 ], GdsAlert);

package/components/dialog/dialog.component.js

@@ -348,6 +348,7 @@ GdsDialog = __decorateClass([
     dependsOn: [GdsButton, GdsCard, GdsDiv, GdsFlex, IconCrossLarge]
   }),
   ariaForwarding({
+    label: "dialog",
     labelledBy: "dialog",
     describedBy: "dialog"
   }),

package/components/dialog/scroll-lock.d.ts

@@ -1,13 +1,6 @@
 /**
  * Based on https://github.com/shoelace-style/shoelace/blob/next/src/internal/scroll.ts
+ *
+ * Re-exported from shared utils so both dialog and spinner can use the same scroll lock.
  */
-export declare function registerGlobalScrollLockStyles(): void;
-/**
- * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
- * without premature unlocking.
- */
-export declare function lockBodyScrolling(lockingEl: HTMLElement): void;
-/**
- * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
- */
-export declare function unlockBodyScrolling(lockingEl: HTMLElement): void;
+export { lockBodyScrolling, registerGlobalScrollLockStyles, unlockBodyScrolling, } from '../../utils/scroll-lock';

package/components/dialog/scroll-lock.js

@@ -1,62 +1,9 @@
 import "../../chunks/chunk.CAV4X6PU.js";
-import { css } from "lit";
-import { GlobalStylesRegistry } from "../../utils/global-styles.js";
-const locks = /* @__PURE__ */ new Set();
-function registerGlobalScrollLockStyles() {
-  GlobalStylesRegistry.instance.injectGlobalStyles(
-    "dialog-scroll-lock",
-    css`
-      .gds-scroll-lock body {
-        padding-right: var(--gds-scroll-lock-size) !important;
-        overflow: hidden !important;
-      }
-    `
-  );
-}
-function lockBodyScrolling(lockingEl) {
-  locks.add(lockingEl);
-  if (!document.documentElement.classList.contains("gds-scroll-lock")) {
-    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
-    let scrollbarGutterProperty = getComputedStyle(
-      document.documentElement
-    ).scrollbarGutter;
-    if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
-      scrollbarGutterProperty = "stable";
-    }
-    if (scrollbarWidth < 2) {
-      scrollbarGutterProperty = "";
-    }
-    document.documentElement.style.setProperty(
-      "--gds-scroll-lock-gutter",
-      scrollbarGutterProperty
-    );
-    document.documentElement.classList.add("gds-scroll-lock");
-    document.documentElement.style.setProperty(
-      "--gds-scroll-lock-size",
-      `${scrollbarWidth}px`
-    );
-  }
-}
-function unlockBodyScrolling(lockingEl) {
-  locks.delete(lockingEl);
-  if (locks.size === 0) {
-    document.documentElement.classList.remove("gds-scroll-lock");
-    document.documentElement.style.removeProperty("--gds-scroll-lock-size");
-  }
-}
-function getScrollbarWidth() {
-  const documentWidth = document.documentElement.clientWidth;
-  return Math.abs(window.innerWidth - documentWidth);
-}
-function getExistingBodyPadding() {
-  const padding = Number(
-    getComputedStyle(document.body).paddingRight.replace(/px/, "")
-  );
-  if (isNaN(padding) || !padding) {
-    return 0;
-  }
-  return padding;
-}
+import {
+  lockBodyScrolling,
+  registerGlobalScrollLockStyles,
+  unlockBodyScrolling
+} from "../../utils/scroll-lock.js";
 export {
   lockBodyScrolling,
   registerGlobalScrollLockStyles,

package/components/icon/icon.deprecated.js

@@ -2,7 +2,7 @@ import "../../chunks/chunk.CAV4X6PU.js";
 const ICON_REPLACEMENTS = {
   // seb: 'gds-icon-brand-seb',
 };
-const DEPRECATED_NAMES = [];
+const DEPRECATED_NAMES = ["filter"];
 const deprecatedIcons = Object.fromEntries([
   ...Object.entries(ICON_REPLACEMENTS).map(([name, replacement]) => [
     `gds-icon-${name}`,

package/components/icon/icons/filter.component.d.ts

@@ -1,6 +1,7 @@
 import { GdsIcon } from '../icon';
 /**
  * @element gds-icon-filter
+ * @deprecated This icon is deprecated
  */
 export declare class IconFilter extends GdsIcon {
     /** @private */

package/components/spinner/spinner.component.d.ts

@@ -45,10 +45,8 @@ export declare class GdsSpinner extends GdsSpinner_base {
      * Sets up accessibility attributes and initializes the spinner
      */
     connectedCallback(): void;
-    /**
-     * Cleans up document styles if fullscreen mode was used
-     */
     disconnectedCallback(): void;
+    private _handleFullscreenChange;
     /**
      * Updates the aria-label attribute based on the label property
      */
@@ -57,11 +55,6 @@ export declare class GdsSpinner extends GdsSpinner_base {
      * Renders the spinner component
      */
     protected render(): any;
-    /**
-     * Toggles document root styles when in fullscreen mode
-     * Prevents scrolling of the document when fullscreen overlay is active
-     */
-    private _toggleRootStyles;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/spinner/spinner.component.js

@@ -2,11 +2,11 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet,
-  __privateMethod
+  __privateMethod,
+  __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _fullscreenStyles, _getWrapperClasses, getWrapperClasses_fn;
+var _getWrapperClasses, getWrapperClasses_fn, _didLockScroll, _lockScroll, lockScroll_fn, _unlockScroll, unlockScroll_fn;
 import { localized, msg } from "@lit/localize";
-import { css } from "lit";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
@@ -14,13 +14,18 @@ import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { watch } from "../../utils/decorators/watch.js";
-import { GlobalStylesRegistry } from "../../utils/global-styles.js";
 import {
   withLayoutChildProps,
   withMarginProps,
   withPositioningProps
 } from "../../utils/mixins/declarative-layout-mixins.js";
+import {
+  lockBodyScrolling,
+  registerGlobalScrollLockStyles,
+  unlockBodyScrolling
+} from "../../utils/scroll-lock.js";
 import styles from "./spinner.styles.js";
+registerGlobalScrollLockStyles();
 let GdsSpinner = class extends withMarginProps(
   withPositioningProps(withLayoutChildProps(GdsElement))
 ) {
@@ -30,15 +35,8 @@ let GdsSpinner = class extends withMarginProps(
      * Generates CSS classes for the wrapper element based on component state
      */
     __privateAdd(this, _getWrapperClasses);
-    /**
-     * Global styles for fullscreen mode
-     */
-    __privateAdd(this, _fullscreenStyles, css`
-    html {
-      overflow: hidden !important;
-      overscroll-behavior: none !important;
-    }
-  `);
+    __privateAdd(this, _lockScroll);
+    __privateAdd(this, _unlockScroll);
     this.label = msg("Loading...");
     this.labelPosition = "bottom";
     this.showLabel = false;
@@ -46,6 +44,7 @@ let GdsSpinner = class extends withMarginProps(
     this.fullscreen = false;
     this.size = "md";
     this._isAnimating = false;
+    __privateAdd(this, _didLockScroll, false);
   }
   /**
    * Sets up accessibility attributes and initializes the spinner
@@ -55,18 +54,20 @@ let GdsSpinner = class extends withMarginProps(
     this.setAttribute("role", "status");
     this.setAttribute("aria-live", "polite");
     this._isAnimating = true;
+    if (this.fullscreen)
+      __privateMethod(this, _lockScroll, lockScroll_fn).call(this);
     this.dispatchCustomEvent("gds-spinner-connected");
   }
-  /**
-   * Cleans up document styles if fullscreen mode was used
-   */
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (this.fullscreen) {
-      this.fullscreen = false;
-      this._toggleRootStyles();
-    }
     this._isAnimating = false;
+    __privateMethod(this, _unlockScroll, unlockScroll_fn).call(this);
+  }
+  _handleFullscreenChange() {
+    if (this.fullscreen)
+      __privateMethod(this, _lockScroll, lockScroll_fn).call(this);
+    else
+      __privateMethod(this, _unlockScroll, unlockScroll_fn).call(this);
   }
   _updateAriaLabel() {
     this.setAttribute("aria-label", this.label);
@@ -85,17 +86,7 @@ let GdsSpinner = class extends withMarginProps(
       </div>
     `;
   }
-  _toggleRootStyles() {
-    const registry = GlobalStylesRegistry.instance;
-    const key = `gds-spinner-fullscreen-${this.id || "default"}`;
-    if (this.fullscreen) {
-      registry.injectGlobalStyles(key, __privateGet(this, _fullscreenStyles));
-    } else {
-      registry.clearGlobalStyles(key);
-    }
-  }
 };
-_fullscreenStyles = new WeakMap();
 _getWrapperClasses = new WeakSet();
 getWrapperClasses_fn = function() {
   return {
@@ -107,6 +98,21 @@ getWrapperClasses_fn = function() {
     [`spinner-label-${this.labelPosition}`]: this.labelPosition
   };
 };
+_didLockScroll = new WeakMap();
+_lockScroll = new WeakSet();
+lockScroll_fn = function() {
+  if (__privateGet(this, _didLockScroll))
+    return;
+  lockBodyScrolling(this);
+  __privateSet(this, _didLockScroll, true);
+};
+_unlockScroll = new WeakSet();
+unlockScroll_fn = function() {
+  if (!__privateGet(this, _didLockScroll))
+    return;
+  unlockBodyScrolling(this);
+  __privateSet(this, _didLockScroll, false);
+};
 /** All styles are defined in the external styles file */
 GdsSpinner.styles = [tokens, styles];
 __decorateClass([
@@ -130,12 +136,12 @@ __decorateClass([
 __decorateClass([
   state()
 ], GdsSpinner.prototype, "_isAnimating", 2);
+__decorateClass([
+  watch("fullscreen")
+], GdsSpinner.prototype, "_handleFullscreenChange", 1);
 __decorateClass([
   watch("label")
 ], GdsSpinner.prototype, "_updateAriaLabel", 1);
-__decorateClass([
-  watch("fullscreen")
-], GdsSpinner.prototype, "_toggleRootStyles", 1);
 GdsSpinner = __decorateClass([
   gdsCustomElement("gds-spinner"),
   localized()