@sebgroup/green-core 2.19.0 → 2.20.0-rc.20251218145150154

package/generated/react/video/index.js

@@ -1,13 +1,14 @@
 import "../../../chunks/chunk.QU3DSPNU.js";
-import { getReactComponent } from "../../../utils/react.js";
-import { GdsVideo as GdsVideoClass } from "../../../components/video/video.component.js";
 import { createElement } from "react";
+import { GdsVideo as GdsVideoClass } from "../../../components/video/video.component.js";
+import { getReactComponent } from "../../../utils/react.js";
 const GdsVideo = (props) => {
   GdsVideoClass.define();
   const JSXElement = getReactComponent("gds-video");
-  const propsWithClass = { ...props, class: props.className };
+  const propsWithClass = { ...props, class: props.className, ref: props.ref };
   return createElement(JSXElement, propsWithClass);
 };
+GdsVideo.displayName = "GdsVideo";
 export {
   GdsVideo
 };

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "2.19.0",
+  "version": "2.20.0-rc.20251218145150154",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
+  "bin": {
+    "green-mcp": "./bin/mcp-server/index.js"
+  },
   "author": "SEB Open Source <opensource@seb.se> (https://github.com/seb-oss)",
   "contributors": [],
   "license": "Apache-2.0",
@@ -30,7 +33,8 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "custom-elements-manifest": ">=2"
+    "custom-elements-manifest": ">=2",
+    "@modelcontextprotocol/sdk": ">=0.5.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -38,6 +42,9 @@
     },
     "custom-elements-manifest": {
       "optional": true
+    },
+    "@modelcontextprotocol/sdk": {
+      "optional": true
     }
   },
   "exports": {
@@ -51,7 +58,8 @@
     "./pure": "./pure.js",
     "./_primitives/*": "./primitives/*",
     "./react": "./generated/react/index.js",
-    "./patterns/*": "./patterns/*"
+    "./patterns/*": "./patterns/*",
+    "./mcp-server": "./build-scripts/mcp/server/index.js"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [
@@ -476,6 +484,8 @@
     "./components/mask/mask.js",
     "./components/menu-button/index.js",
     "./components/menu-button/menu-button.js",
+    "./components/pagination/index.js",
+    "./components/pagination/pagination.js",
     "./components/popover/backdrop.js",
     "./components/popover/index.js",
     "./components/popover/popover.js",
@@ -501,6 +511,11 @@
     "./components/signal/signal.js",
     "./components/spinner/index.js",
     "./components/spinner/spinner.js",
+    "./components/table/index.js",
+    "./components/table/table.imports.js",
+    "./components/table/table.js",
+    "./components/table/table.stories.data.js",
+    "./components/table/table.types.js",
     "./components/text/index.js",
     "./components/text/text.js",
     "./components/textarea/index.js",

package/primitives/field-base/field-base.component.d.ts

@@ -32,6 +32,7 @@ export declare class GdsFieldBase extends GdsElement {
     invalid: boolean;
     private _mainSlotElement;
     private _leadSlotOccupied;
+    private _leadHasBadge;
     private _trailSlotOccupied;
     private _actionSlotOccupied;
     constructor();

package/primitives/field-base/field-base.component.js

@@ -22,6 +22,7 @@ let GdsFieldBase = class extends GdsElement {
     this.disabled = false;
     this.invalid = false;
     this._leadSlotOccupied = false;
+    this._leadHasBadge = false;
     this._trailSlotOccupied = false;
     this._actionSlotOccupied = false;
     __privateAdd(this, _handleSlotChange, (slotName, event) => {
@@ -32,6 +33,9 @@ let GdsFieldBase = class extends GdsElement {
       );
       if (slotName === "lead") {
         this._leadSlotOccupied = slotOccupied;
+        this._leadHasBadge = slotOccupied && assignedNodes.some(
+          (node) => node.getAttribute?.("gds-element") === "gds-badge"
+        );
       } else if (slotName === "trail") {
         this._trailSlotOccupied = slotOccupied;
       } else if (slotName === "action") {
@@ -50,6 +54,7 @@ let GdsFieldBase = class extends GdsElement {
       multiline: this.multiline,
       disabled: this.disabled,
       "lead-slot-occupied": this._leadSlotOccupied,
+      "lead-has-badge": this._leadHasBadge,
       "trail-slot-occupied": this._trailSlotOccupied,
       "action-slot-occupied": this._actionSlotOccupied,
       small: this.size === "small"
@@ -135,6 +140,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], GdsFieldBase.prototype, "_leadSlotOccupied", 2);
+__decorateClass([
+  state()
+], GdsFieldBase.prototype, "_leadHasBadge", 2);
 __decorateClass([
   state()
 ], GdsFieldBase.prototype, "_trailSlotOccupied", 2);

package/primitives/field-base/field-base.styles.js

@@ -63,7 +63,7 @@ const style = css`
 
     .field.small {
       gap: var(--gds-sys-space-3xs);
-      padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs);
+      padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs);
       min-block-size: var(--gds-sys-space-2xl);
       block-size: var(--gds-sys-space-2xl);
       border-radius: var(--gds-sys-radius-2xs);
@@ -93,6 +93,14 @@ const style = css`
       padding-inline-start: var(--gds-sys-space-s);
     }
 
+    .field.lead-has-badge {
+      padding-inline-start: var(--gds-sys-space-2xs);
+    }
+
+    .field.small.lead-has-badge {
+      padding-inline-start: var(--gds-sys-space-2xs);
+    }
+
     .field.trail-slot-occupied {
       padding-inline-end: var(--gds-sys-space-xs);
     }

package/pure.d.ts

@@ -32,6 +32,7 @@ export * from './components/input/input.component';
 export * from './components/link/link.component';
 export * from './components/mask/mask.component';
 export * from './components/menu-button/menu-button.component';
+export * from './components/pagination/pagination.component';
 export * from './components/popover/popover.component';
 export * from './components/radio/radio-group/radio-group.component';
 export * from './components/radio/radio.component';
@@ -44,6 +45,7 @@ export * from './components/select/select.component';
 export * from './components/signal/signal.component';
 export * from './components/spinner/spinner.component';
 export * from './components/text/text.component';
+export * from './components/table/table.component';
 export * from './components/textarea/textarea.component';
 export * from './components/theme/theme.component';
 export * from './components/video/video.component';

package/pure.js

@@ -32,6 +32,7 @@ export * from "./components/input/input.component.js";
 export * from "./components/link/link.component.js";
 export * from "./components/mask/mask.component.js";
 export * from "./components/menu-button/menu-button.component.js";
+export * from "./components/pagination/pagination.component.js";
 export * from "./components/popover/popover.component.js";
 export * from "./components/radio/radio-group/radio-group.component.js";
 export * from "./components/radio/radio.component.js";
@@ -44,6 +45,7 @@ export * from "./components/select/select.component.js";
 export * from "./components/signal/signal.component.js";
 export * from "./components/spinner/spinner.component.js";
 export * from "./components/text/text.component.js";
+export * from "./components/table/table.component.js";
 export * from "./components/textarea/textarea.component.js";
 export * from "./components/theme/theme.component.js";
 export * from "./components/video/video.component.js";

package/shared-styles/rbcb-toggle.style.js

@@ -24,7 +24,6 @@ var rbcb_toggle_style_default = css`
     position: relative;
     width: var(--_toggle-size);
     height: var(--_toggle-size);
-    margin-block-start: calc(var(--gds-sys-space-5xs) * 2);
     cursor: pointer;
   }
 
@@ -92,7 +91,7 @@ var rbcb_toggle_style_default = css`
 
   .--indeterminate .rbcb__toggle {
     box-shadow: inset 0 0 0 var(--_toggle-border-width-checked)
-      var(--gds-sys-color-border-interactive);
+      var(--gds-sys-color-l3-neutral-01);
   }
 
   .--invalid.--indeterminate .rbcb__toggle {
@@ -138,6 +137,19 @@ var rbcb_toggle_style_default = css`
     color: var(--gds-sys-color-content-negative-01);
   }
 
+  /* Visually hidden checkbox   */
+  .visually-hidden-checkbox {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  .rbcb-wrapper {
+    position: relative;
+  }
+
   /*
    * When using the checkbox in a listbox, we need to remove the outline
    * from the checkbox since it exsist on the list item
@@ -146,31 +158,48 @@ var rbcb_toggle_style_default = css`
     outline: none;
   }
 
-  :host(:focus-visible) .rbcb__perimeter,
-  :host(:focus-within) .rbcb__perimeter {
+  :host([gds-element='gds-radio']:focus-visible) .rbcb__perimeter,
+  :host([gds-element='gds-radio']:focus-within) .rbcb__perimeter,
+  :host([gds-element='gds-checkbox']:focus-visible) .rbcb__perimeter,
+  :host([gds-element='gds-checkbox']:focus-within) .rbcb__perimeter,
+  .rbcb-wrapper:focus-visible .rbcb__perimeter,
+  .rbcb-wrapper:focus-within .rbcb__perimeter {
     outline-width: var(--gds-sys-space-4xs);
     scale: 1;
   }
 
   @media (hover: hover) {
-    .rbcb:hover:not(.--disabled) .rbcb__perimeter,
-    :host(:hover) .rbcb:not(.--disabled) .rbcb__perimeter {
+    :host([gds-element='gds-checkbox']:hover)
+      .rbcb:not(.--disabled)
+      .rbcb__perimeter,
+    :host([gds-element='gds-option']:hover)
+      .rbcb:not(.--disabled)
+      .rbcb__perimeter,
+    :host([gds-element='gds-radio']:hover)
+      .rbcb:not(.--disabled)
+      .rbcb__perimeter,
+    .rbcb:hover:not(.--disabled) .rbcb__perimeter {
       background-color: var(--_perimeter-bg-mix);
       scale: 1;
     }
   }
 
+  :host([gds-element='gds-checkbox']:active)
+    .rbcb:not(.--disabled)
+    .rbcb__perimeter,
+  :host([gds-element='gds-radio']:active)
+    .rbcb:not(.--disabled)
+    .rbcb__perimeter,
+  .rbcb:active:not(.--disabled) .rbcb__perimeter {
+    background-color: var(--_perimeter-bg-mix-active);
+    scale: 0.9;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .rbcb__toggle {
       transition: none;
     }
   }
-
-  .rbcb:active:not(.--disabled) .rbcb__perimeter,
-  :host(:active) .rbcb:not(.--disabled) .rbcb__perimeter {
-    background-color: var(--_perimeter-bg-mix-active);
-    scale: 0.9;
-  }
 `;
 export {
   rbcb_toggle_style_default as default

package/utils/helpers/casing.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Small casing utilities used across the core library.
+ * Keep these minimal and well-tested — many places in the repo
+ * have ad-hoc casing conversions and this centralizes them.
+ */
+/**
+ * Convert a kebab-case string to camelCase.
+ * Example: 'gds-close' -> 'gdsClose'
+ */
+/**
+ * String casing utilities for the Green Design System
+ *
+ * This module provides standardized case conversion functions used across
+ * the codebase for component names, event names, and other identifiers.
+ */
+/**
+ * Converts a kebab-case string to camelCase
+ *
+ * @example
+ * kebabToCamelCase('gds-close') // => 'gdsClose'
+ * kebabToCamelCase('my-component-name') // => 'myComponentName'
+ */
+export declare function kebabToCamelCase(str: string): string;
+/**
+ * Converts a kebab-case or camelCase string to PascalCase
+ *
+ * @example
+ * pascalCase('gds-button') // => 'GdsButton'
+ * pascalCase('gdsButton') // => 'GdsButton'
+ */
+export declare function toPascalCase(str: string): string;
+/**
+ * Converts a camelCase string to kebab-case
+ *
+ * @example
+ * camelToKebabCase('gdsClose') // => 'gds-close'
+ * camelToKebabCase('myComponentName') // => 'my-component-name'
+ */
+export declare function camelToKebabCase(str: string): string;
+/**
+ * Removes a prefix from a string (commonly used to remove 'gds-' from tag names)
+ */
+export declare function removePrefix(str: string, prefix: string): string;
+/**
+ * Converts an event name to React event handler convention
+ * Converts kebab-case to camelCase and adds 'on' prefix
+ *
+ * @example
+ * reactEventHandlerName('gds-close') // => 'onGdsClose'
+ */
+export declare function reactEventHandlerName(eventName: string): string;
+/**
+ * Angular event name conversion (kebab-case -> camelCase)
+ */
+export declare function angularEventName(eventName: string): string;
+declare const _default: {
+    kebabToCamelCase: typeof kebabToCamelCase;
+    pascalCase: typeof toPascalCase;
+    camelToKebabCase: typeof camelToKebabCase;
+    removePrefix: typeof removePrefix;
+    reactEventHandlerName: typeof reactEventHandlerName;
+    angularEventName: typeof angularEventName;
+};
+export default _default;

package/utils/helpers/casing.js

@@ -0,0 +1,42 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+function kebabToCamelCase(str) {
+  if (!str) return str;
+  return str.replace(/-([a-zA-Z0-9])/g, (_, letter) => letter.toUpperCase());
+}
+function toPascalCase(str) {
+  if (!str) return str;
+  const normalized = str.includes("-") ? str.split("-").map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join("") : str.charAt(0).toUpperCase() + str.slice(1);
+  return normalized;
+}
+function camelToKebabCase(str) {
+  if (!str) return str;
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function removePrefix(str, prefix) {
+  if (!str || !prefix) return str;
+  return str.startsWith(prefix) ? str.slice(prefix.length) : str;
+}
+function reactEventHandlerName(eventName) {
+  const camel = kebabToCamelCase(eventName);
+  return "on" + camel.charAt(0).toUpperCase() + camel.slice(1);
+}
+function angularEventName(eventName) {
+  return kebabToCamelCase(eventName);
+}
+var casing_default = {
+  kebabToCamelCase,
+  pascalCase: toPascalCase,
+  camelToKebabCase,
+  removePrefix,
+  reactEventHandlerName,
+  angularEventName
+};
+export {
+  angularEventName,
+  camelToKebabCase,
+  casing_default as default,
+  kebabToCamelCase,
+  reactEventHandlerName,
+  removePrefix,
+  toPascalCase
+};

package/utils/helpers/component-meta.d.ts

@@ -23,10 +23,18 @@ export declare class CemParser {
      * Extracts component data from a JavaScriptModule declaration
      */
     static extractComponentData(mod: JavaScriptModule, declaration: CustomElementDeclaration): ComponentData;
+    /**
+     * Checks if a component inherits from a specific base class
+     */
+    private static inheritsMembersFrom;
     /**
      * Checks if a component is a form control by looking for properties inherited from GdsFormControlElement
      */
     private static isFormControl;
+    /**
+     * Checks if a component is an icon by looking for properties inherited from GdsIcon
+     */
+    private static isIconComponent;
     /**
      * Checks if a component supports routing by looking for an 'href' property
      */
@@ -52,6 +60,10 @@ export declare class CemParser {
      * Extracts public methods
      */
     private static extractMethods;
+    /**
+     * Extracts subcomponent information from custom @subcomponent JSDoc tags
+     */
+    private static extractSubcomponents;
     /**
      * Maps CEM event types to TypeScript types
      */

package/utils/helpers/component-meta.js

@@ -3,7 +3,7 @@ class CemParser {
   /**
    * Loads and parses the CEM file
    */
-  static async loadManifest(cemPath = "../../custom-elements.json") {
+  static async loadManifest(cemPath = "../../../custom-elements.json") {
     const cemModule = await import(cemPath);
     return cemModule.default;
   }
@@ -35,17 +35,39 @@ class CemParser {
       slots: this.extractSlots(declaration),
       methods: this.extractMethods(declaration),
       isFormControl: this.isFormControl(declaration),
+      isIconComponent: this.isIconComponent(declaration),
       isLinkComponent: this.isLinkComponent(declaration),
-      isCheckboxComponent: this.isCheckboxComponent(tagName)
+      isCheckboxComponent: this.isCheckboxComponent(tagName),
+      subcomponents: this.extractSubcomponents(declaration)
     };
   }
   /**
-   * Checks if a component is a form control by looking for properties inherited from GdsFormControlElement
+   * Checks if a component inherits from a specific base class
    */
-  static isFormControl(declaration) {
+  static inheritsMembersFrom(declaration, className, modulePath) {
     if (!declaration.members) return false;
     return declaration.members.some(
-      (member) => member.inheritedFrom?.name === "GdsFormControlElement" && member.inheritedFrom?.module === "src/components/form/form-control.ts"
+      (member) => member.inheritedFrom?.name === className && member.inheritedFrom?.module === modulePath
+    );
+  }
+  /**
+   * Checks if a component is a form control by looking for properties inherited from GdsFormControlElement
+   */
+  static isFormControl(declaration) {
+    return this.inheritsMembersFrom(
+      declaration,
+      "GdsFormControlElement",
+      "src/components/form/form-control.ts"
+    );
+  }
+  /**
+   * Checks if a component is an icon by looking for properties inherited from GdsIcon
+   */
+  static isIconComponent(declaration) {
+    return this.inheritsMembersFrom(
+      declaration,
+      "GdsIcon",
+      "src/components/icon/icon.component.ts"
     );
   }
   /**
@@ -119,6 +141,19 @@ class CemParser {
       })) || []
     }));
   }
+  /**
+   * Extracts subcomponent information from custom @subcomponent JSDoc tags
+   */
+  static extractSubcomponents(declaration) {
+    const subcomponents = declaration.subcomponents;
+    if (!subcomponents || !Array.isArray(subcomponents) || subcomponents.length === 0) {
+      return void 0;
+    }
+    return subcomponents.map((sub) => ({
+      tagName: sub.tagName,
+      description: sub.description
+    }));
+  }
   /**
    * Maps CEM event types to TypeScript types
    */

package/utils/helpers/component-meta.types.d.ts

@@ -27,10 +27,14 @@ export interface ComponentData {
     methods: MethodInfo[];
     /** Whether this component is a form control (extends GdsFormControlElement) */
     isFormControl?: boolean;
+    /** Whether this component is an icon (extends GdsIcon) */
+    isIconComponent?: boolean;
     /** Whether this component supports routing (has an href property) */
     isLinkComponent?: boolean;
     /** Whether this component is a checkbox (gds-checkbox) that needs special boolean handling */
     isCheckboxComponent?: boolean;
+    /** Child components that are designed to be used with this component */
+    subcomponents?: SubcomponentInfo[];
 }
 export interface ComponentEvent {
     /** Original event name from web component (e.g., 'gds-close') */
@@ -46,6 +50,12 @@ export interface SlotInfo {
     /** Slot description */
     description?: string;
 }
+export interface SubcomponentInfo {
+    /** Tag name of the subcomponent (e.g., 'gds-segment') */
+    tagName: string;
+    /** Description of how the subcomponent is used */
+    description?: string;
+}
 export interface MethodInfo {
     /** Method name */
     name: string;

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

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

package/utils/react.d.ts

@@ -20,4 +20,12 @@ type GdsComponentProps<T> = WithReactChildren<{
  * ```
  */
 export declare function getReactComponent<T>(tagName: string): React.ComponentType<GdsComponentProps<T>>;
+/**
+ * Hook to implement controlled component behavior for form controls with a value property
+ */
+export declare function useControlledValue<TElement extends HTMLElement = HTMLElement>(elementRef: React.RefObject<TElement | null>, value: any, defaultValue: any, onChange?: (event: any) => void, onInput?: (event: any) => void): void;
+/**
+ * Hook to implement controlled component behavior for checkbox form controls with a checked property
+ */
+export declare function useControlledChecked<TElement extends HTMLElement = HTMLElement>(elementRef: React.RefObject<TElement | null>, checked: boolean | undefined, defaultChecked: boolean | undefined, onChange?: (event: any) => void, onInput?: (event: any) => void): void;
 export {};

package/utils/react.js

@@ -1,8 +1,79 @@
 import "../chunks/chunk.QU3DSPNU.js";
+import { useLayoutEffect, useRef } from "react";
 import { getScopedTagName } from "../scoping.js";
 function getReactComponent(tagName) {
   return getScopedTagName(tagName);
 }
+function useControlledValue(elementRef, value, defaultValue, onChange, onInput) {
+  const controlledValueRef = useRef(void 0);
+  const isControlled = value !== void 0;
+  controlledValueRef.current = value;
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    if (isControlled) {
+      const controlledValue = controlledValueRef.current;
+      if (element.value !== controlledValue) {
+        element.value = controlledValue;
+      }
+    } else if (defaultValue !== void 0 && element.value === "") {
+      element.value = defaultValue;
+    }
+    const handleInput = (e) => {
+      e.stopPropagation();
+      if (onChange) {
+        onChange(e);
+      }
+      if (onInput) {
+        onInput(e);
+      }
+      queueMicrotask(() => {
+        const currentControlledValue = controlledValueRef.current;
+        if (currentControlledValue !== void 0 && element.value !== currentControlledValue) {
+          element.value = currentControlledValue;
+        }
+      });
+    };
+    element.addEventListener("input", handleInput);
+    return () => element.removeEventListener("input", handleInput);
+  });
+}
+function useControlledChecked(elementRef, checked, defaultChecked, onChange, onInput) {
+  const controlledCheckedRef = useRef(void 0);
+  const isControlled = checked !== void 0;
+  controlledCheckedRef.current = checked;
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    if (isControlled) {
+      const controlledChecked = controlledCheckedRef.current;
+      if (element.checked !== controlledChecked) {
+        element.checked = !!controlledChecked;
+      }
+    } else if (defaultChecked !== void 0 && !element.checked) {
+      element.checked = defaultChecked;
+    }
+    const handleInput = (e) => {
+      e.stopPropagation();
+      if (onChange) {
+        onChange(e);
+      }
+      if (onInput) {
+        onInput(e);
+      }
+      queueMicrotask(() => {
+        const currentControlledChecked = controlledCheckedRef.current;
+        if (currentControlledChecked !== void 0 && element.checked !== currentControlledChecked) {
+          element.checked = currentControlledChecked;
+        }
+      });
+    };
+    element.addEventListener("input", handleInput);
+    return () => element.removeEventListener("input", handleInput);
+  });
+}
 export {
-  getReactComponent
+  getReactComponent,
+  useControlledChecked,
+  useControlledValue
 };