@sebgroup/green-core 3.18.1 → 3.19.0

package/gds-element.js

@@ -16,7 +16,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "3.18.1";
+    this.semanticVersion = "3.19.0";
     this.syncFirstRender = false;
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);

package/generated/mcp/alert/angular.md

@@ -24,3 +24,4 @@ Events are emitted using Angular output syntax. Event names are converted from k
 |---------------------|----------------|-----------------|
 | `gds-close` | `gdsClose` | `(gdsClose)="handler($event)"` |
 | `gds-action` | `gdsAction` | `(gdsAction)="handler($event)"` |
+| `gds-ui-state` | `gdsUiState` | `(gdsUiState)="handler($event)"` |

package/generated/mcp/alert/api.md

@@ -7,14 +7,21 @@
 
 ## Properties
 
+> Some properties accept design token names. Use `get_tokens` with the appropriate category to discover valid token names and their resolved values.
+
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `variant` | `'information' \| 'notice' \| 'positive' \| 'warning' \| 'negative'` | `-` | The variant of the alert, which determines its appearance and icon. |
 | `label` | `string` | `-` | The label for the alert, used for accessibility purposes. This needs be set to something relevant to the content of the alert. |
-| `role` | `'alert' \| 'status'` | `-` | The role of the alert, 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 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 |
+| `alertRole` | `AlertRole \| undefined` | `-` | 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 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` | `AlertRole` | `-` | The role of the alert live region. |
+| `closed` | `boolean` | `-` | 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`. |
 | `dismissible` | `boolean` | `-` | The dismissibility of the alert, which determines whether it can be closed by the user. |
 | `timeout` | `number` | `-` | The time in milliseconds after which the alert will automatically dismiss itself. Set to 0 to disable auto-dismiss. |
 | `buttonLabel` | `string` | `-` | The text for the action button, if provided. If not set, no action button will be rendered. |
+| `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
+| `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
+| `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |
 | `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |
 
 
@@ -24,6 +31,7 @@
 |------|------|-------------|
 | `gds-close` | `CustomEvent<any>` | Fired when alert is dismissed |
 | `gds-action` | `CustomEvent<any>` | Fired when action button is clicked |
+| `gds-ui-state` | `CustomEvent<any>` | Fired when the alert is closed internally |
 
 
 ## Slots

package/generated/mcp/alert/react.md

@@ -24,3 +24,4 @@ Events are handled using React event handler props. Event names are converted fr
 |---------------------|--------------------|-----------------|
 | `gds-close` | `onGdsClose` | `onGdsClose={handler}` |
 | `gds-action` | `onGdsAction` | `onGdsAction={handler}` |
+| `gds-ui-state` | `onGdsUiState` | `onGdsUiState={handler}` |

package/generated/mcp/components.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-18T13:19:55.654Z",
+  "generatedAt": "2026-08-24T12:12:38.947Z",
   "components": [
     {
       "name": "gds-alert",

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-18T13:19:55.654Z",
+  "generatedAt": "2026-08-24T12:12:38.947Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-18T13:19:55.654Z",
+  "generatedAt": "2026-08-24T12:12:38.947Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

package/generated/mcp/tokens.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-18T13:19:55.588Z",
+  "generatedAt": "2026-08-24T12:12:38.866Z",
   "categories": {
     "space": {
       "description": "Spacing tokens for padding, margin, gap, and other spacing",

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

@@ -5,6 +5,8 @@ type GdsAlertProps = React.ComponentProps<ReturnType<typeof getReactComponent<Gd
     onGdsClose?: (event: CustomEvent<any>) => void;
     /** Fired when action button is clicked */
     onGdsAction?: (event: CustomEvent<any>) => void;
+    /** Fired when the alert is closed internally */
+    onGdsUiState?: (event: CustomEvent<any>) => void;
 };
 export declare const GdsAlert: {
     (props: GdsAlertProps & {
@@ -12,17 +14,22 @@ export declare const GdsAlert: {
     }): import("react").ReactElement<Omit<Omit<{
         variant?: "positive" | "negative" | "notice" | "warning" | "information" | undefined;
         label?: string;
-        role?: "alert" | "status" | undefined;
+        alertRole?: ("alert" | "status") | undefined;
+        role?: ("alert" | "status") | undefined;
+        closed?: boolean;
         dismissible?: boolean;
         timeout?: number;
         buttonLabel?: string;
+        connectedCallback?: (() => void) | undefined;
         render?: (() => any) | undefined;
+        margin?: string | undefined;
+        'margin-inline'?: string | undefined;
+        'margin-block'?: string | undefined;
         readonly semanticVersion?: "__GDS_SEM_VER__";
         syncFirstRender?: boolean;
         gdsElementName?: string | undefined;
         _isUsingTransitionalStyles?: boolean;
         _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
-        connectedCallback?: (() => void) | undefined;
         disconnectedCallback?: (() => void) | undefined;
         dispatchStandardEvent?: ((name: string, options?: EventInit) => boolean) | undefined;
         dispatchCustomEvent?: (<T>(name: string, options?: CustomEventInit<T>) => boolean) | undefined;

package/generated/react/index.d.ts

@@ -1,9 +1,9 @@
 export * from './alert/index.js';
-export * from './badge/index.js';
 export * from './avatar/index.js';
+export * from './badge/index.js';
+export * from './blur/index.js';
 export * from './breadcrumbs/index.js';
 export * from './button/index.js';
-export * from './blur/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
 export * from './card-linked/index.js';
@@ -26,8 +26,8 @@ export * from './img/index.js';
 export * from './input/index.js';
 export * from './link/index.js';
 export * from './list/index.js';
-export * from './menu-button/index.js';
 export * from './mask/index.js';
+export * from './menu-button/index.js';
 export * from './pagination/index.js';
 export * from './backdrop/index.js';
 export * from './popover/index.js';
@@ -56,8 +56,8 @@ export * from './formatted-date/index.js';
 export * from './formatted-number/index.js';
 export * from './list-item/index.js';
 export * from './radio-group/index.js';
-export * from './sensitive-account/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 './tab/index.js';

package/generated/react/index.js

@@ -1,9 +1,9 @@
 export * from "./alert/index.js";
-export * from "./badge/index.js";
 export * from "./avatar/index.js";
+export * from "./badge/index.js";
+export * from "./blur/index.js";
 export * from "./breadcrumbs/index.js";
 export * from "./button/index.js";
-export * from "./blur/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
 export * from "./card-linked/index.js";
@@ -26,8 +26,8 @@ export * from "./img/index.js";
 export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./list/index.js";
-export * from "./menu-button/index.js";
 export * from "./mask/index.js";
+export * from "./menu-button/index.js";
 export * from "./pagination/index.js";
 export * from "./backdrop/index.js";
 export * from "./popover/index.js";
@@ -56,8 +56,8 @@ export * from "./formatted-date/index.js";
 export * from "./formatted-number/index.js";
 export * from "./list-item/index.js";
 export * from "./radio-group/index.js";
-export * from "./sensitive-account/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 "./tab/index.js";

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": "3.18.1",
+  "version": "3.19.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

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

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

package/utils/scroll-lock.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Based on https://github.com/shoelace-style/shoelace/blob/next/src/internal/scroll.ts
+ */
+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;

package/utils/scroll-lock.js

@@ -0,0 +1,64 @@
+import "../chunks/chunk.CAV4X6PU.js";
+import { css } from "lit";
+import { GlobalStylesRegistry } from "./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;
+}
+export {
+  lockBodyScrolling,
+  registerGlobalScrollLockStyles,
+  unlockBodyScrolling
+};