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

package/bin/mcp-server/utils.d.ts

@@ -0,0 +1,56 @@
+import type { ComponentEntry, ComponentsIndex, GlobalIndex, IconEntry, IconsIndex } from './types.js';
+/**
+ * Resolve the path to the MCP data directory
+ * When compiled: Server is at dist/libs/core/src/bin/mcp-server/
+ * When compiled: MCP data is at dist/libs/core/src/generated/mcp/
+ */
+export declare function getMcpDataPath(): string;
+/**
+ * Read the package version from package.json at runtime
+ */
+export declare function getPackageVersion(): Promise<string>;
+/**
+ * Load the components index
+ */
+export declare function loadComponentsIndex(): Promise<ComponentsIndex | null>;
+/**
+ * Load the icons index
+ */
+export declare function loadIconsIndex(): Promise<IconsIndex | null>;
+/**
+ * Load the global index
+ */
+export declare function loadGlobalIndex(): Promise<GlobalIndex | null>;
+/**
+ * Normalize component name for matching
+ * Handles both 'gds-button' and 'button' formats
+ */
+export declare function normalizeComponentName(name: string): string;
+/**
+ * Find a component by name (flexible matching)
+ */
+export declare function findComponent(name: string, components: ComponentEntry[]): ComponentEntry | null;
+/**
+ * Find an icon by name (flexible matching)
+ */
+export declare function findIcon(name: string, icons: IconEntry[]): IconEntry | null;
+/**
+ * Read a markdown file from the MCP data directory
+ */
+export declare function readMcpFile(relativePath: string): Promise<string | null>;
+/**
+ * Check if a file exists in the MCP data directory
+ */
+export declare function fileExists(relativePath: string): Promise<boolean>;
+/**
+ * Build a resource URI for a component/icon documentation file
+ */
+export declare function buildResourceUri(category: 'components' | 'icons' | 'guides' | 'concepts', name: string, docType?: string): string;
+/**
+ * Parse a resource URI into its components
+ */
+export declare function parseResourceUri(uri: string): {
+    category: string;
+    name: string;
+    docType?: string;
+} | null;

package/bin/mcp-server/utils.js

