@sebgroup/green-core 3.31.0 → 3.32.1

package/generated/mcp/radio/guidelines.md

@@ -0,0 +1,74 @@
+# Radio
+
+A radio button is a form control that allows users to select one of the predefined set of choices.
+
+
+## Overview
+
+### Variants
+
+- **Default**
+- **Contained**: used only in combination with other contained form components.
+- **Contained extended(coming soon)**: The contained version but including Label support text.
+
+
+
+### Features
+
+#### Label
+
+All individual radio buttons must have a label to ensure clarity and accessibility. When radio buttons are grouped, the group must have a header label. Labels help users understand the purpose of the radio buttons, including those using assistive technologies.
+
+#### Label support
+
+This can be used for both the header and individual radio buttons. Use this to explain how to fill in the field, for example how to count or what to include. Contained radio buttons don’t have support text for the individual radio buttons.
+
+### 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.
+
+
+
+### Error message
+
+If an error occurs we mark the entire group of options with error. The error is described with an error message.
+
+### Behaviour
+
+- **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.
+
+
+
+### 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)
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for radio buttons
+
+### Radio button options
+
+### We ask the customers, they answer
+
+### Be consistent
+
+### Keep it simple

package/generated/mcp/radio/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/rich-text/guidelines.md

@@ -0,0 +1,3 @@
+# Rich text
+
+Rich text can be used to wrap generic HTML content and apply typography styles.

package/generated/mcp/rich-text/index.json

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

package/generated/mcp/segmented-control/guidelines.md

@@ -0,0 +1,31 @@
+# Segmented control
+
+Segmented control allows users to select a single option, immediately changing the display to reflect their selection. It is used for switching views or view options, not for navigation.
+
+
+## Overview
+
+### Size
+
+The segmented control comes in two sizes large (default) and small.
+
+### Behaviour
+
+Component acts as button and trigger a change on click. By default the first item is selected. Only one segment can be active simultaneously.
+
+### Icons
+
+Each segment button has optional leading and trailing icons. Use icons when you need to reinforce the meaning of the label.
+
+### Overflow
+
+Segments can have different widths depending on the content. If there are too many segments to fit in the container, scroll buttons will appear to the left and/or right.
+
+Segment width can also be controlled individually.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for segmented controls

package/generated/mcp/segmented-control/index.json

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

package/generated/mcp/select/guidelines.md

@@ -0,0 +1,29 @@
+# Select
+
+A select enables the user to choose one or multiple options from a list.
+
+
+## Overview
+
+### Usage
+
+Use this component instead of dropdown when you need to leverage the inherent behavior of the native select element, for example when native accessibility features, some of which are not currently replicable in custom dropdowns, are required. Usability on mobile devices is also sometimes better with native select elements.
+
+Don't use this component when you need to customize the dropdown behavior or appearance, or when you need to display complex content in the dropdown, or require multi-select functionality.
+
+### Option list
+
+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/pattern/read-only)
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for selects

package/generated/mcp/select/index.json

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

package/generated/mcp/signal/guidelines.md

@@ -0,0 +1,14 @@
+# Signal
+
+A signal draws attention to notifications and new content.
+
+
+## Overview
+
+### Usage
+
+The signal is mainly used on buttons and menu buttons. The signal's style matches the button's rank and variant by default.
+
+### Example
+
+On the intranet we use the signal on the “What's new?”-button to indicate a new function or feauture has been released. The button will trigger a popover with more information about what is new.

package/generated/mcp/signal/index.json

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

package/generated/mcp/slider/guidelines.md

@@ -0,0 +1,86 @@
+# Slider
+
+A slider allows users to select a value or range of values by moving handles along a track. 
+
+
+## Overview
+
+### When to use
+
+Use a slider when users benefit from adjusting a value visually. 
  
