@sebgroup/green-core 3.30.0 → 3.32.0

package/generated/mcp/components.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-15T13:54:55.150Z",
+  "generatedAt": "2026-10-23T12:21:25.298Z",
   "components": [
     {
       "name": "gds-alert",
@@ -9,6 +9,7 @@
       "path": "alert/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -21,6 +22,7 @@
       "path": "avatar/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -57,6 +59,7 @@
       "path": "badge/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -69,6 +72,7 @@
       "path": "blur/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -93,6 +97,7 @@
       "path": "breadcrumbs/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -105,6 +110,7 @@
       "path": "button/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -117,6 +123,7 @@
       "path": "calendar/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -129,6 +136,7 @@
       "path": "card/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -153,6 +161,7 @@
       "path": "card-pattern-01/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -165,6 +174,7 @@
       "path": "checkbox/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -189,6 +199,7 @@
       "path": "coachmark/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -201,6 +212,7 @@
       "path": "context-menu/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -213,6 +225,7 @@
       "path": "datepicker/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -225,6 +238,7 @@
       "path": "details/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -237,6 +251,7 @@
       "path": "dialog/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -249,6 +264,7 @@
       "path": "div/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -261,6 +277,7 @@
       "path": "divider/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -273,6 +290,7 @@
       "path": "dropdown/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ],
@@ -295,6 +313,7 @@
       "path": "fab/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -319,6 +338,7 @@
       "path": "filter-chips/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -331,6 +351,7 @@
       "path": "flex/",
       "files": [
         "api",
+        "guidelines",
         "instructions",
         "angular",
         "react"
@@ -344,6 +365,7 @@
       "path": "form-summary/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -392,6 +414,7 @@
       "path": "grid/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -440,6 +463,7 @@
       "path": "input/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -452,6 +476,7 @@
       "path": "link/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -464,6 +489,7 @@
       "path": "list/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -488,6 +514,7 @@
       "path": "list-item-pattern-01/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -512,6 +539,7 @@
       "path": "menu-button/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -560,6 +588,7 @@
       "path": "pagination/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -572,6 +601,7 @@
       "path": "popover/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -584,6 +614,7 @@
       "path": "progress/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -596,6 +627,7 @@
       "path": "radio/",
       "files": [
         "api",
+        "guidelines",
         "instructions",
         "angular",
         "react"
@@ -621,6 +653,7 @@
       "path": "rich-text/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -645,6 +678,7 @@
       "path": "segmented-control/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ],
@@ -663,6 +697,7 @@
       "path": "select/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -711,6 +746,7 @@
       "path": "signal/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -723,6 +759,7 @@
       "path": "slider/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -735,6 +772,7 @@
       "path": "spinner/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -747,6 +785,7 @@
       "path": "switch/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -783,6 +822,7 @@
       "path": "table/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -795,6 +835,7 @@
       "path": "tabs/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -807,6 +848,7 @@
       "path": "text/",
       "files": [
         "api",
+        "guidelines",
         "instructions",
         "angular",
         "react"
@@ -820,6 +862,7 @@
       "path": "textarea/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -832,6 +875,20 @@
       "path": "theme/",
       "files": [
         "api",
+        "guidelines",
+        "angular",
+        "react"
+      ]
+    },
+    {
+      "name": "gds-tooltip",
+      "tagName": "gds-tooltip",
+      "className": "GdsTooltip",
+      "description": "",
+      "path": "tooltip/",
+      "files": [
+        "api",
+        "guidelines",
         "angular",
         "react"
       ]
@@ -844,6 +901,7 @@
       "path": "video/",
       "files": [
         "api",
+        "guidelines",
         "angular",
         "react"
       ]

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

@@ -0,0 +1,33 @@
+# Context menu
+
+A context menu displays a list of contextual actions.
+
+
+## Overview
+
+### Custom trigger button
+
+The context menu trigger button can have an icon or custom text slotted.
+
+### Menu item
+
+In a menu item you can slot in text and icons along other layout components.
+
+### Label
+
+It can be visually displayed, or hidden but still available to screen readers.
+
+### Guidelines
+
+Use the context menu to give users all the options when you can’t fit them in the regular view, or to avoid cluttering the interface.
+
+###   Destructive items
+
+Some items in the menu may be destructive. Typical example is Delete. These items behave like the delete-button and should be displayed in red.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for context menus

package/generated/mcp/context-menu/index.json

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

package/generated/mcp/datepicker/guidelines.md

@@ -0,0 +1,44 @@
+# Datepicker
+
+⁠The datepicker allows users to select a date.
+
+
+## Overview
+
+### 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
+
+
+
+### Usage
+
+Use datepicker when a complete date should be entered.
+
+### Size
+
+The datepicker comes in two sizes.
+
+- **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/pattern/read-only)
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for date pickers

package/generated/mcp/datepicker/index.json

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

package/generated/mcp/details/guidelines.md

@@ -0,0 +1,24 @@
+# Details
+
+The details component is a collapsible section that helps organize and hide content until needed.
+
+
+## Overview
+
+### Usage
+
+Details provide similar semantics and functionality as the native `<details>` html element, including the ability to connect several details together to form an accordion.
+
+Accordions or single details components are commonly used to manage dense information in interfaces like FAQs, settings panels, or forms. Saving space, reducing cognitive overload, and improving scannability while maintaining a clean, organized layout.
+
+Use it when presenting large amounts of secondary or optional information that users don’t need to see all at once.
+
+### Size
+
+The details component comes in two sizes:
+
+*   **Large** (default)
+    
+*   **Small**
+
+### Do's and don'ts

package/generated/mcp/details/index.json

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

package/generated/mcp/dialog/guidelines.md

@@ -0,0 +1,35 @@
+# Dialog
+
+⁠A dialog appears in front of content to provide critical information or ask for a decision.
+
+
+## Overview
+
+### Features
+
+Dialogs are modal, meaning they block interaction with the rest of the application or interface until the user addresses the dialog (e.g., by clicking a button, entering input, or closing it). This ensures the user focuses on the dialog's content before returning to the main workflow, and also ensures that keyboard and screen reader focus is kept within the dialog.
+
+By default, the dialog will close when the user clicks the backdrop, but this behavior can be opted out from if the dialog needs to stay open until a flow is completed, for example.
+
+### Variants
+
+The dialog can be shown either as a regular dialog window or as a slide-out.
+
+#### Regular
+
+The regular window is positioned in the center of the screen.
+
+#### Slide-out
+
+The slide-out is positioned on the right-hand side and always takes up the full height of the viewport (minus padding). Width can be customized to suite various needs.
+
+### Usage
+
+Dialogs are powerful tools for focusing user attention, but their use should be deliberate to avoid disrupting the user experience.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for dialogs

package/generated/mcp/dialog/index.json

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

package/generated/mcp/div/guidelines.md

@@ -0,0 +1,3 @@
+# Div
+
+Div is a base element in the declarative layout system.

package/generated/mcp/div/index.json

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

package/generated/mcp/divider/guidelines.md

@@ -0,0 +1,24 @@
+# Divider
+
+Divider creates visual and semantic separation between content.
+
+
+## Overview
+
+### Features
+
+#### Colors
+
+The color of the divider line can be set to a color token.
+
+#### Spacing
+
+Spacing around the divider can be controlled using the `size` attribute.
+
+### Usage
+
+Use dividers to support visual hierarchy when headings or spacing alone aren’t sufficient, such as between groups of menu items.
+
+By default dividers have a semantic meaning in the browser but it can be marked as presentational using `role="presentation"` .
+
+### Do's and don'ts

package/generated/mcp/divider/index.json

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

package/generated/mcp/dropdown/guidelines.md

@@ -0,0 +1,96 @@
+# Dropdown
+
+A dropdown enables the user to choose one or multiple options from a list.
+
+
+## Overview
+
+### Sizes
+
+- **Large**
+- **Small**: Used in tables and in certain cases where space is very limited. (Custom layouts are not supported.)
+
+
+
+### Features
+
+#### Label
+
+All dropdown 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.
+
+### Single select
+
+Use this version when users should select only one option from the list.
+
+### Multi select
+
+Use this version when users should be able to select one or multiple options from the list.
+
+### Search
+
+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.
+
+
+
+### Option groups
+
+If the options can be grouped, this helps users find choices in large lists. The group can include a badge showing the number of options it contains.
+
+### Custom option layout
+
+The text slot for each dropdown and option supports a custom layout with multiple values, typically used for account selection. These layouts can be customised for specific use cases. Note that these fields are taller than a regular dropdown.
+
+#### Combo box
+
+This field allows users to type directly into it, like a standard input field. As they type, a list of matching options appears. If they enter an option that isn’t in the list, it is still accepted as a valid choice.
+
+#### 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.
+
+### 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/pattern/read-only)
+
+
+## UX Guidelines
+
+### Writing UX text for drop-downs
+
+### Use clear and informative words
+
+### Placeholder text
+
+### Capitalisation rules

package/generated/mcp/dropdown/index.json

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