@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-button/eds-button.js

@@ -2,35 +2,47 @@ import { h, Host } from "@stencil/core";
 import { sendAnalytics } from "../../utils/analytics";
 import { cva } from "class-variance-authority";
 /**
- * `EdsButton` is a versatile button component designed for a range of actions and interactions in applications.
- * The button offers various customization options for appearance, size, and behavior.
+ * `EdsButton` - Updated for EBRAINS Visual System 2025
  *
- * Key features include:
- * - Configurable visual styles (`intent`) such as primary, secondary, and ghost.
- * - Loading state indicator and disabled state for control over user interactions.
- * - Optional icon display with customizable position and size.
- * - Support for different element types (`button` or `a`) and pill-shaped buttons.
- * - Emits a custom Matomo event when clicked for tracking interactions.
+ * A versatile button component designed for a range of actions and interactions.
+ * Updated to match the new EBRAINS visual identity with:
+ * - Brand black (#07140D) for primary buttons
+ * - Brand green (#00FF9D) for accents and focus states
+ * - Pill-shaped design (rounded-full by default)
+ * - IBM Plex Sans typography
+ * - High-contrast accessibility
  *
- * This component is suitable for buttons, links, and other interactive elements within an interface.
+ * Key features:
+ * - Primary (black) and Secondary (outlined) button styles
+ * - Loading state indicator with proper color handling
+ * - Disabled state for control over user interactions
+ * - Optional icon display with customizable position and size
+ * - Support for different element types (button or a)
+ * - Emits custom Matomo event when clicked for tracking
  */
 export class EdsButton {
     constructor() {
         this.button = cva([
-            'relative inline-flex items-center',
-            'py-8',
-            'effect-focus effect-color',
-            'cursor-pointer',
+            'relative items-center py-12 cursor-pointer',
             'aria-disabled:text-lightest aria-disabled:bg-dark aria-disabled:cursor-not-allowed',
             'disabled:text-lightest disabled:bg-dark disabled:cursor-not-allowed'
         ], {
             variants: {
                 intent: {
-                    primary: 'bg-accent border-inside hover:bg-accent-dark shadow-accent focus:shadow-none aria-disabled:shadow-none',
-                    secondary: 'border-inside border-inside-inverse text-inverse bg-strongest hover:bg-strong-dark',
-                    tertiary: 'border-inside after:border-softest bg-dark hover:bg-darker',
-                    ghost: 'border-inside hover:bg-darker',
-                    ghostInverse: 'border-inside text-lightest hover:bg-dark'
+                    primary: 'bg-strongest text-inverse hover:bg-accent hover:text-default focus:shadow-none aria-disabled:shadow-none',
+                    secondary: 'border-inside text-default bg-transparent hover:bg-strong-dark hover:text-inverse  aria-disabled:after:!border-0',
+                    secondaryInverse: 'border-inside-inverse text-inverse bg-transparent hover:bg-inverse hover:text-default aria-disabled:after:!border-0',
+                    ghost: '',
+                    ghostInverse: 'text-inverse',
+                    brand: 'bg-accent text-default hover:bg-strongest hover:text-inverse aria-disabled:shadow-none',
+                    brandInverse: 'bg-accent text-default hover:bg-inverse hover:text-default aria-disabled:shadow-none',
+                    neutral: 'bg-darker after:border-softest bg-inverse hover:bg-dark hover:text-light text-inverse aria-disabled:shadow-none',
+                    cta: [
+                        'cta-link !px-0 !py-0 !min-h-0 !h-auto'
+                    ],
+                    'cta-brand': [
+                        'cta-link-brand !px-0 !py-0 !min-h-0 !h-auto'
+                    ]
                 },
                 loading: {
                     true: 'pointer-events-none',
@@ -44,6 +56,10 @@ export class EdsButton {
                     small: 'h-36 f-ui-02',
                     large: 'h-44 f-ui-01'
                 },
+                hasIcon: {
+                    true: '',
+                    false: ''
+                },
                 iconPos: {
                     left: 'flex-row-reverse',
                     right: ''
@@ -55,7 +71,11 @@ export class EdsButton {
                 pill: {
                     true: 'rounded-full border-inside-pill',
                     false: 'rounded-sm'
-                }
+                },
+                fullWidth: {
+                    true: 'w-full flex',
+                    false: 'inline-flex w-auto'
+                },
             },
             compoundVariants: [
                 {
@@ -103,10 +123,33 @@ export class EdsButton {
                     size: 'large',
                     class: 'pr-8',
                     iconOnly: false
+                },
+                // CTA variants with icons get gap-8
+                { intent: 'cta', hasIcon: true, class: 'gap-8' },
+                { intent: 'cta-brand', hasIcon: true, class: 'gap-8' },
+                {
+                    intent: 'cta',
+                    size: 'small',
+                    class: '!px-0 !py-0 !min-h-0 !h-auto'
+                },
+                {
+                    intent: 'cta',
+                    size: 'large',
+                    class: '!px-0 !py-0 !min-h-0 !h-auto'
+                },
+                {
+                    intent: 'cta-brand',
+                    size: 'small',
+                    class: '!px-0 !py-0 !min-h-0 !h-auto'
+                },
+                {
+                    intent: 'cta-brand',
+                    size: 'large',
+                    class: '!px-0 !py-0 !min-h-0 !h-auto'
                 }
             ],
             defaultVariants: {
-                intent: 'secondary',
+                intent: 'primary',
                 loading: false,
                 iconSmall: false,
                 iconPos: 'right',
@@ -115,11 +158,11 @@ export class EdsButton {
                 size: 'small'
             }
         });
-        this.parentContext = null; // Accepts the entire event detail or null
+        this.parentContext = null;
         this.label = undefined;
         this.ariaLabel = 'Button';
         this.elementType = 'button';
-        this.intent = 'secondary';
+        this.intent = 'primary';
         this.loading = false;
         this.disabled = false;
         this.pill = false;
@@ -128,10 +171,10 @@ export class EdsButton {
         this.iconPos = 'right';
         this.iconSmall = false;
         this.triggerClick = undefined;
+        this.fullWidth = false;
     }
     handleParentContext(event) {
         if (event.target !== this.el) {
-            // Ignore the event if it's not targeted at this specific instance
             return;
         }
         this.parentContext = event.detail;
@@ -150,14 +193,12 @@ export class EdsButton {
             name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ((_b = this.ariaLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
             action: 'click'
         });
-        // If an onClick prop is provided, call it
         if (typeof this.triggerClick === 'function') {
-            this.triggerClick(); // Trigger the passed-in function
+            this.triggerClick();
         }
     }
     handleKeyDown(event) {
         if (this.disabled || this.loading) {
-            // Fix: check loading too
             return;
         }
         if (event.key === 'Enter' || (this.elementType === 'a' && event.key === ' ')) {
@@ -169,21 +210,27 @@ export class EdsButton {
         const classes = this.button({
             intent: this.intent,
             loading: this.loading,
+            hasIcon: !!this.icon,
             iconPos: this.iconPos,
             size: this.size,
             pill: this.pill,
             iconOnly: !this.label,
-            iconSmall: this.iconSmall
+            iconSmall: this.iconSmall,
+            fullWidth: this.fullWidth
         });
         const ElementType = this.elementType;
         const isInteractive = !this.disabled && !this.loading;
-        return (h(Host, { key: '25a7b4ffda3df65e91c77a18becd45bc40973f3c' }, h(ElementType, { key: '0f00d82a37f3189b862015eb2d915f2364b6d75d', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '6e45dfefb4805eef0574f7462becca6cde85dbc0', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: '9909c70db39a039b883854caff816d25f132b866', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: '367cd65a13f81cbcb12d93855dc091a4309566bb', class: "loader", style: {
-                border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
-                borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
-            } }))), this.icon ? (h("eds-icon-wrapper", { class: `
-                flex inline-flex items-center justify-center
-                ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
-              `, icon: this.icon, "aria-hidden": "true" })) : null)));
+        // NEW: Loader colors based on intent (brand-black based system)
+        const loaderBorderColor = this.intent === 'primary' || this.intent === 'secondaryInverse'
+            ? 'rgba(255, 255, 255, 0.3)' // White with opacity for dark backgrounds
+            : 'rgba(7, 20, 13, 0.3)'; // Brand-black with opacity for light backgrounds
+        const loaderBottomColor = this.intent === 'primary' || this.intent === 'secondaryInverse'
+            ? '#FFFFFF' // White for dark backgrounds
+            : '#07140D'; // Brand-black for light backgrounds (secondary, brand, etc.)
+        return (h(Host, { key: '6f955c89a01cf823ff8fc34bfa92df85a3aa8327' }, h(ElementType, { key: 'fabf5842d4c9583c7ff9e4415697c62c111dce68', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '746feb603fd83b54bab92e62ab9aefcd6a232f54', class: `${this.loading ? 'opacity-0' : ''} ${this.icon && (this.intent !== 'cta' && this.intent !== 'cta-brand') ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}`, "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: 'e0f54e409080548687304bae2f5d3e1b56863318', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: 'c2472f5d2730ef850a076471fa00c9db91496db7', class: "loader", style: {
+                border: `3px solid ${loaderBorderColor}`,
+                borderBottomColor: loaderBottomColor
+            } }))), this.icon ? (h("eds-icon-wrapper", { name: this.icon, size: 20, "aria-hidden": "true" })) : null)));
     }
     static get is() { return "eds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -257,19 +304,19 @@ export class EdsButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'",
-                    "resolved": "\"ghost\" | \"ghostInverse\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "original": "'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand'",
+                    "resolved": "\"brand\" | \"brandInverse\" | \"cta\" | \"cta-brand\" | \"ghost\" | \"ghostInverse\" | \"neutral\" | \"primary\" | \"secondary\" | \"secondaryInverse\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The visual intent or style of the button.\nOptions include 'primary', 'secondary', 'tertiary', 'ghost', and 'ghostInverse'."
+                    "text": "The visual intent or style of the button.\n- 'primary': Brand black background with white text\n- 'secondary': Transparent/white background with black border and text\n- 'secondaryInverse': Transparent background with white border and white text (for dark backgrounds)\n- 'brand': Brand green background with black text (CTA style)\n- 'cta': CTA link style with monospace font (gray text that turns green on hover)\n- 'cta-brand': CTA link style with monospace font (always green)"
                 },
                 "attribute": "intent",
                 "reflect": false,
-                "defaultValue": "'secondary'"
+                "defaultValue": "'primary'"
             },
             "loading": {
                 "type": "boolean",
@@ -319,7 +366,7 @@ export class EdsButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A boolean to determine if the button should have a pill shape (rounded)."
+                    "text": "A boolean to determine if the button should have a pill shape (rounded-full).\nDefault is true to match new EBRAINS visual system."
                 },
                 "attribute": "pill",
                 "reflect": false,
@@ -329,15 +376,21 @@ export class EdsButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The icon name to be displayed inside the button. Assumes a string for the icon name."
+                    "text": "The icon name to be displayed inside the button."
                 },
                 "attribute": "icon",
                 "reflect": false
