@sebgroup/green-core 3.31.0 → 3.32.1

package/generated/mcp/textarea/guidelines.md

@@ -0,0 +1,73 @@
+# Textarea
+
+Textarea allow users to input text and digits on multiple lines.
+
+
+## Overview
+
+### Variants
+
+We provide two versions of textarea.
+
+- **Default**
+- **Floating label** (coming soon): Can only be used in specific contexts. Limited features due to accessibility.
+
+
+
+### Features
+
+#### Label
+
+All input fields must have a label to ensure clarity and accessibility. Labels help users understand the purpose of the field, including those using assistive technologies.
+
+#### Optional field indicator
+
+We only ask for required information. If some fields are optional, we let users know by adding "(optional)" in brackets next to the field label. The word "(optional)" is shown in regular font weight to distinguish it from the label.
+
+#### Support text
+
+Use this to explain how to fill in the field, for example how to count or what to include.
+
+### Contextual help
+
+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.
+
+
+
+#### Leading icon
+
+A leading icon visually reinforces the purpose of the field, helping users to understand what type of information is needed.
+
+#### Clearable
+
+To make it easy for users to clear a field, an x-icon button can be placed at the end of the field. This is commonly used in search/filter forms.
+
+#### Error message
+
+Used to indicate that a selection must be made from the dropdown or that there is an error with the selected option.
+
+### Character counter
+
+For fields with a character limit, a counter can be added to show users how many characters they have left.
+
+The counter starts with the maximum allowed characters. As the user types, the remaining characters decrease. When the limit is nearly reached, the counter turns yellow. When or if the user exceeds the limit, the counter turns red.
+
+If the user ignores this and attempts to submit, an error message will appear indicating that the maximum character limit has been reached.
+
+### Resize
+
+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.
+
+
+
+### 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/pattern/read-only)

package/generated/mcp/textarea/index.json

@@ -2,6 +2,7 @@
   "name": "gds-textarea",
   "files": {
     "api": "api.md",
+    "guidelines": "guidelines.md",
     "angular": "angular.md",
     "react": "react.md"
   }

package/generated/mcp/theme/guidelines.md

@@ -0,0 +1,3 @@
+# Theme
+
+Theme summary

package/generated/mcp/theme/index.json

@@ -2,6 +2,7 @@
   "name": "gds-theme",
   "files": {
     "api": "api.md",
+    "guidelines": "guidelines.md",
     "angular": "angular.md",
     "react": "react.md"
   }

