@sebgroup/green-core 2.19.0-rc.20251212142916599 → 2.20.0-rc.20251215154321804

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

@@ -23,18 +23,10 @@ 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
      */
@@ -60,10 +52,6 @@ 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

@@ -35,39 +35,17 @@ 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),
-      subcomponents: this.extractSubcomponents(declaration)
+      isCheckboxComponent: this.isCheckboxComponent(tagName)
     };
   }
-  /**
-   * Checks if a component inherits from a specific base class
-   */
-  static inheritsMembersFrom(declaration, className, modulePath) {
-    if (!declaration.members) return false;
-    return declaration.members.some(
-      (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"
+    if (!declaration.members) return false;
+    return declaration.members.some(
+      (member) => member.inheritedFrom?.name === "GdsFormControlElement" && member.inheritedFrom?.module === "src/components/form/form-control.ts"
     );
   }
   /**
@@ -141,19 +119,6 @@ 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,14 +27,10 @@ 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') */
@@ -50,12 +46,6 @@ 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 = "-10aea6";
+const VER_SUFFIX = "-0e967a";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])

package/mcp/alert/angular.md

@@ -1,26 +0,0 @@
-# gds-alert - Angular
-
-## Import
-
-```typescript
-import { GdsAlertComponent } from '@sebgroup/green-core-ng'
-```
-
-## Usage
-
-Use the component in your Angular templates:
-
-```html
-<gds-alert>
-  <!-- content -->
-</gds-alert>
-```
-
-## Event Handling
-
-Events are emitted using Angular output syntax. Event names are converted from kebab-case to camelCase:
-
-| Web Component Event | Angular Output | Handler Example |
-|---------------------|----------------|-----------------|
-| `gds-close` | `gdsClose` | `(gdsClose)="handler($event)"` |
-| `gds-action` | `gdsAction` | `(gdsAction)="handler($event)"` |

package/mcp/alert/api.md

