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

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

@@ -0,0 +1,63 @@
+# gds-card-pattern-01
+
+**Class**: `GdsCardPattern01`
+
+**Tag**: `<gds-card-pattern-01>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `''` | The main title of the card |
+| `excerpt` | `string` | `''` | A brief description or summary text |
+| `label` | `string` | `''` | Optional label text used on the linked card footer decorative element. |
+| `variant` | `'neutral-01' \| 'neutral-02'` | `'neutral-01'` | Card background variant |
+| `outlined` | `boolean` | `false` | Enables border styling Designed to work with neutral-02 variant |
+| `tag` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `'h2'` | HTML tag for the card title Controls heading level for accessibility |
+| `ratio` | `'landscape' \| 'square'` | `'landscape'` | Aspect ratio/format of the card's media section - landscape: 16:9 or similar horizontal format - square: 1:1 square format |
+| `category` | `string` | `''` | Category |
+| `date` | `string` | `''` | Date |
+| `dateFormat` | `DateTimeFormat` | `'dateTimeLong'` | Date format to use for displaying the date. Check the GdsFormattedDate component for more details on accepted formats. |
+| `locale` | `string` | `'en-GB'` | Locale for date formatting (e.g., 'sv-SE', 'en-GB', 'en-US') |
+| `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. |
+| `href` | `string \| undefined` | `-` | URL that the link points to Can be absolute, relative, or fragment identifier |
+| `target` | `'_self' \| '_blank' \| '_parent' \| '_top' \| undefined` | `-` | Specifies where to open the linked document |
+| `rel` | `string \| undefined` | `-` | Specifies the relationship between the current document and the linked document Automatically adds security-related values when target="_blank" |
+| `download` | `string \| boolean \| undefined` | `-` | When present, indicates that the linked resource should be downloaded |
+| `ping` | `string \| undefined` | `-` | Specifies a space-separated list of URLs to which, when the link is followed, POST requests with the body ping will be sent by the browser. |
+| `src` | `string \| undefined` | `-` | The URL of the image |
+| `srcset` | `string \| undefined` | `-` | The srcset attribute for responsive images Format: "image.jpg 1x, image-2x.jpg 2x" or "image-320.jpg 320w, image-640.jpg 640w" |
+| `sizes` | `string \| undefined` | `-` | The sizes attribute for responsive images Format: "(max-width: 320px) 280px, (max-width: 640px) 580px, 800px" |
+| `alt` | `string \| undefined` | `-` | Alternative text description of the image Required for accessibility. Should be empty string if image is decorative. |
+| `loading` | `'lazy' \| 'eager' \| undefined` | `'lazy'` | Loading strategy for the image |
+| `decoding` | `'auto' \| 'sync' \| 'async' \| undefined` | `'auto'` | Decoding strategy for the image |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `header` | Custom header content |
+| `footer` | Action items (buttons, links) |
+
+
+## Routing Support
+
+This component supports routing via the `href` property.

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

@@ -0,0 +1,52 @@
+# Card pattern 01
+
+Card pattern 01 is a pre-built composition based on the card component.
+
+
+## Overview
+
+### Slots
+
+All card patterns are built on top of the base card component. Card pattern 01 is available in both interaction types – default card and linked card, and uses slots to build flexible yet consistent layouts.
+
+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
+
+#### Empty
+
+No header content.
+
+#### Image
+
+Can be 16:9 (landscape) or 1:1 (portrait).
+
+#### Custom
+
+Allows placement of custom content.
+
+### Footer
+
+### Decorative elements
+
+The footer on a linked card upports two types of decorative elements: a label, set via the `label` property, and slotted elements, such as an icon button.
+
+Note: All decorative elements are always inert.
+
+### Empty
+
+The footer will not show if the card is linked without a label, or if no slotted elements are provided.
+
+### Actions
+
+Note: This only applies to the default card (not linked).
+
+### Variants
+
+In card pattern 01, you can choose between two variants: `neutral-01` and `neutral-02`. The `neutral-02` variant can also be outlined.

package/generated/mcp/card-pattern-01/index.json

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

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

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

package/generated/mcp/checkbox/angular.md

@@ -0,0 +1,26 @@
+# gds-checkbox - Angular
+
+## Import
+
+```typescript
+import { GdsCheckboxComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-checkbox>
+  <!-- content -->
+</gds-checkbox>
+```
+
+## 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 |
+|---------------------|----------------|-----------------|
+| `input` | `input` | `(input)="handler($event)"` |
+| `change` | `change` | `(change)="handler($event)"` |