@@ -0,0 +1,123 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { promises as fs } from "fs";
+import * as path from "node:path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+function getMcpDataPath() {
+  return path.resolve(__dirname, "../../generated/mcp");
+}
+async function getPackageVersion() {
+  try {
+    const packageJsonPath = path.resolve(__dirname, "../../package.json");
+    const content = await fs.readFile(packageJsonPath, "utf-8");
+    const pkg = JSON.parse(content);
+    return pkg.version || "0.0.0";
+  } catch (error) {
+    console.error("Failed to read package version:", error);
+    return "0.0.0";
+  }
+}
+async function loadJsonFile(filePath) {
+  try {
+    const content = await fs.readFile(filePath, "utf-8");
+    return JSON.parse(content);
+  } catch (error) {
+    console.error(`Failed to load ${filePath}:`, error);
+    return null;
+  }
+}
+async function loadComponentsIndex() {
+  const dataPath = getMcpDataPath();
+  return loadJsonFile(path.join(dataPath, "components.json"));
+}
+async function loadIconsIndex() {
+  const dataPath = getMcpDataPath();
+  return loadJsonFile(path.join(dataPath, "icons.json"));
+}
+async function loadGlobalIndex() {
+  const dataPath = getMcpDataPath();
+  return loadJsonFile(path.join(dataPath, "index.json"));
+}
+function normalizeComponentName(name) {
+  const lower = name.toLowerCase().trim();
+  if (lower.startsWith("gds-")) {
+    return lower;
+  }
+  if (lower.startsWith("icon-")) {
+    return `gds-${lower}`;
+  }
+  return `gds-${lower}`;
+}
+function findComponent(name, components) {
+  const normalized = normalizeComponentName(name);
+  let found = components.find((c) => c.tagName === normalized);
+  if (found) return found;
+  const withoutPrefix = name.replace(/^gds-/, "");
+  found = components.find((c) => c.tagName === `gds-${withoutPrefix}`);
+  if (found) return found;
+  const lowerName = name.toLowerCase();
+  found = components.find(
+    (c) => c.tagName.toLowerCase().includes(lowerName) || c.name.toLowerCase().includes(lowerName)
+  );
+  return found || null;
+}
+function findIcon(name, icons) {
+  const normalized = normalizeComponentName(name);
+  let found = icons.find((i) => i.tagName === normalized);
+  if (found) return found;
+  const withoutPrefix = name.replace(/^gds-/, "").replace(/^icon-/, "");
+  found = icons.find((i) => i.tagName === `gds-icon-${withoutPrefix}`);
+  if (found) return found;
+  const lowerName = name.toLowerCase();
+  found = icons.find(
+    (i) => i.tagName.toLowerCase().includes(lowerName) || i.name.toLowerCase().includes(lowerName)
+  );
+  return found || null;
+}
+async function readMcpFile(relativePath) {
+  try {
+    const dataPath = getMcpDataPath();
+    const fullPath = path.join(dataPath, relativePath);
+    return await fs.readFile(fullPath, "utf-8");
+  } catch (error) {
+    console.error(`Failed to read ${relativePath}:`, error);
+    return null;
+  }
+}
+async function fileExists(relativePath) {
+  try {
+    const dataPath = getMcpDataPath();
+    const fullPath = path.join(dataPath, relativePath);
+    await fs.access(fullPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function buildResourceUri(category, name, docType) {
+  if (docType) {
+    return `green://${category}/${name}/${docType}`;
+  }
+  return `green://${category}/${name}`;
+}
+function parseResourceUri(uri) {
+  const match = uri.match(/^green:\/\/([^/]+)\/([^/]+)(?:\/([^/]+))?$/);
+  if (!match) return null;
+  const [, category, name, docType] = match;
+  return { category, name, docType };
+}
+export {
+  buildResourceUri,
+  fileExists,
+  findComponent,
+  findIcon,
+  getMcpDataPath,
+  getPackageVersion,
+  loadComponentsIndex,
+  loadGlobalIndex,
+  loadIconsIndex,
+  normalizeComponentName,
+  parseResourceUri,
+  readMcpFile
+};

package/components/badge/badge.component.d.ts

@@ -4,36 +4,13 @@ declare const GdsBadge_base: (new (...args: any[]) => import("../../utils/mixins
  * `gds-badge`
  *
  * @element gds-badge
- *
  */
 export declare class GdsBadge extends GdsBadge_base {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    /**
-     * Controls the variant of the badge.
-     * Supports all valid variants like information, notice, positive, warning, negative.
-     * @property variant
-     */
     variant: 'information' | 'notice' | 'positive' | 'warning' | 'negative' | 'disabled';
-    /**
-     * Defines the size of the badge.
-     * The default value is `default`.
-     *
-     * @property {string} size - The size of the badge, which can be either 'default' or 'small'.
-     */
     size: 'default' | 'small';
-    /**
-     * 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`.
-     *
-     * @property {boolean} notification - Controls the notification mode of the badge.
-     */
     notification: boolean;
-    /**
-     * Indicates whether the badge is rounded.
-     *
-     * @property {boolean} rounded - Controls the border radius of the badge.
-     */
     rounded: boolean;
     mainSlotOccupied: boolean;
     leadSlotOccupied: boolean;

package/components/badge/badge.component.js

@@ -5,6 +5,7 @@ import {
 } from "../../chunks/chunk.QU3DSPNU.js";
 var _GdsBadge_instances, handleSlotChange_fn, renderLeadSlot_fn, renderMainSlot_fn, renderTrailSlot_fn;
 import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { GdsElement } from "../../gds-element.js";
 import { html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
@@ -30,111 +31,23 @@ let GdsBadge = class extends withSizeXProps(
     this.leadSlotOccupied = false;
   }
   render() {
-    let background;
-    let color;
-    if (this.notification) {
-      background = "negative-01";
-      color = "inversed";
-    } else {
-      switch (this.variant) {
-        case "information":
-          background = "information-03";
-          color = "information-01";
-          break;
-        case "notice":
-          background = "notice-03";
-          color = "notice-01";
-          break;
-        case "positive":
-          background = "positive-03";
-          color = "positive-03";
-          break;
-        case "warning":
-          background = "warning-03";
-          color = "warning-01";
-          break;
-        case "negative":
-          background = "negative-03";
-          color = "negative-01";
-          break;
-        case "disabled":
-          background = "disabled-03";
-          color = "disabled-01";
-          break;
-        default:
-          background = "information-03";
-          color = "information-01";
-          break;
-      }
-    }
-    const padding = (() => {
-      const paddings = {
-        notification: {
-          occupied: "4xs 2xs",
-          default: "3xs"
-        },
-        small: {
-          occupied: "4xs 3xs",
-          default: "4xs 3xs"
-        },
-        default: {
-          occupied: "3xs xs 3xs 2xs",
-          default: "4xs xs"
-        }
-      };
-      if (this.notification) {
-        return paddings.notification[this.mainSlotOccupied ? "occupied" : "default"];
-      }
-      const isSmall = this.size === "small";
-      return paddings[isSmall ? "small" : "default"][this.leadSlotOccupied ? "occupied" : "default"];
-    })();
-    const blockSize = (() => {
-      const sizes = {
-        occupied: {
-          small: "m",
-          default: "l"
-        },
-        default: "xs"
-      };
-      return this.mainSlotOccupied ? sizes.occupied[this.size === "small" || this.notification ? "small" : "default"] : sizes.default;
-    })();
-    const inlineSize = (() => {
-      const sizes = {
-        notification: {
-          occupied: "l",
-          default: "0"
-        },
-        default: "l"
-      };
-      return this.notification ? sizes.notification[this.mainSlotOccupied ? "occupied" : "default"] : sizes.default;
-    })();
-    const borderRadius = (() => {
-      const radiuses = {
-        small: "3xs",
-        notification: "max",
-        default: "2xs"
-      };
-      if (this.rounded) return "max";
-      if (this.notification) return radiuses.notification;
-      return this.size === "small" ? radiuses.small : radiuses.default;
-    })();
-    return html`<gds-flex
-      level="3"
-      background=${background}
-      color=${color}
-      gap="${this.notification ? "" : "3xs"}"
-      align-items="center"
-      justify-content="${this.notification ? "center" : "flex-start"}"
-      padding="${padding}"
-      min-height="${blockSize}"
-      border-radius="${borderRadius}"
-      width="100%"
-      min-width="${inlineSize}"
-      font="${this.size === "small" || this.notification ? "detail-book-xs" : "detail-book-s"}"
-    >
-      ${__privateMethod(this, _GdsBadge_instances, renderLeadSlot_fn).call(this)} ${__privateMethod(this, _GdsBadge_instances, renderMainSlot_fn).call(this)}
-      ${__privateMethod(this, _GdsBadge_instances, renderTrailSlot_fn).call(this)}
-    </gds-flex>`;
+    const classes = classMap({
+      badge: true,
+      [this.variant]: true,
+      [this.size]: this.size === "small",
+      notification: this.notification,
+      "with-content": this.notification && this.mainSlotOccupied,
+      rounded: this.rounded
+    });
+    return html`
+      <div class="${classes}">
+        ${[
+      __privateMethod(this, _GdsBadge_instances, renderLeadSlot_fn).call(this),
+      __privateMethod(this, _GdsBadge_instances, renderMainSlot_fn).call(this),
+      __privateMethod(this, _GdsBadge_instances, renderTrailSlot_fn).call(this)
+    ]}
+      </div>
+    `;
   }
 };
 _GdsBadge_instances = new WeakSet();

package/components/badge/badge.styles.js

@@ -1,8 +1,102 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
-  :host {
-    display: inline-block;
+  @layer tokens, core, variants, sizes, states, notification;
+
+  @layer core {
+    :host {
+      display: inline-block;
+    }
+
+    .badge {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--gds-sys-space-3xs);
+      padding: var(--_padding);
+      min-height: var(--_block-size);
+      border-radius: var(--_border-radius);
+      width: 100%;
+      min-width: var(--_inline-size);
+      font: var(--_font);
+      background-color: var(--_bg);
+      color: var(--_color);
+      box-sizing: border-box;
+
+      --_padding: var(--gds-sys-space-4xs) var(--gds-sys-space-xs);
+      --_block-size: var(--gds-sys-space-xs);
+      --_border-radius: var(--gds-sys-space-2xs);
+      --_inline-size: var(--gds-sys-space-l);
+      --_font: var(--gds-sys-text-detail-book-s);
+    }
+  }
+
+  @layer variants {
+    .badge.information {
+      --_bg: var(--gds-sys-color-l3-information-03);
+      --_color: var(--gds-sys-color-content-information-01);
+    }
+
+    .badge.notice {
+      --_bg: var(--gds-sys-color-l3-notice-03);
+      --_color: var(--gds-sys-color-content-notice-01);
+    }
+
+    .badge.positive {
+      --_bg: var(--gds-sys-color-l3-positive-03);
+      --_color: var(--gds-sys-color-content-positive-03);
+    }
+
+    .badge.warning {
+      --_bg: var(--gds-sys-color-l3-warning-03);
+      --_color: var(--gds-sys-color-content-warning-01);
+    }
+
+    .badge.negative {
+      --_bg: var(--gds-sys-color-l3-negative-03);
+      --_color: var(--gds-sys-color-content-negative-01);
+    }
+
+    .badge.disabled {
+      --_bg: var(--gds-sys-color-l3-disabled-03);
+      --_color: var(--gds-sys-color-content-disabled-01);
+    }
+  }
+
+  @layer sizes {
+    .badge.small {
+      --_padding: var(--gds-sys-space-4xs) var(--gds-sys-space-2xs);
+      --_block-size: var(--gds-sys-space-m);
+      --_border-radius: var(--gds-sys-space-3xs);
+      --_font: var(--gds-sys-text-detail-book-xs);
+    }
+  }
+
+  @layer notification {
+    .badge.notification {
+      --_padding: var(--gds-sys-space-3xs);
+      --_block-size: var(--gds-sys-space-xs);
+      --_border-radius: var(--gds-sys-space-max);
+      --_inline-size: 0;
+      justify-content: center;
+      gap: 0;
+      --_bg: var(--gds-sys-color-l3-negative-01);
+      --_color: var(--gds-sys-color-content-inversed);
+      --_font: var(--gds-sys-text-detail-book-xs);
+    }
+
+    .badge.notification.with-content {
+      --_padding: var(--gds-sys-space-4xs) var(--gds-sys-space-2xs);
+      --_block-size: var(--gds-sys-space-m);
+      --_inline-size: var(--gds-sys-space-l);
+    }
+  }
+
+  @layer states {
+    .badge.rounded {
+      --_border-radius: var(--gds-sys-space-max);
+      justify-content: center;
+    }
   }
 
   slot[name='lead']::slotted(*) {

package/components/checkbox/checkbox.component.js

@@ -42,39 +42,41 @@ let GdsCheckbox = class extends GdsFormControlElement {
   }
   render() {
     return html`
-      <input
-        type="checkbox"
-        ?checked=${this.checked}
-        ?disabled=${this.disabled}
-        ?indeterminate=${this.indeterminate}
-        aria-invalid=${this.invalid}
-        aria-describedby="message supporting-text"
-        id="checkbox-input"
-        @change=${() => {
+        <input
+          type="checkbox"
+          class="visually-hidden-checkbox"
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+          ?indeterminate=${this.indeterminate}
+          aria-invalid=${this.invalid}
+          aria-describedby="message supporting-text"
+          id="checkbox-input"
+          @change=${() => {
       this.checked = this._elCheckbox.checked;
       __privateMethod(this, _GdsCheckbox_instances, dispatchChangeEvents_fn).call(this);
     }}
-      />
-      ${when(
+        />
+        ${when(
       this.errorMessage,
       () => html`<span id="message">${this.errorMessage}</span>`
     )}
-      <gds-toggle-control-base type="checkbox" @click=${__privateMethod(this, _GdsCheckbox_instances, toggleChecked_fn)}>
-        <label for="checkbox-input" slot="label"> ${this.label} </label>
-        <span
-          slot="supporting-text"
-          class="supporting-text"
-          id="supporting-text"
-        >
-          ${this.supportingText}
-        </span>
-        ${checkboxToggle({
+        <gds-toggle-control-base type="checkbox" @click=${__privateMethod(this, _GdsCheckbox_instances, toggleChecked_fn)}>
+          <label for="checkbox-input" slot="label"> ${this.label} </label>
+          <span
+            slot="supporting-text"
+            class="supporting-text"
+            id="supporting-text"
+          >
+            ${this.supportingText}
+          </span>
+          ${checkboxToggle({
       checked: this.checked,
       indeterminate: this.indeterminate,
       disabled: this.disabled,
       invalid: this.invalid
     })}
-      </gds-toggle-control-base>
+        </gds-toggle-control-base>
+      </div>
     `;
   }
   _getValidityAnchor() {

package/components/checkbox/checkbox.styles.js

@@ -18,14 +18,6 @@ const style = css`
     outline: none;
   }
 
-  input[type='checkbox'] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-  }
-
   #message {
     display: none;
   }

package/components/dropdown/dropdown.component.d.ts

@@ -152,6 +152,9 @@ declare const GdsDropdown_base: (new (...args: any[]) => import("../../utils/mix
  * @slot message - ***(deprecated - use `errorMessage` property instead)*** Error message to show below the input field whem there is a validation error.
  * @slot sub-label - ***(deprecated - use `supporting-text` property instead)*** Renders between the label and the trigger button.
  *
+ * @subcomponent gds-option - Defines an option in the dropdown
+ * @subcomponent gds-menu-heading - Defines a non-selectable heading in the dropdown options list
+ *
  * @event change - Fired when the value of the dropdown is changed through user interaction (not when value prop is set programatically).
  * @event input - Fired when the value of the dropdown is changed through user interaction.
  * @event gds-ui-state - Fired when the dropdown is opened or closed by the user. Can be cancelled to prevent the dropdown from opening or closing.

package/components/dropdown/dropdown.component.js

@@ -381,7 +381,10 @@ let Dropdown = class extends GdsFormControlElement {
       !this.combobox || this.multiple,
       () => __privateGet(this, _renderTriggerButton).call(this)
     )}
-          <gds-icon-chevron-bottom slot="action"></gds-icon-chevron-bottom>
+          <gds-icon-chevron-bottom
+            size=${this.size === "small" ? "m" : "l"}
+            slot="action"
+          ></gds-icon-chevron-bottom>
         </gds-field-base>
 
         ${when(

package/components/index.d.ts

@@ -29,6 +29,7 @@ export * from './input';
 export * from './link';
 export * from './mask';
 export * from './menu-button';
+export * from './pagination';
 export * from './popover';
 export * from './radio';
 export * from './rich-text';
@@ -37,6 +38,7 @@ export * from './select';
 export * from './signal';
 export * from './spinner';
 export * from './text';
+export * from './table';
 export * from './textarea';
 export * from './theme';
 export * from './video';

package/components/index.js

@@ -29,6 +29,7 @@ export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./mask/index.js";
 export * from "./menu-button/index.js";
+export * from "./pagination/index.js";
 export * from "./popover/index.js";
 export * from "./radio/index.js";
 export * from "./rich-text/index.js";
@@ -37,6 +38,7 @@ export * from "./select/index.js";
 export * from "./signal/index.js";
 export * from "./spinner/index.js";
 export * from "./text/index.js";
+export * from "./table/index.js";
 export * from "./textarea/index.js";
 export * from "./theme/index.js";
 export * from "./video/index.js";

package/components/input/input.styles.js

@@ -1,6 +1,15 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
-const style = css``;
+const style = css`
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: var(--_appearance-spin-button, auto);
+  }
+
+  input[type='number'] {
+    -moz-appearance: var(--_appearance-spin-button, textfield);
+  }
+`;
 var input_styles_default = style;
 export {
   input_styles_default as default

package/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/components/pagination/index.js

@@ -0,0 +1 @@
+export * from "./pagination.js";