@@ -1,32 +0,0 @@
-# gds-alert
-
-**Class**: `GdsAlert`
-
-**Tag**: `<gds-alert>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `'information' \| 'notice' \| 'positive' \| 'warning' \| 'negative'` | `'information'` | The variant of the alert, which determines its appearance and icon. |
-| `label` | `string` | `''` | The label for the alert, used for accessibility purposes. This needs be set to something relevant to the content of the alert. |
-| `role` | `'alert' \| 'status'` | `'alert'` | The role of the alert, which can be 'alert' or 'status'. 'alert' is used for critical messages that require immediate attention, while 'status' is for informational messages. These corresponds to the ARIA roles, which you can read more about on MDN: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role |
-| `dismissible` | `boolean` | `false` | The dismissibility of the alert, which determines whether it can be closed by the user. |
-| `timeout` | `number` | `0` | The time in milliseconds after which the alert will automatically dismiss itself. Set to 0 to disable auto-dismiss. |
-| `buttonLabel` | `string` | `''` | The text for the action button, if provided. If not set, no action button will be rendered. |
-
-
-## Events
-
-| Name | Type | Description |
-|------|------|-------------|
-| `gds-close` | `CustomEvent<any>` | Fired when alert is dismissed |
-| `gds-action` | `CustomEvent<any>` | Fired when action button is clicked |
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | Alert message content |

package/mcp/alert/guidelines.md

@@ -1,105 +0,0 @@
-# Alert
-
-An alert displays important messages, feedback, or time-sensitive information.
-
-
-## Overview
-
-### Variants
-
-A set of predefined styles that convey different meanings and states through consistent visual treatment each with specific icons.
-
-#### Information
-
-Used for _passive_, non-critical updates like tips or background information. It's quiet and unobtrusive.
-
-#### Notice
-
-Used for _actionable_, attention-worthy updates that are still non-critical, like a change in a process or a reminder to do something soon.
-
-#### Positive
-
-Confirms successful actions, such as form submissions, with a success message, optional next steps, and possible brand reinforcement.
-
-#### Warning
-
-Highlights non-critical issues, such as upcoming deadlines, with a concise issue summary, optional duration estimate, and suggested actions.
-
-#### Negative
-
-Communicates critical issues or errors, such as system outages, with a clear problem description, optional apology for system issues, and resolution guidance.
-
-### Action button
-
-Alert supports an optional action button with customisable text to trigger relevant actions.
-
-### Dismissible
-
-Alerts can be configured as `dismissible` in order to show a close button in the upper right corner. This also enabled closing the alert by pressing the escape key.
-
-### Auto-dismiss
-
-Alert can also be set up to use an auto-dismiss timer. In this configuration, a timer progress bar will be shown at the bottom of the alert, and the alert will close once the timer reaches the end.
-
-### Placement
-
-The most important rule is to place the alert near the issue that triggered it.
-
-#### Global alert
-
-Used for system-wide messages.
-
-*   Placed above the header and takes full width of the screen.
-    
-*   The icon, text content, and action button should be center-aligned horizontally.
-    
-*   The dismiss button is placed at the far right.
-
-#### Page alert
-
-Used for messages affecting the entire page (e.g., _Bankgiro is down_).
-
-*   Placed at the top of the page, below the header.
-
-#### Group alert
-
-Used for messages related to a specific module (e.g., _Transaction listing is unavailable_).
-
-*   Placed within the module, at the top.
-
-#### Specific alert
-
-Used for messages related to specific content (e.g., _Negative balance_).
-
-*   Placed directly in the content area, close to the element it concerns (such as a table or field).
-
-### Guidelines
-
-Select the appropriate variant to match the message’s intent, such as using positive for success messages or negative for errors. Also ensure a meaningful label property is set to describe the alert’s purpose for accessibility. A label should always be set when using alert.
-
-Choose the role property carefully, using alert for critical messages and status for informational updates, to align with ARIA best practices.
-
-For toast-like messages, like save confirmations and other non-critical messages, auto-dismiss can be used to avoid interrupting user workflows.
-
-
-## UX Guidelines
-
-### Writing UX text for alerts
-
-### Alert with a heading
-
-### Alert without a heading
-
-### Alert with a button
-
-### Alert with a link
-
-### Using buttons and links together
-
-### Information alert
-
-### Success alert
-
-### Warning alert
-
-### Critical and error alert

package/mcp/alert/index.json

@@ -1,9 +0,0 @@
-{
-  "name": "gds-alert",
-  "files": {
-    "api": "api.md",
-    "guidelines": "guidelines.md",
-    "angular": "angular.md",
-    "react": "react.md"
-  }
-}

package/mcp/alert/react.md

@@ -1,26 +0,0 @@
-# gds-alert - React
-
-## Import
-
-```typescript
-import { GdsAlert } from '@sebgroup/green-core/react'
-```
-
-## Usage
-
-Use the component as a React JSX element:
-
-```tsx
-<GdsAlert>
-  {/* content */}
-</GdsAlert>
-```
-
-## Event Handling
-
-Events are handled using React event handler props. Event names are converted from kebab-case to camelCase with an "on" prefix:
-
-| Web Component Event | React Handler Prop | Handler Example |
-|---------------------|--------------------|-----------------|
-| `gds-close` | `onGdsClose` | `onGdsClose={handler}` |
-| `gds-action` | `onGdsAction` | `onGdsAction={handler}` |

package/mcp/backdrop/angular.md

@@ -1,17 +0,0 @@
-# gds-backdrop - Angular
-
-## Import
-
-```typescript
-import { GdsBackdropComponent } from '@sebgroup/green-core-ng'
-```
-
-## Usage
-
-Use the component in your Angular templates:
-
-```html
-<gds-backdrop>
-  <!-- content -->
-</gds-backdrop>
-```

package/mcp/backdrop/api.md

@@ -1,12 +0,0 @@
-# gds-backdrop
-
-**Class**: `GdsBackdrop`
-
-**Tag**: `<gds-backdrop>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `show` | `boolean` | `false` |  |

package/mcp/backdrop/index.json

@@ -1,8 +0,0 @@
-{
-  "name": "gds-backdrop",
-  "files": {
-    "api": "api.md",
-    "angular": "angular.md",
-    "react": "react.md"
-  }
-}

package/mcp/backdrop/react.md

@@ -1,17 +0,0 @@
-# gds-backdrop - React
-
-## Import
-
-```typescript
-import { GdsBackdrop } from '@sebgroup/green-core/react'
-```
-
-## Usage
-
-Use the component as a React JSX element:
-
-```tsx
-<GdsBackdrop>
-  {/* content */}
-</GdsBackdrop>
-```

