@sebgroup/green-core 3.23.0 → 3.24.1

package/generated/mcp/pagination/guidelines.md

@@ -1,24 +0,0 @@
-# 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/popover/guidelines.md

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

package/generated/mcp/radio/guidelines.md

@@ -1,74 +0,0 @@
-# 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.
-
-
-
-### 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
-
-### Writing UX text for radio buttons
-
-### Radio button options
-
-### We ask the customers, they answer
-
-### Be consistent
-
-### Keep it simple

package/generated/mcp/rich-text/guidelines.md

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

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

@@ -1,31 +0,0 @@
-# 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/select/guidelines.md

@@ -1,29 +0,0 @@
-# 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/patterns/read-only)
-
-### Do's and don'ts
-
-
-## UX Guidelines
-
-### Writing UX text for selects

package/generated/mcp/signal/guidelines.md

@@ -1,14 +0,0 @@
-# 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/spinner/guidelines.md

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

package/generated/mcp/switch/guidelines.md

@@ -1,41 +0,0 @@
-# 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.
-
-### 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
-
-### Writing UX text for toggle
-
-### Keep labels short
-
-### Provide context where needed

package/generated/mcp/table/guidelines.md

@@ -1,169 +0,0 @@
-# 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/tabs/guidelines.md

@@ -1,64 +0,0 @@
-# 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/text/guidelines.md

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

package/generated/mcp/textarea/guidelines.md

@@ -1,73 +0,0 @@
-# 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/patterns/read-only)

package/generated/mcp/theme/guidelines.md

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

package/generated/mcp/video/guidelines.md

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