package/generated/mcp/checkbox/api.md

@@ -0,0 +1,44 @@
+# gds-checkbox
+
+**Class**: `GdsCheckbox`
+
+**Tag**: `<gds-checkbox>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `''` | The label displayed next to the checkbox button. |
+| `supportingText` | `string` | `''` | The supporting text displayed below the label. This text provides additional context or information to the user. |
+| `checked` | `boolean` | `false` | Whether the checkbox button is checked or not. |
+| `indeterminate` | `boolean` | `false` | Indicates the indeterminate state of the checkbox. This state is used when the checkbox represents a group where some but not all child options are selected, such as in hierarchical selections or "select all" scenarios. |
+| `disabled` | `boolean` | `false` | Whether the checkbox button is disabled or not. |
+| `value` | `string` | `-` | Get or set the value of the form control. |
+| `validator` | `GdsValidator \| undefined` | `-` | A validator that can be used to validate the form control and set an error message. |
+| `required` | `boolean` | `false` | The required attribute can be used to communicate to users of assistive technology that the control is required. Validation still needs to be done in a validator or equivalent. |
+| `errorMessage` | `string` | `''` | This can be used to manually control the error message that will be displayed when the control is invalid. |
+| `invalid` | `any` | `-` | Validation state of the form control. Setting this to true triggers the invalid state of the control. |
+| `name` | `string` | `''` |  |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `input` | `InputEvent` | Dispatched when the checkbox is checked or unchecked. |
+| `change` | `Event` | Dispatched when the checkbox is checked or unchecked. |
+
+
+## Methods
+
+### `focus(options?: FocusOptions): void`
+
+**Parameters:**
+
+- `options`: `FocusOptions` _(optional)_
+
+
+## Form Control
+
+This component is a form control and inherits form-related properties and methods.

package/generated/mcp/checkbox/guidelines.md

@@ -0,0 +1,83 @@
+# Checkbox
+
+A checkbox is a form control that allows users to select one or multiple options.
+
+
+## Overview
+
+### Variants
+
+*   **Default**
+    
+*   **Contained**: Coming soon Used on its own or together with other form components.
+
+### Features
+
+#### Label
+
+All individual checkboxes must have a label to ensure clarity and accessibility. When checkboxes are grouped, the group must have a header label. Labels help users understand the purpose of the checkboxes, including those using assistive technologies.
+
+#### Optional field indicator
+
+Only use in the header label. 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
+
+This can be used for both the header and individual checkboxes. Use this to explain how to fill in the field, for example how to count or what to include. Contained checkboxes don’t have support text for the individual checkboxes.
+
+### 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
+
+Used to indicate that a single checkbox must be checked or that a group of checkboxes has errors.
+
+### Indeterminate state
+
+Used when a checkbox is partially selected, typically in parent-child relationships within nested checkboxes. Not available for the contained variant.
+
+### Behaviour:
+
+*   If some child checkboxes are selected, the parent shows the indeterminate state.
+    
+*   If all child checkboxes are selected, the parent appears selected.
+    
+*   Selecting a parent checkbox (whether unselected or in the indeterminate state) selects all child checkboxes.
+    
+*   Deselecting the parent checkbox deselects all child checkboxes.
+
+### Alignment
+
+Checkboxes can be aligned horizontal or 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
+
+
+## UX Guidelines
+
+### Writing UX text for checkboxes
+
+### Stand-alone checkbox
+
+### Use the “I” form
+
+### Don't
+
+### Avoid negations
+
+### Avoid questions
+
+### Multiple options
+
+### Do
+
+### Don't

package/generated/mcp/checkbox/index.json

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

package/generated/mcp/checkbox/react.md

@@ -0,0 +1,26 @@
+# gds-checkbox - React
+
+## Import
+
+```typescript
+import { GdsCheckbox } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsCheckbox>
+  {/* content */}
+</GdsCheckbox>
+```
+
+## 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 |
+|---------------------|--------------------|-----------------|
+| `input` | `onInput` | `onInput={handler}` |
+| `change` | `onChange` | `onChange={handler}` |

package/generated/mcp/checkbox-group/angular.md

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

package/generated/mcp/checkbox-group/api.md

@@ -0,0 +1,45 @@
+# gds-checkbox-group
+
+**Class**: `GdsCheckboxGroup`
+
+**Tag**: `<gds-checkbox-group>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `'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. |
+| `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. |
+| `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. |
+| `size` | `'large' \| 'small'` | `'large'` | Controls the font-size of label and supporting text on group form control header and single checkbox buttons respectively. |
+| `direction` | `'row' \| 'column'` | `'column'` | The direction in which checkbox buttons are displayed. |
+| `supportingText` | `string` | `''` | The supporting text displayed between the label and the field. This text provides additional context or information to the user. |
+| `showExtendedSupportingText` | `boolean` | `false` | Whether the supporting text should be displayed or not. |
+| `value` | `string[]` | `-` | Get or set the value of the form control. |
+| `validator` | `GdsValidator \| undefined` | `-` | A validator that can be used to validate the form control and set an error message. |
+| `required` | `boolean` | `false` | The required attribute can be used to communicate to users of assistive technology that the control is required. Validation still needs to be done in a validator or equivalent. |
+| `errorMessage` | `string` | `''` | This can be used to manually control the error message that will be displayed when the control is invalid. |
+| `invalid` | `any` | `-` | Validation state of the form control. Setting this to true triggers the invalid state of the control. |
+| `label` | `string` | `''` | The label of the form control. |
+| `name` | `string` | `''` |  |
+| `disabled` | `boolean` | `false` | If the input is Disabled |
+
+
+## Form Control
+
+This component is a form control and inherits form-related properties and methods.

package/generated/mcp/checkbox-group/index.json

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

package/generated/mcp/checkbox-group/react.md

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

package/generated/mcp/coachmark/angular.md

@@ -0,0 +1,25 @@
+# gds-coachmark - Angular
+
+## Import
+
+```typescript
+import { GdsCoachmarkComponent } from '@sebgroup/green-core-ng'
+```
+
+## Usage
+
+Use the component in your Angular templates:
+
+```html
+<gds-coachmark>
+  <!-- content -->
+</gds-coachmark>
+```
+
+## 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-ui-state` | `gdsUiState` | `(gdsUiState)="handler($event)"` |