package/mcp/badge/angular.md

@@ -1,17 +0,0 @@
-# gds-badge - Angular
-
-## Import
-
-```typescript
-import { GdsBadgeComponent } from '@sebgroup/green-core-ng'
-```
-
-## Usage
-
-Use the component in your Angular templates:
-
-```html
-<gds-badge>
-  <!-- content -->
-</gds-badge>
-```

package/mcp/badge/api.md

@@ -1,36 +0,0 @@
-# gds-badge
-
-`gds-badge`
-
-**Class**: `GdsBadge`
-
-**Tag**: `<gds-badge>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `variant` | `\| 'information'     \| 'notice'     \| 'positive'     \| 'warning'     \| 'negative'     \| 'disabled'` | `'information'` | Controls the variant of the badge. Supports all valid variants like information, notice, positive, warning, negative. |
-| `size` | `'default' \| 'small'` | `'default'` | Defines the size of the badge. The default value is `default`. |
-| `notification` | `boolean` | `false` | Indicates whether the badge is in notification mode. When set to `true`, the badge will act as a notification badge with only two variants: `positive` or `negative`. |
-| `rounded` | `boolean` | `false` | Indicates whether the badge is rounded. |
-| `mainSlotOccupied` | `boolean` | `false` |  |
-| `leadSlotOccupied` | `boolean` | `false` |  |
-| `width` | `string \| undefined` | `-` | Style Expression Property that controls the `width` property. Supports space tokens and all valid CSS `width` values. |
-| `'min-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-width` property. Supports space tokens and all valid CSS `min-width` values. |
-| `'max-width'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-width` property. Supports space tokens and all valid CSS `max-width` values. |
-| `'inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `inline-size` property. Supports space tokens and all valid CSS `inline-size` values |
-| `'min-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `min-inline-size` property. Supports space tokens and all valid CSS `min-inline-size` values. |
-| `'max-inline-size'` | `string \| undefined` | `-` | Style Expression Property that controls the `max-inline-size` property. Supports space tokens and all valid CSS `max-inline-size` values. |
-| `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. |
-| `'align-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `align-self` property. Supports all valid CSS `align-self` values. |
-| `'justify-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `justify-self` property. Supports all valid CSS `justify-self` values. |
-| `'place-self'` | `string \| undefined` | `-` | Style Expression Property that controls the `place-self` property. Supports all valid CSS `place-self` values. |
-| `'grid-column'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-column` property. Supports all valid CSS grid-column values. Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column |
-| `'grid-row'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-row` property. Supports all valid CSS `grid-row` values. |
-| `'grid-area'` | `string \| undefined` | `-` | Style Expression Property that controls the `grid-area` property. Supports all valid CSS `grid-area` values. |
-| `flex` | `string \| undefined` | `-` | Style Expression Property that controls the `flex` property. Supports all valid CSS `flex` values. |
-| `order` | `string \| undefined` | `-` | Style Expression Property that controls the `order` property. Supports all valid CSS `order` values. |

package/mcp/badge/guidelines.md

@@ -1,56 +0,0 @@
-# Badge
-
-A compact visual indicator for status, counts and notifications.
-
-
-## Overview
-
-### Usage
-
-Badges are especially useful for:
-
-*   **Status indicators** – Showing that something is new, in progress, needs attention, or has been successfully completed.
-    
-*   **Counters** – Indicating the number of new messages, notifications, or tasks.
-    
-*   **Contextual highlights** – Marking a feature as beta or signaling updates users should be aware of.
-    
-
-Use badges sparingly – too many can create visual noise and reduce their impact. Always ensure that the badge color, icon and label clearly support the intended message.
-
-### Variants
-
-A set of predefined styles that convey different meanings and states through consistent visual treatment.
-
-*   **Information** – For general updates or tips that help the user understand context.
-    
-*   **Notice** – For neutral alerts or flags that are not critical but still relevant.
-    
-*   **Positive** – For confirming success or a completed action (e.g., “Active” or “Paid”).
-    
-*   **Warning** – For potential issues users should be cautious about.
-    
-*   **Negative** – For errors, failed states, or items requiring immediate attention.
-
-### Size
-
-Available in large (default) and small sizes to accommodate different UI contexts and content requirements.
-
-### Notification mode
-
-Optimised for notification indicators.
-
-### Rounded
-
-The rounded property transforms the badge's appearance by applying fully circular corners, making it ideal for numerical indicators or status markers.
-
-### Lead and trail slots
-
-The badge component supports both lead and trail slots, enabling the placement of icons or additional content before or after the main text.
-
-
-## UX Guidelines
-
-### Writing UX text for badges
-
-### Our most common statuses

package/mcp/badge/index.json

@@ -1,9 +0,0 @@
-{
-  "name": "gds-badge",
-  "files": {
-    "api": "api.md",
-    "guidelines": "guidelines.md",
-    "angular": "angular.md",
-    "react": "react.md"
-  }
-}

package/mcp/badge/react.md

@@ -1,17 +0,0 @@
-# gds-badge - React
-
-## Import
-
-```typescript
-import { GdsBadge } from '@sebgroup/green-core/react'
-```
-
-## Usage
-
-Use the component as a React JSX element:
-
-```tsx
-<GdsBadge>
-  {/* content */}
-</GdsBadge>
-```

package/mcp/blur/angular.md

@@ -1,17 +0,0 @@
-# gds-blur - Angular
-
-## Import
-
-```typescript
-import { GdsBlurComponent } from '@sebgroup/green-core-ng'
-```
-
-## Usage
-
-Use the component in your Angular templates:
-
-```html
-<gds-blur>
-  <!-- content -->
-</gds-blur>
-```

package/mcp/blur/api.md

@@ -1,12 +0,0 @@
-# gds-blur
-
-**Class**: `GdsBlur`
-
-**Tag**: `<gds-blur>`
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | Content to be blurred. |

package/mcp/blur/guidelines.md

@@ -1,3 +0,0 @@
-# Blur
-
-The Blur component is used to apply a blur effect over content, often used to obscure sensitive or background information.

package/mcp/blur/index.json

@@ -1,9 +0,0 @@
-{
-  "name": "gds-blur",
-  "files": {
-    "api": "api.md",
-    "guidelines": "guidelines.md",
-    "angular": "angular.md",
-    "react": "react.md"
-  }
-}

package/mcp/blur/react.md

@@ -1,17 +0,0 @@
-# gds-blur - React
-
-## Import
-
-```typescript
-import { GdsBlur } from '@sebgroup/green-core/react'
-```
-
-## Usage
-
-Use the component as a React JSX element:
-
-```tsx
-<GdsBlur>
-  {/* content */}
-</GdsBlur>
-```

package/mcp/breadcrumb/angular.md

@@ -1,17 +0,0 @@
-# gds-breadcrumb - Angular
-
-## Import
-
-```typescript
-import { GdsBreadcrumbComponent } from '@sebgroup/green-core-ng'
-```
-
-## Usage
-
-Use the component in your Angular templates:
-
-```html
-<gds-breadcrumb>
-  <!-- content -->
-</gds-breadcrumb>
-```

package/mcp/breadcrumb/api.md

@@ -1,30 +0,0 @@
-# gds-breadcrumb
-
-**Class**: `GdsBreadcrumb`
-
-**Tag**: `<gds-breadcrumb>`
-
-
-## Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `href` | `string` | `''` | The URL that the breadcrumb item points to. |
-| `target` | `'_self' \| '_blank' \| '_parent' \| '_top' \| undefined` | `-` | Where to display the linked breadcrumb URL. Only used when href is present. |
-| `rel` | `string \| undefined` | `-` | The relationship of the linked breadcrumb URL. Defaults to "noreferrer noopener" when target is "_blank". |
-| `label` | `string` | `''` | Accessible label for the breadcrumb item. Use when visual text needs a different description. |
-| `overflow` | `boolean` | `false` | When true, the breadcrumb item will render as an overflow menu instead of a regular link. |
-
-
-## Slots
-
-| Name | Description |
-|------|-------------|
-| `(default)` | Default slot for the breadcrumb content |
-| `lead` | Optional slot for leading content (usually icons) |
-| `trail` | Optional slot for trailing content |
-
-
-## Routing Support
-
-This component supports routing via the `href` property.

package/mcp/breadcrumb/index.json

@@ -1,8 +0,0 @@
-{
-  "name": "gds-breadcrumb",
-  "files": {
-    "api": "api.md",
-    "angular": "angular.md",
-    "react": "react.md"
-  }
-}