package/generated/mcp/tokens.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-20T14:04:05.382Z",
+  "generatedAt": "2026-10-26T08:09:40.445Z",
   "categories": {
     "space": {
       "description": "Spacing tokens for padding, margin, gap, and other spacing",

package/generated/mcp/tooltip/guidelines.md

@@ -0,0 +1,107 @@
+# Tooltip
+
+A tooltip provides short, supplementary information about an element on hover or focus. 
+
+
+## Overview
+
+### When to use
+
+Tooltips should help users understand an unfamiliar element or provide additional context without interrupting the task. A common use case is an icon-only button where the tooltip describes the action, for example “Download”, “Copy” or “More options”. If the information is important enough that users should always see it, display it directly in the interface instead.
+
+#### Use a tooltip when
+
+- An icon or control may not be immediately understood without a label.
+- A short explanation can clarify the meaning or purpose of an element.
+- The information is helpful but not essential for completing the task.
+- Additional context would otherwise add unnecessary visual clutter to the interface.
+
+
+
+#### Avoid using a tooltip for:
+
+- information users need in order to understand or complete a task. (essential instructions).
+- validation error messages.
+- important warnings or status information
+- information that users need to compare or reference.
+- repeating text that is already visible in the interface.
+- long information texts.
+
+
+
+### Behaviour
+
+#### A tooltip appears when the associated element receives:
+
+- Pointer hover.
+- Keyboard focus.
+
+
+
+#### The tooltip should disappear when:
+
+- The pointer leaves the trigger.
+- Focus moves away from the trigger.
+- The user presses Esc.
+
+
+
+#### Delay
+
+Use a short delay before showing a tooltip on hover to prevent tooltips from appearing while users simply move the pointer across the interface.  
+For keyboard focus, the tooltip should appear without creating unnecessary delay in the interaction.
+
+### Placement
+
+The tooltip should appear close to its trigger without covering the trigger itself. Preferred placement can be determined by the component, but the tooltip should automatically change position when there is not enough available space. Placement should adapt to the viewport rather than causing the tooltip to be clipped or extend outside the visible area.
+
+#### Typical placements are:
+
+- Top
+- Bottom
+- Left
+- Right
+
+
+
+### Variants
+
+Tooltips are available with or without a pointer. Use a pointer when the tooltip needs to be clearly associated with a larger area or element. For smaller elements, such as icon buttons, a pointer is often unnecessary as the connection is already clear. Both variants can be used depending on the context and placement.
+
+### Accessibility
+
+Tooltips is available to both pointer and keyboard users. The trigger is focusable when it is an interactive element, and the tooltip is displayed when the trigger receives keyboard focus. The tooltip is programmatically associated with its trigger so assistive technologies can access the same information.
+
+#### Tooltip vs accessible name
+
+A tooltip does not automatically replace an accessible name.  
+For example, an icon-only button still needs an accessible name such as “Download statement”, regardless of whether the same text is visually presented in a tooltip. Avoid using a tooltip as the only way of making an otherwise inaccessible control understandable.
+
+#### Touch devices
+
+Tooltips should not contain information that is only available through hover, since hover is not reliably available on touch devices.  
+If information is important for mobile users, consider displaying it directly in the interface or using another pattern designed for explicit interaction. Do not make essential functionality dependent on a tooltip.
+
+### Tooltip vs popover
+
+Use a tooltip for short, supplementary, non-interactive information.
+
+Use a popover when the content:
+
+- Requires user interaction.
+- Contains links, buttons or other controls.
+- Contains more extensive information.
+- Needs to remain open while the user interacts with it.
+
+
+
+#### A useful rule of thumb
+
+Tooltip = short information only.

+
+Popover = information and interaction.
+
+
+## UX Guidelines
+
+### Writing UX text for tooltip

package/generated/mcp/tooltip/index.json

@@ -2,6 +2,7 @@
   "name": "gds-tooltip",
   "files": {
     "api": "api.md",
+    "guidelines": "guidelines.md",
     "angular": "angular.md",
     "react": "react.md"
   }

package/generated/mcp/video/guidelines.md

@@ -0,0 +1,3 @@
+# Video
+
+Video summary

package/generated/mcp/video/index.json

@@ -2,6 +2,7 @@
   "name": "gds-video",
   "files": {
     "api": "api.md",
+    "guidelines": "guidelines.md",
     "angular": "angular.md",
     "react": "react.md"
   }

package/generated/react/form-summary/index.d.ts

@@ -1,7 +1,11 @@
 import { GdsFormSummary as GdsFormSummaryClass } from '../../../components/form-summary/summary.component';
 import { getReactComponent } from '../../../utils/react';
+type GdsFormSummaryProps = React.ComponentProps<ReturnType<typeof getReactComponent<GdsFormSummaryClass>>> & {
+    /** Fired when an item in the summary is clicked, before focus moves to the related control. The detail object contains the control. Can be cancelled with event.preventDefault() to handle focus yourself. */
+    onGdsControlFocus?: (event: CustomEvent<any>) => void;
+};
 export declare const GdsFormSummary: {
-    (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsFormSummaryClass>>> & {
+    (props: GdsFormSummaryProps & {
         ref?: React.Ref<GdsFormSummaryClass>;
     }): import("react").ReactElement<Omit<Omit<{
         hideErrors?: boolean;
@@ -676,3 +680,4 @@ export declare const GdsFormSummary: {
     } & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;
     displayName: string;
 };
+export {};

package/generated/react/index.d.ts

@@ -1,14 +1,14 @@
 export * from './alert/index.js';
 export * from './avatar/index.js';
-export * from './blur/index.js';
 export * from './badge/index.js';
+export * from './blur/index.js';
 export * from './breadcrumbs/index.js';
 export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
-export * from './card-linked/index.js';
 export * from './checkbox/index.js';
 export * from './coachmark/index.js';
+export * from './card-linked/index.js';
 export * from './context-menu/index.js';
 export * from './datepicker/index.js';
 export * from './details/index.js';
@@ -45,9 +45,9 @@ export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './text/index.js';
 export * from './textarea/index.js';
+export * from './theme/index.js';
 export * from './tooltip/index.js';
 export * from './video/index.js';
-export * from './theme/index.js';
 export * from './card-pattern-01/index.js';
 export * from './list-item-pattern-01/index.js';
 export * from './avatar-group/index.js';
@@ -65,7 +65,6 @@ export * from './sensitive-account/index.js';
 export * from './sensitive-date/index.js';
 export * from './sensitive-number/index.js';
 export * from './tab/index.js';
-export * from './tab-panel/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -378,5 +377,6 @@ 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 './tab-panel/index.js';
 export * from './menu-item/index.js';
 export * from './menu-heading/index.js';

package/generated/react/index.js

@@ -1,14 +1,14 @@
 export * from "./alert/index.js";
 export * from "./avatar/index.js";
-export * from "./blur/index.js";
 export * from "./badge/index.js";
+export * from "./blur/index.js";
 export * from "./breadcrumbs/index.js";
 export * from "./button/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
-export * from "./card-linked/index.js";
 export * from "./checkbox/index.js";
 export * from "./coachmark/index.js";
+export * from "./card-linked/index.js";
 export * from "./context-menu/index.js";
 export * from "./datepicker/index.js";
 export * from "./details/index.js";
@@ -45,9 +45,9 @@ export * from "./table/index.js";
 export * from "./tabs/index.js";
 export * from "./text/index.js";
 export * from "./textarea/index.js";
+export * from "./theme/index.js";
 export * from "./tooltip/index.js";
 export * from "./video/index.js";
-export * from "./theme/index.js";
 export * from "./card-pattern-01/index.js";
 export * from "./list-item-pattern-01/index.js";
 export * from "./avatar-group/index.js";
@@ -65,7 +65,6 @@ export * from "./sensitive-account/index.js";
 export * from "./sensitive-date/index.js";
 export * from "./sensitive-number/index.js";
 export * from "./tab/index.js";
-export * from "./tab-panel/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -378,5 +377,6 @@ 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 "./tab-panel/index.js";
 export * from "./menu-item/index.js";
 export * from "./menu-heading/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.31.0",
+  "version": "3.32.1",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

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

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