@sebgroup/green-core 3.31.0 → 3.32.0

package/generated/mcp/fab/guidelines.md

@@ -0,0 +1,27 @@
+# FAB
+
+Floating action button persists across screens for constant access to features that needs to be accessible at all times.
+
+
+## Overview
+
+### Usage
+
+The FAB is a high-visibility button used to promote a **key action** on a screen. It typically floats above the content, anchored to a corner (usually bottom-right or bottom-center on mobile).
+
+Use the FAB when a single, standout action is needed such as "Add", "Create", or "Start". It should never compete with other primary actions and should be used **sparingly** to avoid visual clutter.
+
+### Variants
+
+The FAB can be adapted based on layout and context:
+
+*   **FAB** – A circular button with an icon (e.g. a plus sign for “Add”)
+    
+*   **Extended FAB** – A wider button with both an icon and a label (e.g. “Add item”). Useful when more clarity is needed.
+
+### Do’s and don’ts
+
+
+## UX Guidelines
+
+### Writing UX text for FAB's

package/generated/mcp/fab/index.json

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

package/generated/mcp/filter-chips/guidelines.md

@@ -0,0 +1,47 @@
+# Filter chips
+
+Filter chips allow users to narrow down the data they want to see on the page.
+
+
+## Overview
+
+### States
+
+The filter chip component comes in two states, "enabled" - can be selected and "selected" - can be unselected.
+
+- **Enabled** – The default state, displaying only a label. Use this variant when presenting available filter options. 
+- **Selected** – When selected, the chips updates to show a checkmark icon alongside the label, indicating an active filter. The selected filter can be unselected.
+
+
+
+### Example
+
+If a user has accounts in three countries, only those three countries should be shown as filter chips. If they have accounts in just one country, there's no need to show a country filter at all.

+
+To improve clarity and support informed decisions, display the number of results each selected filter will return. This gives users immediate feedback on how their choices are narrowing or broadening the data set.
+
+### Sizes
+
+The filter chips comes in two sizes:
+
+- **Large** (default)
+- **Small**
+
+
+
+### Removable filter chips
+
+If the purpose is to display an already applied filter that can be removed, use a **Button** with a trailing remove icon. This pattern clearly communicates that the filter is active and that the available action is to remove it, rather than change its selection state.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for filter chips
+
+### Avoid the & sign
+
+### Do not mix word classes
+
+### Do's and don'ts

package/generated/mcp/filter-chips/index.json

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

package/generated/mcp/flex/guidelines.md

@@ -0,0 +1 @@
+# Flex

package/generated/mcp/flex/index.json

@@ -3,6 +3,7 @@
   "files": {
     "api": "api.md",
     "instructions": "instructions.md",
+    "guidelines": "guidelines.md",
     "angular": "angular.md",
     "react": "react.md"
   }

package/generated/mcp/form-summary/angular.md

@@ -15,3 +15,11 @@ Use the component in your Angular templates:
   <!-- content -->
 </gds-form-summary>
 ```
+
+## Event Handling
+
+Events are emitted using Angular output syntax. Event names are converted from kebab-case to camelCase:
+
+| Web Component Event | Angular Output | Handler Example |
+|---------------------|----------------|-----------------|
+| `gds-control-focus` | `gdsControlFocus` | `(gdsControlFocus)="handler($event)"` |

package/generated/mcp/form-summary/api.md

@@ -14,6 +14,13 @@
 | `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. |
 
 
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `gds-control-focus` | `CustomEvent<any>` | 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. |
+
+
 ## Slots
 
 | Name | Description |

package/generated/mcp/form-summary/guidelines.md