package/generated/mcp/coachmark/api.md

@@ -0,0 +1,42 @@
+# gds-coachmark
+
+**Class**: `GdsCoachmark`
+
+**Tag**: `<gds-coachmark>`
+
+
+## Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `placement` | `Placement` | `'bottom'` | The placement of the popover relative to the trigger. Accepts any of the placements supported by Floating UI. |
+| `overlappedBy` | `string[]` | `[]` | The coachmark will be hidden when overlapped by the list of provided elements (selectors). |
+| `target` | `string[]` | `[]` | List of selectors pointing to the targeted element. Ex. for a target inside a ShadowDOM: ["some-component", "shadowRoot", "target-element"]. |
+| `label` | `string` | `'Coachmark'` | The accessible label of the coachmark. |
+| `computeVisibility` | `(     self: GdsCoachmark,     target: HTMLElement,     computedVisibility: boolean,   ) => boolean` | `-` | A callback that can be used to set the visibility of the coachmark based on your criteria.  The default computed visibility, based on visibility and overlap of the target element, is supplied as the third argument. |
+| `targetElement` | `HTMLElement \| undefined` | `undefined` | The resolved targeted element (readonly) |
+| `_isVisible` | `boolean` | `false` |  |
+| `_preventClose` | `boolean` | `false` |  |
+
+
+## Events
+
+| Name | Type | Description |
+|------|------|-------------|
+| `gds-ui-state` | `CustomEvent<any>` | dispatched when the tooltip is closed |
+
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `(default)` | placeholder for the content of the tooltip. |
+
+
+## Methods
+
+### `setPreventClose(preventClose: boolean): void`
+
+**Parameters:**
+
+- `preventClose`: `boolean`

package/generated/mcp/coachmark/guidelines.md

@@ -0,0 +1,8 @@
+# Coachmark
+
+Coachmarks guide users through interface features.
+
+
+## UX Guidelines
+
+### Writing UX text for coach marks

package/generated/mcp/coachmark/index.json

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

package/generated/mcp/coachmark/react.md

@@ -0,0 +1,25 @@
+# gds-coachmark - React
+
+## Import
+
+```typescript
+import { GdsCoachmark } from '@sebgroup/green-core/react'
+```
+
+## Usage
+
+Use the component as a React JSX element:
+
+```tsx
+<GdsCoachmark>
+  {/* content */}
+</GdsCoachmark>
+```
+
+## 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-ui-state` | `onGdsUiState` | `onGdsUiState={handler}` |