@sebgroup/green-core 1.87.0 → 1.88.0

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

@@ -48,6 +48,7 @@ export declare class GdsSpinner extends GdsSpinner_base {
      * The text to display as a label for the spinner
      */
     label: string;
+    labelPosition: 'top' | 'bottom' | 'left' | 'right';
     /**
      * Whether to display the label text visually
      * If false, the label is still available for screen readers

package/components/spinner/spinner.component.js

@@ -31,6 +31,7 @@ let GdsSpinner = class extends withMarginProps(
      */
     __privateAdd(this, _getWrapperClasses);
     this.label = msg("Loading...");
+    this.labelPosition = "bottom";
     this.showLabel = false;
     this.cover = false;
     this.fullscreen = false;
@@ -78,9 +79,8 @@ let GdsSpinner = class extends withMarginProps(
       <div part="wrapper" class=${classMap(__privateMethod(this, _getWrapperClasses, getWrapperClasses_fn).call(this))}>
         <span part="spinner" class="spinner"></span>
         ${when(
-      this.label && this.showLabel,
-      () => html`<span part="label" class="spinner-label">${this.label}</span>`,
-      () => null
+      this.showLabel,
+      () => html`<span part="label" class="spinner-label">${this.label}</span>`
     )}
       </div>
     `;
@@ -107,7 +107,8 @@ getWrapperClasses_fn = function() {
     "spinner-fullscreen": this.fullscreen,
     "spinner-cover": this.cover,
     "spinner-backdrop": this.cover || this.fullscreen,
-    "spinner-animating": this._isAnimating
+    "spinner-animating": this._isAnimating,
+    [`spinner-label-${this.labelPosition}`]: this.labelPosition
   };
 };
 _originalStyles = new WeakMap();
@@ -116,6 +117,9 @@ GdsSpinner.styles = [tokens, styles];
 __decorateClass([
   property({ type: String })
 ], GdsSpinner.prototype, "label", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "label-position" })
+], GdsSpinner.prototype, "labelPosition", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], GdsSpinner.prototype, "showLabel", 2);

package/components/spinner/spinner.styles.js

@@ -73,6 +73,7 @@ const styles = css`
     height: var(--size, 3.75rem);
     width: var(--size, 3.75rem);
     animation: gdsSpinnerRotation 1s linear infinite;
+    aspect-ratio: 1 / 1;
   }
 
   /* Motion preference adjustments */
@@ -116,6 +117,28 @@ const styles = css`
     backdrop-filter: blur(var(--spinner-backdrop-blur));
   }
 
+  .spinner-wrapper.spinner-label-top {
+    flex-direction: column-reverse;
+
+    & .spinner-label {
+      margin: 0 0 1rem;
+    }
+  }
+
+  .spinner-wrapper.spinner-label-left {
+    flex-direction: row-reverse;
+    & .spinner-label {
+      margin: 0 1rem 0 0;
+    }
+  }
+
+  .spinner-wrapper.spinner-label-right {
+    flex-direction: row;
+    & .spinner-label {
+      margin: 0 0 0 1rem;
+    }
+  }
+
   /* Label styling */
   .spinner-label {
     margin-top: 1rem;

package/generated/react/index.d.ts

@@ -10,10 +10,10 @@ export * from './coachmark/index.js';
 export * from './container/index.js';
 export * from './context-menu/index.js';
 export * from './datepicker/index.js';
+export * from './details/index.js';
 export * from './dialog/index.js';
 export * from './div/index.js';
 export * from './divider/index.js';
-export * from './details/index.js';
 export * from './dropdown/index.js';
 export * from './fab/index.js';
 export * from './filter-chips/index.js';
@@ -55,6 +55,7 @@ export * from './radio-group/index.js';
 export * from './segment/index.js';
 export * from './sensitive-account/index.js';
 export * from './sensitive-date/index.js';
+export * from './sensitive-number/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -345,4 +346,3 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
-export * from './sensitive-number/index.js';

package/generated/react/index.js

@@ -10,10 +10,10 @@ export * from "./coachmark/index.js";
 export * from "./container/index.js";
 export * from "./context-menu/index.js";
 export * from "./datepicker/index.js";
+export * from "./details/index.js";
 export * from "./dialog/index.js";
 export * from "./div/index.js";
 export * from "./divider/index.js";
-export * from "./details/index.js";
 export * from "./dropdown/index.js";
 export * from "./fab/index.js";
 export * from "./filter-chips/index.js";
@@ -55,6 +55,7 @@ export * from "./radio-group/index.js";
 export * from "./segment/index.js";
 export * from "./sensitive-account/index.js";
 export * from "./sensitive-date/index.js";
+export * from "./sensitive-number/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -345,4 +346,3 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
-export * from "./sensitive-number/index.js";

package/generated/react/spinner/index.d.ts

@@ -2,6 +2,7 @@ import { getReactComponent } from "../../../utils/react";
 import { GdsSpinner as GdsSpinnerClass } from "../../../components/spinner/spinner.component";
 export declare const GdsSpinner: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsSpinnerClass>>>) => import("react").ReactElement<Omit<{
     label?: string | undefined;
+    labelPosition?: "top" | "right" | "bottom" | "left" | undefined;
     showLabel?: boolean | undefined;
     cover?: boolean | undefined;
     fullscreen?: boolean | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.87.0",
+  "version": "1.88.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QTSIPXV3.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-75c98b";
+const VER_SUFFIX = "-85fd7c";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])