@@ -0,0 +1,39 @@
+# Form summary
+
+Form summary shows all form errors in one place.
+
+
+## Overview
+
+### Features
+
+Form summary works automatically when placed in a form with form controls from Green Core. It has two update modes, `default` and `reactive`. In the default mode, a `refresh()` method needs to be called for the component to update and reflect the current state of the form. In the `reactive` mode, it will update on the fly as soon as the status of a control in the form changes. The `reactive` mode requires less setup to use, but the `default` mode allows for more control over the behavior.
+
+#### Fieldset labels
+
+To reflect the structure of the form, the summary content can be grouped using fieldset labels. These act as headings for related fields and help users quickly understand how the information is organized. By mirroring the same grouping as in the form, it becomes easier to recognize and review the content, improving both clarity and confidence before submission.
+
+### Accessibility
+
+Semantically, the form summary is represented as a navigation region containing an unordered list of links.
+
+### Compatibility
+
+Form summary is mainly intended for use with form controls from Green Core, but it also works with generic native form controls by using data-attributes.
+
+### Usage
+
+For long forms which are dynamically submitted (meaning the page does not reload), place the form summary at the bottom of the form, close to the submit button, so that it appears in view for the user without scrolling.
+
+For long forms which are server-side driven (page reloads when submitting), place the form summary at the top so that it will be the first thing the user sees when the page reloads.
+
+Short forms, where all controls are easily in view without scrolling, form summary is generally not necessary, since all the errors are already in view.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for form summaries
+
+### Multiple fields with same name

package/generated/mcp/form-summary/index.json

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

package/generated/mcp/form-summary/react.md