+It works well when:
+
+- The value is part of a continuous or stepped range, such as volume, amount or intensity.
+- Adjusting and exploring the value is more important than entering a precise number.
+
+
+
+### Behaviour
+
+The slider can be adjusted using pointer, touch or keyboard.
+
+- Moving the handle updates the value according to the defined step.
+- The value indicator displays the current value while the slider is being adjusted.
+- The slider should provide immediate visual feedback as the value changes.
+
+
+
+### Value, range and step
+
+A slider can be used to select a single value or a range between two values.
+
+- **Single value** – uses one handle to select a value between a defined minimum and maximum.
+- **Range** – uses two handles to select a lower and upper value within a defined minimum and maximum.
+
+Both types can use steps to define the interval between selectable values. Tick marks can be used to visually represent fixed steps when users choose between a limited set of predefined values.
+
+### Value display
+
+By default, the slider includes a textbox that displays the selected value and allows users to enter a precise value. The textbox can be omitted when the selected value or its effect is clearly displayed elsewhere in the interface. For example, adjusting an interest rate could update a monthly cost displayed in a separate summary or card.
+
+#### Textbox
+
+For a single-value slider, one textbox displays the selected value. For a range slider, two textboxes display the selected lower and upper values. The slider and textbox should always stay synchronised. Changing the value in either one should update the other.
+
+#### Value indicator
+
+A bubble appears next to the handle while the slider is being adjusted. It displays the current value and updates as the handle moves. For a range slider, the value indicator displays the value of the handle currently being adjusted.
+
+### Sizes
+
+As all form components the slider comes in both large and small.
+
+### Read only
+
+Displays the selected value or range without allowing the handles to be moved. The value should not rely on the handle position alone. The value is provided as text so it can be easily understood and accessed by assistive technologies.  
+If the slider itself does not add useful context in read only mode, consider presenting the resulting value as text instead.
+
+[Read more about the read only pattern](http://seb.io/pattern/read-only)
+
+### Accessibility
+
+The slider is built on the native HTML , providing built-in semantics and keyboard interaction.
A slider must expose its current value, minimum value and maximum value to assistive technologies. This is handled out of the box when using the slider component from Green.
+
+Ensure that:
+
+- The slider has an accessible name describing what the value controls.
+- The selected value is communicated through more than the visual position of the handle.
+
+
+
+#### Keyboard
+
+When the slider has focus:
+
+- Arrow right / Arrow up increases the value by one step.
+- Arrow left / Arrow down decreases the value by one step.
+- Home moves to the minimum value.
+- End moves to the maximum value.
+
+
+
+### Do's and don'ts
+
+### Min and max labels
+
+Min and max labels can be used to show the lowest and highest values of the slider. Use them when the boundaries help users understand the scale and make a selection. Labels aren’t needed when the scale is already clear from the surrounding context.

package/generated/mcp/slider/index.json

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

package/generated/mcp/spinner/guidelines.md

@@ -0,0 +1,6 @@
+# Spinner
+
+
+## UX Guidelines
+
+### Writing UX text for spinners

package/generated/mcp/spinner/index.json

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

package/generated/mcp/switch/guidelines.md

@@ -0,0 +1,41 @@
+# Switch
+
+A toggle lets users switch a setting on or off. 
+
+
+## Overview
+
+### Behaviour
+
+Changing the switch updates the state immediately. The current state should always be clear to the user, and the component should provide feedback for different interaction states such as hover, focus, pressed, and disabled.
+
+### Size
+
+The switch is available in two sizes: default and small. The small size should only be used in compact views where space is limited, such as dense layouts or smaller components.
+
+### Label
+
+Labels describe the setting, not the state. They should be short and specific, remain clear in both on and off states, and not require additional context to understand.
+
+For example, use labels like “Email notifications”, “Show balance”, or “Enable dark mode”. Avoid labels such as “On / Off”, “Active”, or “Enabled”, as they do not clearly communicate what the toggle controls.
+
+### Accessibility
+
+A toggle must have a visible and persistent label and communicate its state programmatically as on or off. It should be operable via keyboard and include a visible focus indicator. The state should not rely on color alone to be understood, and the component must meet contrast requirements in all states.
+
+### 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/pattern/read-only)
+
+### Do's and Don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for toggle
+
+### Keep labels short
+
+### Provide context where needed

package/generated/mcp/switch/index.json

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

package/generated/mcp/table/guidelines.md

@@ -0,0 +1,169 @@
+# Table
+
+A table displays structured data for overview and comparison.
+
+
+## Overview
+
+The table component is used to display structured data in rows and columns. It supports overview, comparison and data-driven tasks where users need to scan or interact with multiple items. Tables should represent meaningful data relationships and must not be used for layout or visual alignment.
+
+### Density
+
+The density property allows customizing the table's visual spacing with these options:
+
+*   **Comfortable** (Default) - Standard spacing for balanced readability
+    
+*   **Compact** - Reduced spacing to maximize information density
+    
+*   **Spacious** - Increased spacing for enhanced readability
+
+### Variants
+
+The `variant` property controls the visual style of the table container card. There are three variants available:
+
+1.  **Primary**
+    
+2.  **Secondary**
+    
+3.  **Tertiary**
+    
+
+**Naming will change on the next major release:**  
+Primary - Neutral 01, Secondary - Neutral 02, Tertiary - Neutral 02 (Outlined boolean).
+
+### Striped
+
+When the `striped`option is enabled, alternating background colors are applied to even rows.
+
+### Sorting
+
+Table head cells can support sorting when enabled. Sorting helps users organise data and compare values within a column.
+
+*   A sorting indicator is shown on hover when sorting is enabled.
+    
+*   Selecting a column head sorts the table by that column.
+    
+*   The sorting indicator remains visible while the column is sorted.
+    
+*   Selecting the same column head again reverses the sort order.
+    
+*   In right-aligned columns, the sorting indicator is positioned to the left, with the column label placed to the right.
+    
+*   Only one column can be sorted at a time.
+
+#### Sorting guidelines
+
+*   Enable sorting only when it adds clear value for the user.
+    
+*   Use sorting primarily for columns with comparable values, such as numbers, dates or statuses.
+    
+*   Avoid enabling sorting on columns where order is not meaningful.
+    
+*   Ensure the sorting state is clearly communicated visually.
+
+#### Sorting accessibility considerations
+
+*   Sorting must be available using keyboard interaction.
+    
+*   The current sort state should be communicated to assistive technologies.
+    
+*   The sorting indicator should not be the only way to convey sorting state.
+
+### Interactions
+
+Tables may support interaction when it helps users complete their task. Only add interaction when it adds clear value and does not reduce clarity. Supported behaviours may include:
+
+*   Column sorting
+    
+*   Row selection
+    
+*   Bulk actions
+    
+*   Interactive cells such as links or status indicators
+
+### Cell
+
+The table supports multiple cell types, each mapped to corresponding Green Design System components and their available properties. Any cell type can be used in the main value, lead or trail slot.
+
+1.  **Badge**
+    
+2.  **Image**
+    
+3.  **Icon**
+    
+4.  **Button**
+    
+5.  **Link**
+    
+6.  **Context menu**
+    
+7.  **Formatted text - Number, account, date**
+
+### Actions
+
+All the cell content types can be used on actions. Actions accepts an array of cell types such as buttons. When you need to use two buttons align them to the left. If you have more than two buttons use the context menu. Actions will always show in the end of the row.
+
+### Formatting
+
+**Column justification**  
+Columns are left-aligned by default, with options for right alignment and space-between layouts. This is useful for columns where values and actions need clear separation and consistent alignment across rows.
+
+**Column width and wrapping**  
+Columns can have custom width. When width is set, content will wrap within the cell.
+
+**Cell vertical alignment**  
+Cells are vertically centered by default and can be aligned to the start. Start alignment is recommended when content wraps, ensuring consistent top alignment across rows.
+
+**Sortable columns**  
+Columns are left-aligned by default, with the label on the left and the sorting indicator on the right. For right-aligned columns, the sorting indicator is placed on the left and the label on the right.
+
+### Responsive
+
+When the responsive option is enabled, the table adapts its layout for smaller screens. Horizontal scrolling is used until the viewport is smaller than 760px, at which point rows are restructured into a card-like format with column names on the left and corresponding values on the right.
+
+### Headline and summery
+
+The table supports optional **headline** and **summary** properties to ensure a consistent presentation. Use headline and summary to describe the data, not interactions or controls. Keep both short and descriptive
+
+*   **Headline** An optional title that describes the content of the table.
+    
+*   **Summary** An optional short description that provides additional context about the table content.
+
+### Searchable 
+
+If the table is searchable (set by a boolean), the header shows a search field.
+
+### Settings
+
+If you enable the settings, a dropdown for choosing columns is visable.
+
+### Pagination
+
+The pagination is placed in the footer, ([read more about the pagination here](https://seb.io/component/pagination)), and displays an item range indicating the currently visible rows and the total number of items, for example “1–10 of 100”.
+
+### Plain
+
+When the `plain` option is enabled, the table is rendered without a header or footer, displaying only the data table.
+
+### Slots
+
+The table supports state slots for error, empty and no results states. The table header includes dedicated slots for other Green Design System components, such as dropdowns or buttons, used for filtering and exporting data.
+
+### Guidelines
+
+*   Use clear and descriptive column labels.
+    
+*   Keep the structure predictable and consistent.
+    
+*   Text content should be left-aligned for readability.
+    
+*   Numeric values should be right-aligned, preferably aligned by decimal, to support comparison.
+    
+*   Avoid repeating information in table cells when it can be communicated through the column header.
+
+### Do's and Don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for table

package/generated/mcp/table/index.json

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

package/generated/mcp/tabs/guidelines.md

@@ -0,0 +1,64 @@
+# Tabs
+
+Tabs organize related content into separate panels, displaying one section at a time.
+
+
+## Overview
+
+### Usage
+
+Use tabs when content can be divided into distinct sections that belong to the same context and hierarchy level.
+
+Examples:
+
+- Account details, Transactions, and Documents
+- Overview, Holdings, and Activity
+- Personal information, Contact details, and Preferences
+
+
+
+### Number of tabs
+
+Tabs work best when the number of options is limited. As the number of tabs increases, they become harder to scan and compare. If many options are required, consider whether another pattern would better support the user's task. When tabs exceed the available width, the tab bar becomes horizontally scrollable.
+
+In a mobile device it will have the same behaviour.
+
+### Sizes
+
+The tabs are available in large and small. Use the large default and the small variant only in contexts where you use other component in size small.
+
+### Leading and trailing content
+
+Tab items can include optional leading and trailing content. Use leading content, such as icons or avatars, to help identify a tab. Use trailing content, such as badges or counts, to provide additional context about the tab's content.
+
+### Tabs vs. segmented control
+
+Tabs and segmented controls may appear similar but serve different purposes.
+
+Use tabs when switching between different content panels.
+
+Examples:
+
+- Overview, Transactions, and Documents
+- Personal details, Contact details, and Security settings
+
+Use segmented control when changing a setting, mode, filter, or representation of content.
+
+Examples:
+
+- List view or Grid view
+- Week, Month, or Year
+- Amount or Percentage
+
+Think of tabs as organizing content into sections, while segmented controls change how content is displayed.
+
+### Do's and don'ts
+
+
+## UX Guidelines
+
+### Writing UX text for tabs
+
+### Tab labels
+
+### Common tab labels in overviews

package/generated/mcp/tabs/index.json

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

package/generated/mcp/text/guidelines.md

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

package/generated/mcp/text/index.json

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