@sebgroup/green-core 2.26.1 → 2.26.2-rc.20260123102949574

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

@@ -8,36 +8,6 @@ declare const GdsSpinner_base: (new (...args: any[]) => import("../../utils/mixi
  *
  * A loading indicator with accessibility support and various display modes.
  *
- * @example Basic usage
- * ```html
- * <gds-spinner></gds-spinner>
- * ```
- *
- * @example With label
- * ```html
- * <gds-spinner label="Loading..." showLabel></gds-spinner>
- * ```
- *
- * @example Different sizes
- * ```html
- * <gds-spinner size="sm"></gds-spinner>
- * <gds-spinner size="md"></gds-spinner>
- * <gds-spinner size="lg"></gds-spinner>
- * ```
- *
- * @example Cover container
- * ```html
- * <div style="position: relative;">
- *   <!-- Container content -->
- *   <gds-spinner cover></gds-spinner>
- * </div>
- * ```
- *
- * @example Fullscreen
- * ```html
- * <gds-spinner fullscreen label="Loading application..." showLabel></gds-spinner>
- * ```
- *
  * @fires gds-spinner-connected - When the spinner is connected and visible
  */
 export declare class GdsSpinner extends GdsSpinner_base {
@@ -69,7 +39,6 @@ export declare class GdsSpinner extends GdsSpinner_base {
     size: 'sm' | 'md' | 'lg';
     /**
      * Whether the spinner is currently animating
-     * @private
      */
     private _isAnimating;
     /**
@@ -82,7 +51,6 @@ export declare class GdsSpinner extends GdsSpinner_base {
     disconnectedCallback(): void;
     /**
      * Updates the aria-label attribute based on the label property
-     * @private
      */
     private _updateAriaLabel;
     /**
@@ -92,7 +60,6 @@ export declare class GdsSpinner extends GdsSpinner_base {
     /**
      * Toggles document root styles when in fullscreen mode
      * Prevents scrolling of the document when fullscreen overlay is active
-     * @private
      */
     private _toggleRootStyles;
 }

package/components/spinner/spinner.component.js

@@ -2,11 +2,11 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet,
-  __privateMethod,
-  __privateSet
+  __privateMethod
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _GdsSpinner_instances, getWrapperClasses_fn, _originalStyles;
+var _fullscreenStyles, _GdsSpinner_instances, getWrapperClasses_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,6 +14,7 @@ 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,
@@ -26,6 +27,15 @@ let GdsSpinner = class extends withMarginProps(
   constructor() {
     super(...arguments);
     __privateAdd(this, _GdsSpinner_instances);
+    /**
+     * Global styles for fullscreen mode
+     */
+    __privateAdd(this, _fullscreenStyles, css`
+    html {
+      overflow: hidden !important;
+      overscroll-behavior: none !important;
+    }
+  `);
     this.label = msg("Loading...");
     this.labelPosition = "bottom";
     this.showLabel = false;
@@ -33,14 +43,6 @@ let GdsSpinner = class extends withMarginProps(
     this.fullscreen = false;
     this.size = "md";
     this._isAnimating = false;
-    /**
-     * Stores original document styles before applying fullscreen mode
-     * @private
-     */
-    __privateAdd(this, _originalStyles, {
-      overflow: "visible",
-      overscrollBehavior: "auto"
-    });
   }
   /**
    * Sets up accessibility attributes and initializes the spinner
@@ -62,7 +64,6 @@ let GdsSpinner = class extends withMarginProps(
       this._toggleRootStyles();
     }
     this._isAnimating = false;
-    super.disconnectedCallback();
   }
   _updateAriaLabel() {
     this.setAttribute("aria-label", this.label);
@@ -82,24 +83,19 @@ let GdsSpinner = class extends withMarginProps(
     `;
   }
   _toggleRootStyles() {
-    const { style } = document.documentElement;
+    const registry = GlobalStylesRegistry.instance;
+    const key = `gds-spinner-fullscreen-${this.id || "default"}`;
     if (this.fullscreen) {
-      __privateSet(this, _originalStyles, {
-        overflow: style.overflow,
-        overscrollBehavior: style.overscrollBehavior
-      });
-      style.overflow = "hidden";
-      style.overscrollBehavior = "none";
+      registry.injectGlobalStyles(key, __privateGet(this, _fullscreenStyles));
     } else {
-      style.overflow = __privateGet(this, _originalStyles).overflow;
-      style.overscrollBehavior = __privateGet(this, _originalStyles).overscrollBehavior;
+      registry.clearGlobalStyles(key);
     }
   }
 };
+_fullscreenStyles = new WeakMap();
 _GdsSpinner_instances = new WeakSet();
 /**
  * Generates CSS classes for the wrapper element based on component state
- * @private
  */
 getWrapperClasses_fn = function() {
   return {
@@ -111,7 +107,6 @@ getWrapperClasses_fn = function() {
     [`spinner-label-${this.labelPosition}`]: this.labelPosition
   };
 };
-_originalStyles = new WeakMap();
 /** All styles are defined in the external styles file */
 GdsSpinner.styles = [tokens, styles];
 __decorateClass([