@sebgroup/green-core 3.23.0 → 3.24.1

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

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

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

package/generated/mcp/details/guidelines.md

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

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

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

package/generated/mcp/divider/guidelines.md

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

@@ -1,96 +0,0 @@
-# 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/patterns/read-only)
-
-
-## UX Guidelines
-
-### Writing UX text for drop-downs
-
-### Use clear and informative words
-
-### Placeholder text
-
-### Capitalisation rules

package/generated/mcp/fab/guidelines.md

@@ -1,27 +0,0 @@
-# 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/filter-chips/guidelines.md

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

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

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

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

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

package/generated/mcp/input/guidelines.md

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

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

@@ -1,16 +0,0 @@
-# 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-item-pattern-01/guidelines.md

@@ -1,49 +0,0 @@
-# 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/menu-button/guidelines.md

@@ -1,39 +0,0 @@
-# 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