@sebgroup/green-core 3.14.0 → 3.15.0

package/gds-element.js

@@ -16,7 +16,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "3.14.0";
+    this.semanticVersion = "3.15.0";
     this.syncFirstRender = false;
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);

package/generated/mcp/button/guidelines.md

@@ -9,7 +9,7 @@ A button can be tapped or clicked to perform an action.
 
 Variant is used to communicate the intent of the button, such as positive, negative, notice.
 
-Rank determines the priority of the button, and can be primary, secondary or tertiary. All variants are each available in those three ranks.
+Rank determines the priority of the button, and can be primary, secondary or tertiary. All variants are each available in those three ranks. 
 
 ### Neutral
 
@@ -37,13 +37,7 @@ The icon button comes in the same ranks and variants as regular buttons.
 
 ### Split button
 
-⚠️ Coming soon.
-
-The split button always has a primary action. This action is most likely to be used by the customer as the default action.When users click on the primary action, it triggers this action directly, such as submitting a form, confirming a selection, or initiating a process.
-
-The users can click on the dropdown arrow to reveal a dropdown menu providing secondary or additional options.
-
-The split button comes in both primary and secondary.
+The split button always has a primary action. This action is most likely to be used by the customer as the default action. The users can click on the icon button to reveal a context menu providing secondary or additional options.
 
 ### Next and back button
 
@@ -58,17 +52,18 @@ Choose size depending on context. Avoid to mix different sizes in the same conte
 
 ### Desktop placements
 
-*   **Left**: In overviews and widgets, the user tends to read from top to bottom following the left side, therefore the buttons are kept to the left. Place the primary button furthest to the left.
-    
-*   **Right**: Modals and flows move the user forward (interpreted as to the right in western culture), therefore the buttons are placed to the right. Place the primary button furthest to the right.
+- **Left**: In overviews and widgets, the user tends to read from top to bottom following the left side, therefore the buttons are kept to the left. Place the primary button furthest to the left.
+- **Right**: Modals and flows move the user forward (interpreted as to the right in western culture), therefore the buttons are placed to the right. Place the primary button furthest to the right.
+
+
 
 ### In a mobile device
 
-*   **One button**, use the full width of the content area.
-    
-*   **Two buttons**, aim to place them side by side. It is allowed to stack them if needed.
-    
-*   **Three buttons**, consider the need for all of them. "cancel or close" might be x in the top right corner. Worst case scenario: place two buttons side by side and one tertiary button under.
+- **One button**, use the full width of the content area.
+- **Two buttons**, aim to place them side by side. It is allowed to stack them if needed.
+- **Three buttons**, consider the need for all of them. "cancel or close" might be x in the top right corner. Worst case scenario: place two buttons side by side and one tertiary button under.
+
+
 
 ### Do’s and don’ts
 

package/generated/mcp/card-pattern-01/guidelines.md

@@ -11,17 +11,17 @@ All card patterns are built on top of the base card component. Card pattern 01 i
 
 Each variant consists of:
 
-*   **header slot** – img, icon or custom
-    
-*   **main area** – includes heading and excerpt
-    
-*   **footer** **slot** – supports actions depending on card type (see below).
+- **header slot** – img, icon or custom
+- **main area** – includes heading and excerpt
+- **footer** **slot** – supports actions depending on card type (see below).
+
+
 
 ### Header
 
 #### Empty
 
-No header content.
+No header content. 
 
 #### Image
 

