@sebgroup/green-core 3.22.1 → 3.23.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.22.1";
+    this.semanticVersion = "3.23.0";
     this.syncFirstRender = false;
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);

package/generated/mcp/checkbox/guidelines.md

@@ -7,9 +7,10 @@ A checkbox is a form control that allows users to select one or multiple options
 
 ### Variants
 
-*   **Default**
-    
-*   **Contained**: Coming soon Used on its own or together with other form components.
+- **Default**
+- **Contained**: Coming soon Used on its own or together with other form components.
+
+
 
 ### Features
 
@@ -29,9 +30,10 @@ This can be used for both the header and individual checkboxes. Use this to expl
 
 If the label and support text are not enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.
 
-*   Use a tooltip if space is limited.
-    
-*   Use a modal for large amounts of text.
+- Use a tooltip if space is limited.
+- Use a modal for large amounts of text.
+
+
 
 ### Error message
 
@@ -43,24 +45,30 @@ Used when a checkbox is partially selected, typically in parent-child relationsh
 
 ### Behaviour:
 
-*   If some child checkboxes are selected, the parent shows the indeterminate state.
-    
-*   If all child checkboxes are selected, the parent appears selected.
-    
-*   Selecting a parent checkbox (whether unselected or in the indeterminate state) selects all child checkboxes.
-    
-*   Deselecting the parent checkbox deselects all child checkboxes.
+- If some child checkboxes are selected, the parent shows the indeterminate state.
+- If all child checkboxes are selected, the parent appears selected.
+- Selecting a parent checkbox (whether unselected or in the indeterminate state) selects all child checkboxes.
+- Deselecting the parent checkbox deselects all child checkboxes.
+
+
 
 ### Alignment
 
 Checkboxes can be aligned horizontal or vertical.
 
-*   **Vertical**: This is the default alignment. It's easier to read and scan the available options.
-    
-*   **Horizontal**: Only used for a small set of options if the page shouldn't be to long, but try to avoid.
+- **Vertical**: This is the default alignment. It's easier to read and scan the available options.
+- **Horizontal**: Only used for a small set of options if the page shouldn't be to long, but try to avoid.
+
+
 
 ### Do's and don'ts
 