@@ -410,6 +463,24 @@ export class EdsButton {
                     "tags": [],
                     "text": "Custom click handler passed to the button."
                 }
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button should take the full width of its container."
+                },
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/eds-button/eds-button.stories.js

@@ -5,7 +5,7 @@ export default {
         label: { control: 'text' },
         ariaLabel: { control: 'text' },
         elementType: { control: 'select', options: ['button', 'a', 'div'] },
-        intent: { control: 'select', options: ['primary', 'secondary', 'tertiary', 'ghost', 'ghostInverse'] },
+        intent: { control: 'select', options: ['primary', 'secondary', 'secondaryInverse', 'ghost', 'ghostInverse', 'brand', 'brandInverse', 'neutral'] },
         loading: { control: 'boolean' },
         disabled: { control: 'boolean' },
         pill: { control: 'boolean' },
@@ -19,10 +19,10 @@ export default {
         label: 'Default Button',
         ariaLabel: 'Accessible label for the button',
         elementType: 'button',
-        intent: 'primary',
+        intent: 'brand',
         loading: false,
         disabled: false,
-        pill: false,
+        pill: true,
         icon: '',
         iconPos: 'right',
         iconSmall: false,

package/dist/collection/components/eds-cards/eds-card-app/eds-card-app.css

@@ -0,0 +1,116 @@
+/* Ensure cards fill grid cell height */
+:host {
+  display: flex;
+  height: 100%;
+}
+
+.app-card {
+  height: auto;
+  border-radius: 16px;
+  padding: 1.5rem;
+  transition: all 0.4s ease;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+/* Default variant - brand-black background with white text */
+.app-card-default {
+  background: var(--brand-black);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.app-card-default:hover {
+  background: var(--brand-black);
+  border-color: rgba(0, 255, 157, 0.4);
+  transform: translateY(-4px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.app-card-default .app-title {
+  color: var(--white);
+}
+
+.app-card-default .app-description {
+  color: var(--grey-light);
+}
+
+.app-card-default .app-tag {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--white);
+}
+
+/* Inverse variant - white background with dark text */
+.app-card-inverse {
+  background: var(--white);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.app-card-inverse:hover {
+  background: var(--white);
+  border-color: rgba(0, 255, 157, 0.4);
+  transform: translateY(-4px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.app-card-inverse .app-title {
+  color: var(--brand-black);
+}
+
+.app-card-inverse .app-description {
+  color: var(--grey-dark);
+}
+
+.app-card-inverse .app-tag {
+  background: rgba(0, 0, 0, 0.08);
+  color: var(--brand-black);
+}
+
+/* .app-category styles removed - now using eds-tag component */
+
+/* Add spacing below category tag when it exists */
+eds-tag {
+  margin-bottom: 1rem;
+}
+
+.app-title {
+  font-family: 'Inter', var(--f-heading-fontFamily);
+  font-weight: 300;
+  font-size: 1.75rem;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  line-height: 1.3;
+}
+
+.app-description {
+  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+  flex-grow: 1;
+}
+
+.app-tags {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 1.5rem;
+}
+
+.app-tag {
+  padding: 0.375rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .app-card {
+    padding: 2rem;
+  }
+
+  .app-title {
+    font-size: 1.5rem;
+  }
+}

package/dist/collection/components/eds-cards/eds-card-app/eds-card-app.js

@@ -0,0 +1,187 @@
+import { parseData } from "../../../utils/sharedUtils";
+import { h } from "@stencil/core";
+/**
+ * `EdsCardApp` is a card component designed to showcase applications with category, title, description, tags, and link.
+ *
+ * Key features:
+ * - Category label at the top (e.g., "BRAIN ATLASES", "DATA MANAGEMENT")
+ * - Large, lightweight title
+ * - Description text
+ * - Multiple tags for features/technologies
+ * - Optional action link at the bottom
+ * - Hover effects with transform and border glow
+ *
+ * This component is ideal for application grids, service catalogs, and platform showcases.
+ */
+export class EdsCardApp {
+    constructor() {
+        this.category = undefined;
+        this.title = undefined;
+        this.description = undefined;
+        this.tags = [];
+        this.url = undefined;
+        this.linkText = 'Explore Components';
+        this.variant = 'default';
+    }
+    /**
+     * Parse the tags prop into an array
+     */
+    get parsedTags() {
+        return parseData(this.tags);
+    }
+    render() {
+        const cardClasses = [
+            'app-card',
+            `app-card-${this.variant}`
+        ].join(' ');
+        // Determine link and category tag intents based on variant
+        const linkIntent = this.variant === 'default' ? 'cta-brand' : 'cta';
+        const categoryTagIntent = this.variant === 'default' ? 'brand' : 'dark';
+        return (h("div", { key: 'e90fec25a02a9635247da04ca23a932be9cd7ea5', class: cardClasses }, this.category && (h("eds-tag", { key: 'a001a815aa32a96beac3d4af08766479030fe8d4', label: this.category, intent: categoryTagIntent, size: "medium" })), h("h3", { key: '10d4532b4fe9b9a92ad24b09634028c583166bb3', class: "app-title" }, this.title), h("p", { key: 'de1559913d227ff6b023ecdbc5fea29f66cb01a0', class: "app-description" }, this.description), this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: '386a2e72a92ea03c13a4410983b8b5320e83b810', class: "app-tags" }, this.parsedTags.map((tag, index) => (h("span", { key: index, class: "app-tag" }, tag.label))))), this.url && (h("eds-link", { key: '2c1a3d133a6f04b6a3359a3c8d2f47eb19c75202', label: this.linkText, url: this.url, intent: linkIntent, icon: "arrow-right", "icon-pos": "right" }))));
+    }
+    static get is() { return "eds-card-app"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-card-app.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-card-app.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The category label (e.g., \"BRAIN ATLASES\", \"DATA MANAGEMENT\")\nOptional - if not provided, the category tag won't be displayed"
+                },
+                "attribute": "category",
+                "reflect": false
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The main title of the application"
+                },
+                "attribute": "title",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The description text"
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "tags": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | AppTag[]",
+                    "resolved": "AppTag[] | string",
+                    "references": {
+                        "AppTag": {
+                            "location": "local",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-cards/eds-card-app/eds-card-app.tsx",
+                            "id": "../../../packages/components/src/components/eds-cards/eds-card-app/eds-card-app.tsx::AppTag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tags to display (features, technologies, etc.)\nCan be a JSON string or array of tag objects"
+                },
+                "attribute": "tags",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional URL for the action link"
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "linkText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional link text (defaults to \"Explore Components\")"
+                },
+                "attribute": "link-text",
+                "reflect": false,
+                "defaultValue": "'Explore Components'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: 'default' for light text on dark background, 'inverse' for dark text on light background"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}