@@ -15,3 +15,11 @@ Use the component as a React JSX element:
   {/* content */}
 </GdsFormSummary>
 ```
+
+## Event Handling
+
+Events are handled using React event handler props. Event names are converted from kebab-case to camelCase with an "on" prefix:
+
+| Web Component Event | React Handler Prop | Handler Example |
+|---------------------|--------------------|-----------------|
+| `gds-control-focus` | `onGdsControlFocus` | `onGdsControlFocus={handler}` |

package/generated/mcp/grid/guidelines.md

@@ -0,0 +1,3 @@
+# Grid
+
+The grid is a custom element that provides a flexible grid system.

package/generated/mcp/grid/index.json

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

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-20T14:04:05.572Z",
+  "generatedAt": "2026-10-23T12:21:25.298Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-10-20T14:04:05.572Z",
+  "generatedAt": "2026-10-23T12:21:25.298Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

package/generated/mcp/input/guidelines.md

@@ -0,0 +1,127 @@
+# Input
+
+An input lets users enter and edit text or numerical values in forms.
+
+
+## Overview
+
+### Variants
+
+To be able to use forms in all context's we provide two versions of input fields.
+
+- **Default**
+- Coming soon **Floating label** (label inside): Can only be used in specific contexts. Limited features due to accessibility. Read more about how to use the Floating label on the UX text page [Input field floating label](https://seb.io/component/input/ux-text#input-field-floating-label-5)
+
+
+
+#### Sizes
+
+The input field comes in two sizes.
+
+- **Large**
+- **Small**: used in tables and in some special cases where the space is very limited.
+
+
+
+### Types
+
+The input component supports different input types, including text entry and file selection.
+
+### 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.
+
+#### 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 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.
+
+
+
+### Leading icon
+
+A leading icon visually reinforces the purpose of the field, helping users to understand what type of information is needed. For example: search fields or card number.
+
+#### 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.
+
+#### Badge
+
+Use it to show what the unit input value is.
+
+For example: EUR
+
+#### 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.
+
+#### Dynamic information
+
+(Not available for Floating label variant) Used to perform comparative calculations next to the field.
+
+#### Placeholder
+
+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
+
+
+## UX Guidelines
+
+### Input field default
+
+### Labels
+
+### Single-word or complete sentence
+
+### Write the time period in the label
+
+### Avoid fixed text inside the field
+
+### Display the currency with a badge
+
+### Placeholder text
+
+### Labels do’s and dont’s
+
+### Error message
+
+### Input field floating label
+
+### Do’s and dont’s input field floating label
+
+### Default or floating label?
+
+### Search field
+
+### Label support text for search field
+
+### Give ideas with examples
+
+### Search feedback

package/generated/mcp/input/index.json

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

package/generated/mcp/link/guidelines.md

@@ -0,0 +1,43 @@
+# Link
+
+A link navigates users to other pages or sections of content.
+
+
+## Overview
+
+### Usage
+
+Use links for navigation whether it’s within the same page, across pages, or to external sites. A good link is easy to recognize, descriptive, and accessible. It should clearly communicate where it will take the user, even when read out of context (for example, by a screen reader). Avoid using links for actions such as submitting forms or opening modals use buttons instead.
+
+### Variants
+
+#### Leading icon
+
+Use when an icon helps reinforce the meaning of the link (e.g., a document or download icon before the text).
+
+#### Trailing icon
+
+Use for links that lead to another page or outside the current application, such as external websites.
+
+#### Text decoration
+
+Used when a stronger visual indication is needed for example, in long bodies of text or when links need to stand out clearly from surrounding content.
+
+### Do’s and don’ts
+
+
+## UX Guidelines
+
+### Writing UX text for links
+
+### Only include necessary words
+
+### Placing links
+
+### Links within text
+
+### Link outside of the text
+
+### Links before a form component
+
+### Add items to a list

package/generated/mcp/link/index.json

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

package/generated/mcp/list/guidelines.md

@@ -0,0 +1,16 @@
+# List
+
+A list arranges related list items in a consistent vertical layout. 
+
+
+## Overview
+
+### List item
+
+A List item is a semantic container with no predefined internal layout. It provides a single content slot, allowing patterns or custom layouts to be projected into each item.
+
+### Accessibility
+
+The List component uses semantic list markup to communicate the relationship between list items, improving navigation and accessibility for assistive technologies.
+
+### Do's and don'ts

package/generated/mcp/list/index.json

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

package/generated/mcp/list-item-pattern-01/guidelines.md

@@ -0,0 +1,49 @@
+# List item pattern 01
+
+List item Pattern 01 provides a predefined layout for displaying structured information in a list.
+
+
+## Overview
+
+### When to use
+
+Use Pattern 01 when displaying structured information that users need to scan, compare or interact with. Common examples include:
+
+### Layout examples
+
+### Interaction
+
+Pattern 01 supports both static and interactive list items.
+
+Depending on the use case, a list item can be:
+
+- **Static** – displays information without interaction.
+- **Selectable** – allows users to select one or more items.
+- **Navigational** – takes users to another view or destination.
+- **Selectable and navigational** – supports both selection and navigation within the same item.
+
+Use the same interaction pattern consistently throughout a list to create a predictable user experience.
+
+### Slots
+
+List item pattern 01 is built around three slots that help organise content in a consistent and predictable way.
+
+#### Lead slot
+
+Use for icons, avatars, or custom leading content. When `selectable` is enabled, it shows a checkbox.
+
+#### Content slot
+
+The Content slot is fully customizable and can contain any content needed for your use case.
+
+For the recommended layout, use the `Items` property. It provides predefined content styles and supports one, two or three content columns, making it easy to create consistent and scannable list items.
+
+If your layout requires more flexibility than the `Items` property supports, you can instead provide custom content through the Content slot.
+
+#### Trail slot
+
+Use the **Trail** slot for secondary content, such as values, status, metadata or actions. Keep trailing content concise and avoid placing the primary information here.
+
+When a list item is configured as navigational**** (`href)`, a chevron icon is automatically displayed in the Trail slot. When configured as `selectable`**** and**** `navigational`, the Trail slot instead displays an icon button with a chevron icon, indicating both selection and navigation.
+
+### Do's and don'ts

package/generated/mcp/list-item-pattern-01/index.json

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

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

@@ -0,0 +1,39 @@
+# Menu button
+
+A menu button combines button and link behaviors for navigation menus.
+
+
+## Overview
+
+### Usage
+
+Use the menu button to create clear and accessible navigation. Choose the appropriate combination of text and icon depending on the context:
+
+*   **Text only** is best for straightforward links where the label clearly communicates the destination.
+    
+*   **Text with icon** adds clarity, especially when the icon reinforces the meaning (e.g., a user icon for profile-related links).
+    
+*   **Icon only** can be used when space is limited, but only if the icon is widely recognized and its meaning is clear.
+    
+
+Menu buttons have a selected state that visually indicate the current page or section.
+
+### Sizes
+
+The menu button comes in three sizes to fit different layout needs and navigation contexts:

+
+*   **Large** - Typically used in primary navigation where space allows for larger, more prominent buttons. It provides good readability and clear touch targets.
+    
+*   **Medium** - Works well when space is limited but readability and clarity are still important.
+    
+*   **Small** - Optimized for tighter layouts and smaller viewports. The text and icon are vertically aligned to maintain visual balance in compact spaces, such as in mobile navigation or secondary toolbars.
+    
+
+Regardless of size, the height of the menu button will adapt to match the height set by the container. This ensures consistent alignment and spacing across the entire navigation.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for menu buttons

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

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

package/generated/mcp/pagination/guidelines.md

@@ -0,0 +1,24 @@
+# Pagination
+
+Pagination helps users navigate large result sets by dividing content into clear, manageable pages. 
+
+
+## Overview
+
+### Usage
+
+Pagination is used to divide large amounts of content into smaller pages, making it easier to navigate and understand a dataset. It is most useful when content cannot be displayed at once, or when users need to move through information in a defined order.
+
+Use pagination when it improves readability and control, for example in tables or long lists, search results, or content listings. Avoid using pagination for small datasets or when continuous scrolling provides a better experience.
+
+
+
+### Behaviour
+
+Pagination should clearly indicate the current page and keep navigation consistent and predictable. Unavailable actions should be disabled at the start or end of the page range. When used with data tables, the item range and total number of items should be displayed.
+
+### Accessibility
+
+Pagination should use a semantic navigation structure and ensure that all controls are keyboard accessible. The current page should be communicated programmatically, and visual styling alone should not be relied on to convey state.
+
+### Do's and don'ts

package/generated/mcp/pagination/index.json

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

package/generated/mcp/popover/guidelines.md

@@ -0,0 +1,3 @@
+# Popover
+
+A popover is a temporary view that appears above other content.

package/generated/mcp/popover/index.json

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

package/generated/mcp/progress/guidelines.md

@@ -0,0 +1,42 @@
+# Progress
+
+Shows the progress and status of an ongoing process.
+
+
+## Overview
+
+### Usage
+
+Progress communicates the status of an ongoing process and helps users understand that something is happening and, when progress can be measured, how much remains.
+
+Use Progress for processes that take noticeable time, such as uploading, downloading or processing information.
+
+Use **determinate** progress when progress can be measured, and **indeterminate** progress when it cannot.
+
+### Determinate and indeterminate
+
+Use **determinate** when progress can be measured. The progress bar fills as the process progresses and can show the current value as a percentage or other meaningful information.
+
+Use **indeterminate** when the remaining work cannot be measured. The animated progress bar communicates that the process is ongoing without indicating how much remains.
+
+### States
+
+Progress supports **in progress**, **completed** and **failed** states. Completed and failed states use status colour and an icon to clearly communicate the outcome.
+
+### Size
+
+Progress is available in **large** and **small**. Use large by default. Use small in compact layouts when you use other small components, or when progress needs less visual prominence.
+
+### Layout
+
+By default, the label and value are displayed above the progress bar using **column**.
+
+Use **column-reverse** to place them below the progress bar when this better suits the surrounding layout.
+
+### Label and value
+
+Use a short label that describes what is happening, such as **Uploading** or **Downloading**.The value shows progress as a percentage by default. Use **trail** to replace it with more meaningful information when needed, such as **42 of 100 MB** or **Step 2 of 3**.Use **hide-value** when the label is useful but the exact value is not needed.Use **plain** when the surrounding context already communicates what is happening and only the progress bar is needed.
+
+### Accessibility
+
+Progress is announced to assistive technologies without interrupting the user as the value changes. Updates are communicated in a way that avoids unnecessary or repetitive announcements.

package/generated/mcp/progress/index.json

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