+### Read only
+
+The read only shows the selected state without allowing it to be changed. When several checkboxes represent a group of choices, the read only retain enough context for users to understand both selected and unselected options when that information is relevant.
+
+[Read more about the read only pattern](https://seb.io/patterns/read-only)
+
 
 ## UX Guidelines
 

package/generated/mcp/components.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-09-11T08:28:20.720Z",
+  "generatedAt": "2026-09-14T14:33:39.196Z",
   "components": [
     {
       "name": "gds-alert",

package/generated/mcp/context-menu/api.md

@@ -17,6 +17,7 @@
 | `label` | `string` | `-` | The label for the popover and menu. Should describe the context of the menu. |
 | `maxHeight` | `number` | `-` | Maximum height of the menu list. |
 | `placement` | `Placement` | `-` | The placement of the popover relative to the trigger. |
+| `nonmodal` | `boolean` | `-` | Whether the context menu popover is nonmodal. When true, the popover will not trap focus, and other elements on the page (including other context menu triggers) will still be interactable while the menu is open. Enable this when rendering multiple `gds-context-menu` instances in the same view, so that clicking one trigger while another menu is open closes the first and opens the second in a single click. |
 | `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. |

package/generated/mcp/datepicker/guidelines.md

@@ -7,19 +7,15 @@
 
 ### Features
 
-*   Configurable date format display
-    
-*   `plain` mode to hide labels and error messages
-    
-*   Clearable for quick state reset
-    
-*   Min and max dates
-    
-*   Can be configured with visible or hidden week numbers
-    
-*   Individual dates can be marked as disabled in the calendar
-    
-*   Buttons in the calendar footer are configurable
+- Configurable date format display
+- `plain` mode to hide labels and error messages
+- Clearable for quick state reset
+- Min and max dates
+- Can be configured with visible or hidden week numbers
+- Individual dates can be marked as disabled in the calendar
+- Buttons in the calendar footer are configurable
+
+
 
 ### Usage
 
@@ -29,9 +25,16 @@ Use datepicker when a complete date should be entered.
 
 The datepicker comes in two sizes.
 
-*   **Large** (default)
-    
-*   **Small**: used in tables and in some special cases where the space is very limited.
+- **Large** (default)
+- **Small**: used in tables and in some special cases where the space is very limited.
+
+
+
+### Read only
+
+Displays the entered value together with its label. Have no visual cues associated with text entry, such as an active input cursor or editable states. 
+
+[Read more about the read only pattern](http://seb.io/patterns/read-only)
 
 ### Do's and don'ts
 

package/generated/mcp/dropdown/guidelines.md

@@ -7,9 +7,10 @@ A dropdown enables the user to choose one or multiple options from a list.
 
 ### Sizes
 
-*   **Large**
-    
-*   **Small**: Used in tables and in certain cases where space is very limited. (Custom layouts are not supported.)
+- **Large**
+- **Small**: Used in tables and in certain cases where space is very limited. (Custom layouts are not supported.)
+
+
 
 ### Features
 
@@ -29,9 +30,10 @@ Use this to explain how to fill in the field, for example how to count or what t
 
 If the label and support text aren’t enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.
 
-*   Use a tooltip if space is limited.
-    
-*   Use a modal for large amounts of text.
+- Use a tooltip if space is limited.
+- Use a modal for large amounts of text.
+
+
 
 #### Leading icon
 
@@ -49,13 +51,12 @@ Use this version when users should be able to select one or multiple options fro
 
 A search field can be used to filter the options.
 
-*   If the list is long (e.g., 10+ items), searching helps users find what they need faster.
-    
-*   When items are similar or not in a predictable order, searching improves efficiency.
-    
-*   If users have a specific item in mind, typing is often faster than scrolling.
-    
-*   Search helps users who navigate with keyboards or screen readers find options more quickly.
+- If the list is long (e.g., 10+ items), searching helps users find what they need faster.
+- When items are similar or not in a predictable order, searching improves efficiency.
+- If users have a specific item in mind, typing is often faster than scrolling.
+- Search helps users who navigate with keyboards or screen readers find options more quickly.
+
+
 
 ### Option groups
 
@@ -77,6 +78,12 @@ To make it easy for users to clear a field, an x-icon button can be placed at th
 
 Used to indicate that a selection must be made from the dropdown or that there is an error with the selected option.
 
+### Read only
+
+The read only displays the selected value, but removes affordances that suggest the list can be opened or changed.
+
+[Read more about the read only pattern](https://seb.io/patterns/read-only)
+
 
 ## UX Guidelines
 

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-09-11T08:28:20.720Z",
+  "generatedAt": "2026-09-14T14:33:39.196Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-09-11T08:28:20.720Z",
+  "generatedAt": "2026-09-14T14:33:39.196Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

package/generated/mcp/input/guidelines.md

@@ -84,6 +84,11 @@ If the user ignores this and attempts to submit, an error message will appear in
 
 Avoid using placeholder text (also known as watermark), as it can confuse users into thinking the field is already filled with data. Instructions should not be placed in the field, as they disappear once the user starts typing. Instead, use support text to guide users on what should be entered.
 
+### Read only
+
+The read only state displays the entered value together with its label. Have no visual cues associated with text entry, such as an active input cursor or editable states. Long content should remain readable and should not be unnecessarily truncated.  
+[More about the read only pattern](https://seb.io/patterns/read-only)
+
 ### Do’s and dont’s
 
 

package/generated/mcp/radio/guidelines.md

@@ -7,11 +7,11 @@ A radio button is a form control that allows users to select one of the predefin
 
 ### Variants
 
-*   **Default**
-    
-*   **Contained**: used only in combination with other contained form components.
-    
-*   **Contained extended(coming soon)**: The contained version but including Label support text.
+- **Default**
+- **Contained**: used only in combination with other contained form components.
+- **Contained extended(coming soon)**: The contained version but including Label support text.
+
+
 
 ### Features
 
@@ -27,9 +27,10 @@ This can be used for both the header and individual radio buttons. Use this to e
 
 If the label and support text are not enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.
 
-*   Use a tooltip if space is limited.
-    
-*   Use a modal for large amounts of text.
+- Use a tooltip if space is limited.
+- Use a modal for large amounts of text.
+
+
 
 ### Error message
 
@@ -37,20 +38,28 @@ If an error occurs we mark the entire group of options with error. The error is
 
 ### Behaviour
 
-*   **Mutual exclusivity**: Only one radio button within a group can be selected at a time.
-    
-*   **Defaults**: Aim for having one option pre-selected.
+- **Mutual exclusivity**: Only one radio button within a group can be selected at a time.
+- **Defaults**: Aim for having one option pre-selected.
+
+
 
 ### Alignment
 
 We can align the radio buttons both horizontal and vertical.
 
-*   **Vertical**: This is the default alignment. It's easier to read and scan the available options.
-    
-*   **Horizontal**: Only used for a small set of options if the page shouldn't be to long, but try to avoid.
+- **Vertical**: This is the default alignment. It's easier to read and scan the available options.
+- **Horizontal**: Only used for a small set of options if the page shouldn't be to long, but try to avoid.
+
+
 
 ### Do's and don'ts
 
+### Read only
+
+Shows the selected option without allowing the selection to be changed. Keep all options visible when the alternatives provide important context for understanding the selected value. If only the selected value is relevant, consider presenting it as text instead.
+
+[Read more about the read only pattern](http://seb.io/patterns/read-only)
+
 
 ## UX Guidelines
 

package/generated/mcp/select/guidelines.md

@@ -15,6 +15,12 @@ Don't use this component when you need to customize the dropdown behavior or app
 
 The appearance and behavior of the option list will be handled according to each browser.
 
+### Read only
+
+The read only displays the selected value, but removes affordances that suggest the list can be opened or changed.
+
+[Read more about the read only pattern](https://seb.io/patterns/read-only)
+
 ### Do's and don'ts
 
 

package/generated/mcp/switch/guidelines.md

@@ -25,6 +25,12 @@ A toggle must have a visible and persistent label and communicate its state prog
 
 ### Do's and Don'ts
 
+### Read only
+
+Shows the current state without allowing it to be changed. Keep the label and make the current state clear. Since a switch normally represents an immediate on or off setting, users should be able to understand the state without relying on the position or visual appearance of the switch alone.
+
+[Read more about the read only pattern](https://seb.io/patterns/read-only)
+
 
 ## UX Guidelines
 

package/generated/mcp/textarea/guidelines.md

@@ -9,9 +9,10 @@ Textarea allow users to input text and digits on multiple lines.
 
 We provide two versions of textarea.
 
-*   **Default**
-    
-*   **Floating label** (coming soon): Can only be used in specific contexts. Limited features due to accessibility.
+- **Default**
+- **Floating label** (coming soon): Can only be used in specific contexts. Limited features due to accessibility.
+
+
 
 ### Features
 
@@ -31,9 +32,10 @@ Use this to explain how to fill in the field, for example how to count or what t
 
 If the label and support text aren’t enough to explain a field, we can use the info icon. Clicking the icon shows additional support text between the label support and the field.
 
-*   Use a tooltip if space is limited.
-    
-*   Use a modal for large amounts of text.
+- Use a tooltip if space is limited.
+- Use a modal for large amounts of text.
+
+
 
 #### Leading icon
 
@@ -59,6 +61,13 @@ If the user ignores this and attempts to submit, an error message will appear in
 
 The default Textarea has a fixed height based on the expected input. This helps users understand how much text the field is intended for. If the field should be resizable, there are two options:
 
-*   **Automatic**: Adjusts dynamically as the user types.
-    
-*   **Manual**: Users can resize it by dragging the corner.
+- **Automatic**: Adjusts dynamically as the user types.
+- **Manual**: Users can resize it by dragging the corner.
+
+
+
+### Read only
+
+The read only state displays the entered value together with its label. Have no visual cues associated with text entry, such as an active input cursor or editable states. Long content should remain readable and should not be unnecessarily truncated.
+
+[Read more about the read only pattern](https://seb.io/patterns/read-only)

package/generated/mcp/tokens.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-09-11T08:28:13.167Z",
+  "generatedAt": "2026-09-14T14:33:39.118Z",
   "categories": {
     "space": {
       "description": "Spacing tokens for padding, margin, gap, and other spacing",

package/generated/react/context-menu/index.d.ts

@@ -16,6 +16,7 @@ export declare const GdsContextMenu: {
         label?: string;
         maxHeight?: number;
         placement?: import("@floating-ui/utils").Placement | undefined;
+        nonmodal?: boolean;
         connectedCallback?: (() => void) | undefined;
         render?: (() => any) | undefined;
         margin?: string | undefined;

package/generated/react/index.d.ts

@@ -26,8 +26,8 @@ export * from './grouped-list/index.js';
 export * from './img/index.js';
 export * from './input/index.js';
 export * from './link/index.js';
-export * from './list/index.js';
 export * from './mask/index.js';
+export * from './list/index.js';
 export * from './menu-button/index.js';
 export * from './pagination/index.js';
 export * from './backdrop/index.js';
@@ -37,8 +37,8 @@ export * from './rich-text/index.js';
 export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './signal/index.js';
-export * from './switch/index.js';
 export * from './spinner/index.js';
+export * from './switch/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './text/index.js';

package/generated/react/index.js

@@ -26,8 +26,8 @@ export * from "./grouped-list/index.js";
 export * from "./img/index.js";
 export * from "./input/index.js";
 export * from "./link/index.js";
-export * from "./list/index.js";
 export * from "./mask/index.js";
+export * from "./list/index.js";
 export * from "./menu-button/index.js";
 export * from "./pagination/index.js";
 export * from "./backdrop/index.js";
@@ -37,8 +37,8 @@ export * from "./rich-text/index.js";
 export * from "./segmented-control/index.js";
 export * from "./select/index.js";
 export * from "./signal/index.js";
-export * from "./switch/index.js";
 export * from "./spinner/index.js";
+export * from "./switch/index.js";
 export * from "./table/index.js";
 export * from "./tabs/index.js";
 export * from "./text/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.22.1",
+  "version": "3.23.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/utils/decorators/resize-observer.d.ts

@@ -1,5 +1,15 @@
 import type { LitElement } from 'lit';
 type Handler = () => void;
+interface ResizeObserverConfig {
+    /**
+     * A selector for the elements to observe, resolved against the shadow root of the
+     * component. The matching elements are re-resolved after each render, so elements
+     * that are rendered by later updates are picked up automatically.
+     *
+     * When omitted, the host element is observed.
+     */
+    selector?: string;
+}
 /**
  * Runs when the size of the component changes.
  *
@@ -10,6 +20,15 @@ type Handler = () => void;
  *  // Do some layout calculation or something
  * }
  * ```
+ *
+ * Pass a `selector` to observe elements inside the shadow root instead of the host,
+ * for cases where the host size does not reflect the size of the observed content:
+ * ```javascript
+ * \@resizeObserver({ selector: 'thead th' })
+ * handleHeaderResize() {
+ *  // Do some layout calculation or something
+ * }
+ * ```
  */
-export declare function resizeObserver(): <ElemClass extends LitElement>(proto: ElemClass, propertyKey: string, descriptor: TypedPropertyDescriptor<Handler>) => void;
+export declare function resizeObserver({ selector }?: ResizeObserverConfig): <ElemClass extends LitElement>(proto: ElemClass, propertyKey: string, descriptor: TypedPropertyDescriptor<Handler>) => void;
 export {};

package/utils/decorators/resize-observer.js

@@ -1,8 +1,20 @@
 import "../../chunks/chunk.CAV4X6PU.js";
-function resizeObserver() {
+function resizeObserver({ selector } = {}) {
   return (proto, propertyKey, descriptor) => {
     const connectedCallback = proto.connectedCallback;
     const disconnectedCallback = proto.disconnectedCallback;
+    const { updated } = proto;
+    function observeTargets() {
+      const observer = this.__resizeObservers?.[propertyKey];
+      if (!observer)
+        return;
+      if (!selector) {
+        observer.observe(this);
+        return;
+      }
+      observer.disconnect();
+      this.shadowRoot?.querySelectorAll(selector).forEach((element) => observer.observe(element));
+    }
     proto.connectedCallback = function() {
       connectedCallback?.call(this);
       this.__resizeObservers = this.__resizeObservers || {};
@@ -13,11 +25,17 @@ function resizeObserver() {
           descriptor.value?.call(this);
         }, 20);
       });
-      this.__resizeObservers[propertyKey].observe(this);
+      observeTargets.call(this);
     };
+    if (selector) {
+      proto.updated = function(changedProperties) {
+        updated?.call(this, changedProperties);
+        observeTargets.call(this);
+      };
+    }
     proto.disconnectedCallback = function() {
       disconnectedCallback?.call(this);
-      this.__resizeObservers[propertyKey].disconnect();
+      this.__resizeObservers?.[propertyKey]?.disconnect();
     };
   };
 }

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 = "-a567c2";
+const VER_SUFFIX = "-3deb38";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])