package/generated/mcp/components.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-10T08:31:07.742Z",
+  "generatedAt": "2026-06-16T12:14:15.660Z",
   "components": [
     {
       "name": "gds-alert",

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

@@ -5,13 +5,14 @@ Filter chips allow users to narrow down the data they want to see on the page.
 
 ## Overview
 
-### Variants
+### 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.
 
-The filter chip component comes in two variants, each supporting a different stage of the filtering experience:
 
-*   **Selectable** – The default state, displaying only a label. Use this variant when presenting available filter options. When selected the chips updates to show a checkmark icon alongside the label, indicating an active filter.
-    
-*   **Removable** – Used to represent an applied filter. This chip includes a label and a close (×) icon, allowing users to remove the filter with a single click or tap.
 
 ### Example
 
@@ -23,9 +24,14 @@ To improve clarity and support informed decisions, display the number of results
 
 The filter chips comes in two sizes:
 
-*   **Large** (default)
-    
-*   **Small**
+- **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
 

package/generated/mcp/icons.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-10T08:31:07.742Z",
+  "generatedAt": "2026-06-16T12:14:15.660Z",
   "icons": [
     {
       "name": "gds-icon-ai",

package/generated/mcp/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-10T08:31:07.742Z",
+  "generatedAt": "2026-06-16T12:14:15.660Z",
   "instructions": "./INSTRUCTIONS.md",
   "components": "./components.json",
   "icons": "./icons.json",

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

@@ -1 +1,62 @@
 # List item pattern 01
+
+List item pattern 01 is built on top of the base list and list item components and supports slot-based composition for flexible layouts and supports interactive row behavior.
+
+
+## Overview
+
+### Items
+
+Use items property to get predefined styling for 2-3 columns.
+
+Note: Use custom content directly in the row to be slotted into main, if you want to show more columns.
+
+#### With single item
+
+### Selectable and linked
+
+#### Selectable
+
+Enable `selectable` to show a checkbox and support checked/unchecked states.
+
+#### Href
+
+Add `href` to make the row interactive as a link. Displays a chevron in the trail slot.
+
+#### selectable + href
+
+Combine checkbox selection and link navigation in the same row.
+
+### Padding inline
+
+Use the `padding-inline` property to customize horizontal padding on a list item. Set to `0` to remove padding. Defaults to `s`.
+
+#### With custom padding-inline
+
+#### With no padding-inline
+
+### Slots
+
+List item pattern 01 is built on top of the base list and list item components and supports slot-based composition for flexible layouts and interactions.
+
+### Lead slot
+
+Use for icons, avatars, or custom leading content. When `selectable` is enabled, it shows a checkbox.
+
+#### With icon
+
+#### With avatar
+
+#### With no lead
+
+### Main
+
+Use custom content directly in the row.
+
+#### Custom content - text
+
+#### Custom content - badge
+
+### Lead slot
+
+Use for actions such as links or buttons. When `href` is set, the row renders a chevron link in the trail.

package/generated/mcp/pagination/api.md

@@ -17,8 +17,9 @@
 | `options` | `array` | `-` | Options array to set the nunber of items per page. Defaults to `[5, 10, 25, 50]` |
 | `jump` | `boolean` | `-` | Enables first and last button |
 | `hideOptions` | `boolean` | `-` | Hide options |
+| `simple` | `boolean` | `-` | Enables a compact navigation mode with only previous/next arrows and a centered "Page N" indicator. |
 | `density` | `DensityMode` | `-` | Controls density mode on pagination Accepts: `comfortable`, `compact`, `spacious` |
-| `label` | `string` | `-` | The text summary to display on the left side (e.g. "1-10 of 100"). If a slot named "label" is provided, this property is ignored. |
+| `label` | `string` | `-` | The text summary to display on the left side (e.g. "1-10 of 100"). |
 | `margin` | `string \| undefined` | `-` | Style Expression Property that controls the `margin` property. Only accepts space tokens. |
 | `'margin-inline'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-inline` property. Only accepts space tokens. |
 | `'margin-block'` | `string \| undefined` | `-` | Style Expression Property that controls the `margin-block` property. Only accepts space tokens. |

package/generated/mcp/tabs/guidelines.md

@@ -1,65 +1,52 @@
 # Tabs
 
-Tabs allow users to navigate between groups of related content at the same level of hierarchy.
+Tabs organize related content into separate panels, displaying one section at a time.
 
 
 ## Overview
 
-### Default
+### Usage
 
-Tabs are used as local navigation to organise related content into logical groupings. Users can switch between views without losing the context of the page.
+Use tabs when content can be divided into distinct sections that belong to the same context and hierarchy level.
 
-### Overflow behaviour
+Examples:
 
-When tabs exceed the available width, all tabs that cannot fit are grouped into a list in a fold-out modal. On mobile with only two tabs, each tab takes up 50% of the width.
+- Account details, Transactions, and Documents
+- Overview, Holdings, and Activity
+- Personal information, Contact details, and Preferences
 
-### Tabs vs segmented control
 
-Tabs and segmented controls can look similar, but they serve very different purposes. Choosing the wrong component leads to user confusion and misaligned expectations.
 
-#### Use tabs when
+### Number of tabs
 
-Use tabs to navigate between **completely different views or distinct sections of content**. Each tab reveals unique content that is unrelated to what the other tabs show.
+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.
 
-Think of tabs as separate binders — switching tabs takes the user to an entirely different set of content.
-
-*   The content under each tab is meaningfully different in nature
-    
-*   Users are unlikely to need to compare the contents of multiple tabs at once
-    
-*   The tabs act as primary or secondary navigation within the page
-    
-*   Content groupings are based on different topics, data sets, or tasks
-
-#### Use segmented control when
-
-Use segmented control to **filter or toggle the presentation of the same underlying content**. The data does not change — only how it is displayed or sorted.
+### Leading and trailing content
 
-Think of segmented control as a switch that changes the lens through which you view the same document.
+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.
 
-*   You are switching between different representations of the same data (e.g. list vs. grid, weekly vs. monthly)
-    
-*   The options act as filters or view toggles within a single context
-    
-*   The component is embedded within a form or a content area, not used as page navigation
+### Tabs vs. segmented control
 
-### Guidelines
+Tabs and segmented controls may appear similar but serve different purposes.
 
-Tabs are best suited for a small number of clearly distinct content groupings. Order tabs according to user needs, placing the most commonly accessed tab first.
+Use tabs when switching between different content panels.
 
-### Disabled tabs
+Examples:
 
-Individual tabs can be disabled to indicate that a section is unavailable. Use this sparingly and only when the reason for unavailability is clear to the user.
+- Overview, Transactions, and Documents
+- Personal details, Contact details, and Security settings
 
-### Link tabs
+Use segmented control when changing a setting, mode, filter, or representation of content.
 
-Tabs can render as anchor links, navigating to a new URL rather than switching panel content inline. Use link tabs for top-level or cross-page navigation where each tab corresponds to a distinct URL.
+Examples:
 
-### Leading and trailing content
+- List view or Grid view
+- Week, Month, or Year
+- Amount or Percentage
 
-Tab items support a leading slot for icons and a trailing slot for supplementary content such as notification badges or counts. Use these slots to aid recognition or communicate status — not for decoration.
+Think of tabs as organizing content into sections, while segmented controls change how content is displayed.
 
-### Leading and trailing content guidelines
+### Do's and don'ts
 
 
 ## UX Guidelines

package/generated/mcp/tokens.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-10T08:31:07.591Z",
+  "generatedAt": "2026-06-16T12:14:15.501Z",
   "categories": {
     "space": {
       "description": "Spacing tokens for padding, margin, gap, and other spacing",

package/generated/react/index.d.ts

@@ -10,13 +10,13 @@ export * from './card-linked/index.js';
 export * from './checkbox/index.js';
 export * from './coachmark/index.js';
 export * from './context-menu/index.js';
-export * from './details/index.js';
 export * from './datepicker/index.js';
-export * from './dialog/index.js';
+export * from './details/index.js';
 export * from './div/index.js';
+export * from './dialog/index.js';
 export * from './divider/index.js';
-export * from './fab/index.js';
 export * from './dropdown/index.js';
+export * from './fab/index.js';
 export * from './filter-chips/index.js';
 export * from './flex/index.js';
 export * from './form-summary/index.js';
@@ -27,8 +27,8 @@ export * from './input/index.js';
 export * from './link/index.js';
 export * from './list/index.js';
 export * from './mask/index.js';
-export * from './menu-button/index.js';
 export * from './pagination/index.js';
+export * from './menu-button/index.js';
 export * from './backdrop/index.js';
 export * from './popover/index.js';
 export * from './radio/index.js';
@@ -37,15 +37,15 @@ export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './signal/index.js';
 export * from './spinner/index.js';
-export * from './table/index.js';
 export * from './switch/index.js';
+export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './text/index.js';
 export * from './textarea/index.js';
 export * from './theme/index.js';
 export * from './video/index.js';
-export * from './list-item-pattern-01/index.js';
 export * from './card-pattern-01/index.js';
+export * from './list-item-pattern-01/index.js';
 export * from './avatar-group/index.js';
 export * from './breadcrumb/index.js';
 export * from './checkbox-group/index.js';
@@ -56,10 +56,12 @@ export * from './formatted-date/index.js';
 export * from './formatted-number/index.js';
 export * from './list-item/index.js';
 export * from './radio-group/index.js';
-export * from './sensitive-account/index.js';
 export * from './segment/index.js';
+export * from './sensitive-account/index.js';
 export * from './sensitive-date/index.js';
 export * from './sensitive-number/index.js';
+export * from './tab/index.js';
+export * from './tab-panel/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -371,8 +373,6 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
-export * from './tab/index.js';
-export * from './tab-panel/index.js';
 export * from './menu-item/index.js';
 export * from './menu-heading/index.js';
 export * from './option/index.js';

package/generated/react/index.js

@@ -10,13 +10,13 @@ export * from "./card-linked/index.js";
 export * from "./checkbox/index.js";
 export * from "./coachmark/index.js";
 export * from "./context-menu/index.js";
-export * from "./details/index.js";
 export * from "./datepicker/index.js";
-export * from "./dialog/index.js";
+export * from "./details/index.js";
 export * from "./div/index.js";
+export * from "./dialog/index.js";
 export * from "./divider/index.js";
-export * from "./fab/index.js";
 export * from "./dropdown/index.js";
+export * from "./fab/index.js";
 export * from "./filter-chips/index.js";
 export * from "./flex/index.js";
 export * from "./form-summary/index.js";
@@ -27,8 +27,8 @@ export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./list/index.js";
 export * from "./mask/index.js";
-export * from "./menu-button/index.js";
 export * from "./pagination/index.js";
+export * from "./menu-button/index.js";
 export * from "./backdrop/index.js";
 export * from "./popover/index.js";
 export * from "./radio/index.js";
@@ -37,15 +37,15 @@ export * from "./segmented-control/index.js";
 export * from "./select/index.js";
 export * from "./signal/index.js";
 export * from "./spinner/index.js";
-export * from "./table/index.js";
 export * from "./switch/index.js";
+export * from "./table/index.js";
 export * from "./tabs/index.js";
 export * from "./text/index.js";
 export * from "./textarea/index.js";
 export * from "./theme/index.js";
 export * from "./video/index.js";
-export * from "./list-item-pattern-01/index.js";
 export * from "./card-pattern-01/index.js";
+export * from "./list-item-pattern-01/index.js";
 export * from "./avatar-group/index.js";
 export * from "./breadcrumb/index.js";
 export * from "./checkbox-group/index.js";
@@ -56,10 +56,12 @@ export * from "./formatted-date/index.js";
 export * from "./formatted-number/index.js";
 export * from "./list-item/index.js";
 export * from "./radio-group/index.js";
-export * from "./sensitive-account/index.js";
 export * from "./segment/index.js";
+export * from "./sensitive-account/index.js";
 export * from "./sensitive-date/index.js";
 export * from "./sensitive-number/index.js";
+export * from "./tab/index.js";
+export * from "./tab-panel/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -371,8 +373,6 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
-export * from "./tab/index.js";
-export * from "./tab-panel/index.js";
 export * from "./menu-item/index.js";
 export * from "./menu-heading/index.js";
 export * from "./option/index.js";

package/generated/react/pagination/index.d.ts

@@ -16,6 +16,7 @@ export declare const GdsPagination: {
         options?: number[] | undefined;
         jump?: boolean;
         hideOptions?: boolean;
+        simple?: boolean;
         density?: "compact" | "comfortable" | "spacious" | undefined;
         label?: string;
         render?: (() => any) | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.CAV4X6PU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-eadd84";
+const VER_SUFFIX = "-fd32f8";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])