@ebrains/components 0.2.0-alpha.0 → 0.4.0-alpha.0

package/dist/collection/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js

@@ -2,22 +2,13 @@ import { h } from "@stencil/core";
 /**
  * @internal
  */
-export class LogoVariations {
+export class LogoVariationsVertical {
     constructor() {
-        this.orientation = 'horizontal';
+        this.orientation = 'vertical';
         this.type = undefined;
     }
     render() {
-        if (this.type === 'coloured') {
-            return (h("div", { class: "container my-16" }, h("div", { class: "coloured w-[200px]" }, h("eds-logo", { orientation: "vertical", type: "no-bg", href: "#" }))));
-        }
-        if (this.type === 'black') {
-            return (h("div", { class: "container my-16" }, h("div", { class: "bg-default w-[200px]" }, h("eds-logo", { orientation: "vertical", type: "black", href: "#" }))));
-        }
-        if (this.type === 'color-white') {
-            return (h("div", { class: "container my-16" }, h("div", { class: "w-[200px]" }, h("eds-logo", { orientation: "vertical", type: "color-white", href: "#" }))));
-        }
-        return null;
+        return (h("div", { key: '70bc4a46031bb4456ba28bef27efbbfe5e7cf6f2' }, h("div", { key: '84ab774067350c75982d41b6d97500e19d3fe5e5', class: "container my-16" }, h("h3", { key: 'c080f9b4cfa18a3a48fb703f749c62531a322267', class: "f-heading03" }, "Coloured Background"), h("div", { key: 'a9a871769d76e97c879f49437187ca553a633dd2', class: "coloured w-[200px]" }, h("eds-logo", { key: '668f2607e0394ab1b25ddfbef4cd3e3880e1b4f9', orientation: "vertical", type: "no-bg", href: "#" }))), h("div", { key: 'd1674061f47b242930599337d605b51831214d7a', class: "container my-16" }, h("h3", { key: '8b1470587ad99fdf379c0c4b4646098d14f087e8', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'bbb9997369a93ce84450a7d289948049fcfa5bf6', class: "bg-default w-[200px]" }, h("eds-logo", { key: '4f3dc6ad9f9db6f605d54df3c8adecea051cf34e', orientation: "vertical", type: "black", href: "#" }))), h("div", { key: '0f54fde04fbef65477809b45371ac15914b1433b', class: "container my-16" }, h("h3", { key: '5c46f1d7b09bf3e113e2733531611943ad21be4e', class: "f-heading03" }, "Dark Background "), h("div", { key: '88609875109aae85cb5333426a3bc270314d9fb5', class: "w-[200px]" }, h("eds-logo", { key: '0eeeba0006e25a8a4f0c4fb5c0d38b089e0a22f4', orientation: "vertical", type: "color-white", href: "#" })))));
     }
     static get is() { return "logo-variations-vertical"; }
     static get encapsulation() { return "shadow"; }
@@ -49,7 +40,7 @@ export class LogoVariations {
                 },
                 "attribute": "orientation",
                 "reflect": false,
-                "defaultValue": "'horizontal'"
+                "defaultValue": "'vertical'"
             },
             "type": {
                 "type": "string",

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.css

@@ -127,6 +127,10 @@
   grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
   grid-gap: var(--inner-gutter);
 }
+.grid-col-span-12 {
+  --container-grid-columns: 12;
+  grid-column: span 12 / span 12;
+}
 
 .gap-y-8 {
   row-gap: 0.5rem;

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js

@@ -5,7 +5,7 @@ import { hLogoColor } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoWrongUsage {
     render() {
-        return (h("ul", { key: '9aa8a3f496e779f561e54a6ee656528b2e55a500', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '735e61f1189decb4fef74b5f9f481f94f51c304e', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '8d8859bef157051ca9493bac1fd35e0db80414c0', class: "example" }, h("div", { key: '6ee9ce679339e1189439239889a60d8cba39c4b1', class: "bg-dark " }, h("div", { key: '492054f20250a9572ac3c641d05bbb955c050be4', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: 'c9f49c3c44fb7446e6e4e02c1f79ac15827633ba', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: 'd5cbda2472d3396f08fdb600676852708991ce0f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'dacbf3bcf4dd4914b4332a663a81732a196457f4', class: "example" }, h("div", { key: '9f9bb9b86a840658cf7311a2b035dbadd6a3e0af', class: "no-other-color p-16" }, h("div", { key: '9e96d60f66801638898c12b190640ae0dcc18d24', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '5e0470cb9f81e4bba14104746715704fed2fddeb', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '5e9e1943ab5d4cda7d6b4cb51b76f9da4370a50b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '9821754465969edcf1ea98aa7a353ff04140612f', class: "example" }, h("div", { key: '513bb5879746d5979cf7f5360ea60c97196e5379', class: "bg-light p-16" }, h("div", { key: '25f615bf82c51f8601960cb705fa5983667a4943', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '636efd5a54620ca8248b5e1adbf453a7d5292d0f', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: 'a006b91c704b1df8f7adf1cad1d0033bd11378d8', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '6a494fdace1e6a2ff48e02a6a8a79f31ca101e02', class: "example" }, h("div", { key: '09ea335ac52cb395cc3173263b4a956aba59cc4e', class: "bg-white p-16" }, h("div", { key: '9acf37c882acb0a04fddc5754b8e91e6789f36ee', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'f648aefe81578e9768c24de085e53e2484c1bb7b', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '70f90abc0d6a3292101e29bdfc311ebb0192a585', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '9eb3aa4276d7b0a9f7c5e76ffa9fefe7f3def0a3', class: "example" }, h("div", { key: '5a38e80d567d2c2faf08fbcb66a62c24973c3fea', class: "bg-white p-16" }, h("div", { key: '7edbadc8850a9babefea43be9c5f9697021712d5', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '96d30acd52838a03f33fd6c8dcf89a72417ce925', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '41d476bd66b39e796f03c669945024720771216f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '3fd7f690559195125d633097b578b1cc2ff4ccc1', class: "example" }, h("div", { key: '684387318cfffdfbc5592486095a28a923e5af07', class: "bg-light p-16" }, h("div", { key: '7593acd61c1ea52ce613a1f3395c8769a09f9aed', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '51d6d974c005a0b5059cd002dff682dc50cfb19a', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: '605db4b33b7aab4d0e81e30f658f639689a433b6', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '1dc1e6be701572fb7d31b435f8b25dbaf0bf30c8', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '30b239799a7d8acf93eba73d3d5dba3cc7117fb5', class: "example" }, h("div", { key: '16a146193f1ec233f37a9472dfe5fa92de10864d', class: "bg-accent p-16" }, h("div", { key: 'cc5924ad51847399ec52c2ece993bdd22305892f', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'bdcd59e968000ecd459b65aaa42e75fa9e06f8ef', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
+        return (h("ul", { key: 'e2fbd7802c153f970a457011a5dcaf3163d6290f', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '07d6a5b930dd8ae652e63310c4232e8c3e6858b2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '5d3dd01a67f41f839e79aa3d449ba319dcc0209c', class: "example" }, h("div", { key: '6b51ea71b6b4072ec6c66223a4f92c1232e8691a', class: "bg-dark " }, h("div", { key: '03a476635bc1112f1ea2d4ed10df0415ead7f0f8', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '084116335e9f8ed4c9d2a04a9551097dc2a53c4a', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: 'e67f1bdeee28928f4f6f8fb5d1e0b59160edd949', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'b0e909eb57a6771b32a93dd0932ef5b848a19ff2', class: "example" }, h("div", { key: '19bc9f29ddbffd1c308cb429100f0af3d58237a1', class: "no-other-color p-16" }, h("div", { key: '301c5cb926b9ad167f1ba096f99a874577617fb1', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: 'b41ab53c2af9efeafb46d41a515eba2f801d49e4', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '826ae54f62c5a3880adf1833dbc19bbb9e1ec6f2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '092d5fc3176845532ecf577c66d6e3a349ebfe45', class: "example" }, h("div", { key: '1d1d3cc86e728fc21f898c59ff1511c5fa728f9f', class: "bg-light p-16" }, h("div", { key: 'df05102398d3de9916a23d0998529d8ca8a66257', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '377e38a762855d563d087eb275481de6a17ddbbb', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '766c4ea568c8bf2fa1efa207ff5f602e5128aef3', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'cf4e883370c0ee284167bea7f2c0c603932d1682', class: "example" }, h("div", { key: 'de160646456f91316bf966db6568c20ff382dd3b', class: "bg-white p-16" }, h("div", { key: '5aa03093e5e483547919eaeca58643e54a286405', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'aa65e295008001d6fe2b2168d8f7f43a770ec8e3', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: 'd0eb2536e430b6e9fdb9a37d638d5c31ee81e205', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '43ec87b4632c2709404aff9d3e7bbcb2910426ca', class: "example" }, h("div", { key: '36cd6dc2b23070e5c7fdfc09444d3ccbb8681216', class: "bg-white p-16" }, h("div", { key: 'a1077b322d113220e05ee3edce627c60547cb49a', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '86c384f5cf362d16bd6ac5ac8448e3e0d591fa18', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: 'b267f6024a4e7bad6348d323606922888db5264b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '0bd0c5d62e454ce133a187e7d3917afc0c26c551', class: "example" }, h("div", { key: '71e4c1681cfbb64970237b410e0925a0f22e1141', class: "bg-light p-16" }, h("div", { key: '01ab5d75102b9f476fecebcc31c975f6d4720c12', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '0734a049d710d1f6406989668f60da1249e29c7b', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: '830b7b2a8cdf6dfc7f395dc92db42fbe626a7ae4', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: 'ca40bb4ea839eacf62e93f7fbec41f076f7b12a6', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '641a963ba81294eefe8fc00dd0a3bdca91af94a2', class: "example" }, h("div", { key: '70691be08e9081899fb2928d5d287aaebef3b399', class: "bg-accent p-16" }, h("div", { key: '556135fd6596b530bf959bb9984641f185cd9f96', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '7eaded302e41fc1d04f2033add829dfaba6e8012', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
     }
     static get is() { return "logo-wrong-usage"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-card-section/eds-card-section.js

@@ -11,7 +11,7 @@ import { h } from "@stencil/core";
  */
 export class EdsCardSection {
     constructor() {
-        this.cards = undefined;
+        this.cards = [];
         this.cols = 4;
     }
     /**
@@ -21,13 +21,24 @@ export class EdsCardSection {
      * @returns {any[]} An array of parsed card objects.
      */
     get parsedCards() {
-        try {
-            return JSON.parse(this.cards);
+        // If it's already an array, return it immediately.
+        if (Array.isArray(this.cards)) {
+            return this.cards;
         }
-        catch (e) {
-            //console.error('Error parsing links JSON', e);
-            return [];
+        if (typeof this.cards === 'object') {
+            return this.cards;
         }
+        else if (typeof this.cards === 'string') {
+            try {
+                return JSON.parse(this.cards);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing cards prop:', e);
+                return [];
+            }
+        }
+        return [];
     }
     /**
      * Renders the card section as a grid layout.
@@ -37,7 +48,7 @@ export class EdsCardSection {
      * @returns {JSX.Element} The rendered section containing a list of cards.
      */
     render() {
-        return (h("section", { key: 'f8e6a03e37677623fad3c53327f6260920a5e914', class: "w-full" }, h("ul", { key: '1da1bc3a5aecadd52b4d025d7d02dc252e47b34a', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+        return (h("section", { key: 'da139da167230819e494a6426c2431f209a2e557', class: "w-full" }, h("ul", { key: '3e8affe5c9aee91c4487480c72c437339265101a', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
     }
     static get is() { return "eds-card-section"; }
     static get encapsulation() { return "shadow"; }
@@ -57,8 +68,8 @@ export class EdsCardSection {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | []",
+                    "resolved": "[] | string",
                     "references": {}
                 },
                 "required": false,
@@ -68,7 +79,8 @@ export class EdsCardSection {
                     "text": "JSON string representing an array of card objects.\nEach card object can contain properties like `title`, `description`, `avatar`, `headingLevel`, `tags`, `url`, `bg`, `tiny`, and `image`.\n\nExample:\n```json\n'[{\"title\": \"Card Title\", \"description\": \"Description\", \"avatar\": \"/path/to/avatar.jpg\", \"url\": \"http://example.com\"}]'\n```"
                 },
                 "attribute": "cards",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "[]"
             },
             "cols": {
                 "type": "number",

package/dist/collection/shared-ui/eds-card-section/eds-card-section.stories.js

@@ -3,8 +3,8 @@ export default {
     component: 'eds-card-section',
     argTypes: {
         cards: {
-            control: 'text',
-            description: 'JSON string representing an array of card objects, each with properties like title, description, avatar, image, etc.'
+            control: 'object',
+            description: 'Representing an array of card objects, each with properties like title, description, avatar, image, etc.'
         },
         cols: {
             control: { type: 'number', min: 1, max: 12, step: 1 },
@@ -16,7 +16,7 @@ export default {
         }
     },
     args: {
-        cards: JSON.stringify([
+        cards: [
             {
                 title: 'The Future of AI in Healthcare',
                 description: 'Explore how AI is transforming the healthcare industry with cutting-edge technologies and research.',
@@ -57,18 +57,20 @@ export default {
                     lazyload: true
                 }
             }
-            // Additional cards can be added here
-        ]),
+        ],
         cols: 4,
         extraClass: ''
     },
     parameters: {}
 };
+// Variant: Passing cards as an array of objects via property binding
 export const Default = {
-    render: (args) => `
-      <eds-card-section
-        cards='${args.cards}'
-        cols="${args.cols}"
-        class="${args.extraClass}"
-      ></eds-card-section>`
+    render: (args) => {
+        const cardSection = document.createElement('eds-card-section');
+        // Pass the array and other args as properties
+        cardSection.cards = args.cards;
+        cardSection.cols = args.cols;
+        cardSection.className = args.extraClass;
+        return cardSection;
+    }
 };

package/dist/collection/shared-ui/eds-footer/eds-footer.js

@@ -47,7 +47,7 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: 'efffa9b96cc2a094255fcb6d08ec45c7c7f09ec4', class: `${this.extraClass} pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, h("div", { class: "container pb-20 xl:pb-40 " }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })), h("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, h("div", { key: 'c3942c635dff3dc8cb47a21f20aca52acfaa3e18', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, h("div", { key: '57e963272659ce2e63294c969f3724a03aef667e', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, h("div", { key: 'c3e5cfe07fe9eb90450f7a87be1b95ed00ef38ce', class: "flex items-center gap-x-12" }, h("a", { key: 'b0d0c65115b611f78d2b468559c16eb60f538907', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en" }, h("eds-img", { key: '6cb5d067f07b456a8d828f3f42f2730e3e5374e0', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), h("div", { key: 'e5b768b0fb96fcdcb786d33fc808368005935491', class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, h("p", { key: '777263c2f4bde43d38690f41391eaf8e51d945fa' }, this.fundedBy), h("div", { key: 'a415687d08edf8f3e03a6edce9c45f58662c8595', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, h("span", { key: 'c0b6498ad4f5e1f4f1945ebb971f9dd81cc74c77', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && (h("button", { key: '10133d180bfb0d8a6354ea2cbea318a2c46fc463', class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference)))), h("div", { key: '917d0980f91a8c42a75bae301b0a18e3777dd021', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
+        return (h("footer", { key: '8d3d1b5d2acd76f56b2bc12539cb7d277b4dcd7f', class: `${this.extraClass} pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, h("div", { class: "container pb-20 xl:pb-40 " }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })), h("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, h("div", { key: '7d6e3a414ec8e8f8e2b795faf639948f8819f5cb', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, h("div", { key: '9a475fd146ac0e1bc78c43940ee24ec31212fcb9', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, h("div", { key: '4b465113cdb882f919fba15e944eb56edbe3c570', class: "flex items-center gap-x-12" }, h("a", { key: '1a8ad1ee5f4dfb77da036b03d0770cba8e5d725e', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en" }, h("eds-img", { key: '4714ea1a01b7b7eef8b3af0c04ffe793d51c4d5e', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg" }))), h("div", { key: 'c4db6bab70e570e337c82136a0d9d6dad01c1039', class: "f-ui-04 text-light order-last w-full lg:order-none lg:w-auto" }, h("p", { key: '0b030a92c12a3a96fe2baacc13ac21f5bd708a50' }, this.fundedBy), h("div", { key: '4714d0ccf0e3912ae330a6f39ed3607caf2b51a4', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap" }, h("span", { key: 'b4bc2d45871c7d1f9de1d6090959b12fd5246f01', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.hasCookiesSetUp && (h("button", { key: '98b56eee7be6bc1558821933cebf2853b3bb68fc', class: "effect-focus !no-underline underline-offset-4 hover:!underline", onClick: () => this.toggleCookiesPopup() }, this.cookiesPreference)))), h("div", { key: 'f4bf4a0c99f3be920dd15f68e6f7e390cd85ecce', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get originalStyleUrls() {

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -4,7 +4,8 @@ import { h } from "@stencil/core";
  * It provides a responsive, full-window overlay menu with navigation links and additional options.
  * This component is suitable for mobile and small screens, where a fullscreen menu enhances user navigation.
  *
- * ## Key Features:
+ * ## Key Features
+ *
  * - **Links and Menu Links**: Allows configurable primary and secondary navigation links.
  * - **Event-Driven Open/Close**: Listens for a `toggleMenu` event to open or close the menu, emitted by the `eds-header` component.
  * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
@@ -112,8 +113,8 @@ export class EdsFullscreenMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | { label: string; url: string; icon?: string; external?: boolean }[]",
+                    "resolved": "string | { label: string; url: string; icon?: string; external?: boolean; }[]",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.stories.js

@@ -0,0 +1,77 @@
+export default {
+    title: 'Shared UI/Header/Fullscreen Menu',
+    // We set a primary component here for documentation purposes.
+    // (Note: The story renders both eds-header and eds-fullscreen-menu.)
+    component: 'eds-fullscreen-menu',
+    argTypes: {
+        menuEnabled: {
+            control: 'boolean',
+            description: 'Enable menu toggle in the header',
+            defaultValue: true
+        },
+        headerLinks: {
+            control: 'object',
+            description: 'An array of link objects for the header navigation',
+            defaultValue: [
+                { label: 'About', url: '#' },
+                { label: 'Focus Areas', url: '#' },
+                { label: 'News & Events', url: '#' },
+                { label: 'Contact', url: '#' }
+            ]
+        },
+        menuLinks: {
+            control: 'object',
+            description: 'An array of link objects for the fullscreen menu',
+            defaultValue: [
+                { label: 'About', url: '#' },
+                { label: 'Focus Areas', url: '#' },
+                { label: 'News & Events', url: '#' },
+                { label: 'Contact', url: '#' }
+            ]
+        }
+    }
+};
+const Template = (args) => {
+    // Create a container element to host both components
+    const container = document.createElement('div');
+    container.style.position = 'relative'; // ensure proper stacking context
+    // Create an informational paragraph
+    const infoMessage = document.createElement('p');
+    infoMessage.textContent = 'Change the window width to see the menu burger. Then click on it to see the content';
+    infoMessage.style.fontFamily = 'sans-serif';
+    infoMessage.style.margin = '1rem 0';
+    infoMessage.style.fontWeight = 'bold';
+    // Append the info message to the container
+    container.appendChild(infoMessage);
+    // Render the header using property binding for the links by passing a JSON string.
+    // (You can update your components to also accept objects directly if desired.)
+    container.innerHTML += `
+      <eds-header
+        menu-enabled="${args.menuEnabled}"
+        links='${JSON.stringify(args.headerLinks)}'
+      ></eds-header>
+      <eds-fullscreen-menu
+        links='${JSON.stringify(args.menuLinks)}'
+      ></eds-fullscreen-menu>
+    `;
+    // Optionally, you might add some inline styling or scripts to simulate the header’s menu toggle behavior.
+    // For example, if your header emits an event when the menu toggle is clicked, you can listen for that event
+    // and programmatically show/hide the fullscreen menu. That logic would be implemented in your component.
+    return container;
+};
+export const Default = Template.bind({});
+Default.args = {
+    menuEnabled: true,
+    headerLinks: [
+        { label: 'About', url: '#' },
+        { label: 'Focus Areas', url: '#' },
+        { label: 'News & Events', url: '#' },
+        { label: 'Contact', url: '#' }
+    ],
+    menuLinks: [
+        { label: 'About', url: '#' },
+        { label: 'Focus Areas', url: '#' },
+        { label: 'News & Events', url: '#' },
+        { label: 'Contact', url: '#' }
+    ]
+};

package/dist/collection/shared-ui/eds-header/eds-header.js

@@ -74,6 +74,10 @@ export class EdsHeader {
      * @returns {any[]} Array of parsed link objects
      */
     get parsedLinks() {
+        // If it's already an array, return it immediately.
+        if (Array.isArray(this.links)) {
+            return this.links;
+        }
         if (typeof this.links === 'object') {
             return this.links;
         }
@@ -90,8 +94,8 @@ export class EdsHeader {
         return [];
     }
     render() {
-        return (h("header", { key: 'bd3056a3d8ca0e8472e154eb3da9ba1aca6d1fa1', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '55db7995eab812785789ecc8441079ee5e07af76', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '0464d045dc59d0f78a021a14ffa0254579052529', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '7ab1b2c20cf9d934a29480bd29736ced42ff5a20', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: '7dca9e2715f3831ee806b0e354c19b65deac1490', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: 'd49985a1074f2daed9cab42fa5af8b0ec8cb6ec9' }), this.userFeature ? (h("div", { class: "px-16" }, h("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId }))) : null, this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
+        return (h("header", { key: 'b16e5e84ba7565ebf4ea5892a9a1af84fc94769d', class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '00206a2714dedfe205151002cc10c430e75814fb', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '25fc6207d61bb4cc06877dd0b15bf56392b50255', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '8d1ee2947db26e5acb556da845fe1b811a8d18b2', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: '5c70e48f3a617a6abe402659b37741e657440cbc', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "small", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '773b60e90ecfe336fede86ea6e3b0ec2fd10bd72' }), this.userFeature ? (h("div", { class: "px-16" }, h("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId }))) : null, this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
     }
     static get is() { return "eds-header"; }
     static get originalStyleUrls() {
@@ -128,8 +132,8 @@ export class EdsHeader {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | { label: string; url: string; icon?: string; external?: boolean }[]",
+                    "resolved": "string | { label: string; url: string; icon?: string; external?: boolean; }[]",
                     "references": {}
                 },
                 "required": false,
@@ -189,7 +193,7 @@ export class EdsHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Flag to enable or disable header menu toggle feature.\nWhen true, displays the toggle in the header."
+                    "text": "Flag to enable or disable header menu toggle feature.\nWhen true, displays the toggle in the header.\nRequires the <eds-fullscreen-menu> to properly work."
                 },
                 "attribute": "menu-enabled",
                 "reflect": false,

package/dist/collection/shared-ui/eds-header/eds-header.stories.js

@@ -1,5 +1,5 @@
 export default {
-    title: 'Shared Ui/Header',
+    title: 'Shared Ui/Header/Main',
     component: 'eds-header',
     argTypes: {
         homeUrl: {
@@ -7,8 +7,8 @@ export default {
             description: 'URL for the home logo link.'
         },
         links: {
-            control: 'text',
-            description: 'JSON string representing the primary navigation links, each containing `label`, `url`, and optionally `icon`.'
+            control: 'object',
+            description: 'An array of link objects for the header navigation'
         },
         menuLinks: {
             control: 'text',
@@ -18,6 +18,10 @@ export default {
             control: 'text',
             description: 'URL for the dashboard page.'
         },
+        menuEnabled: {
+            control: 'boolean',
+            description: 'Shows/hides burger menu on small screens.'
+        },
         inverseHeader: {
             control: 'boolean',
             description: 'Determines if the header is rendered in inverse style (dark background).'
@@ -41,12 +45,13 @@ export default {
     },
     args: {
         homeUrl: '/',
-        links: JSON.stringify([
-            { label: 'Home', url: '/', icon: '' },
-            { label: 'About', url: '/about' },
-            { label: 'Services', url: '/services' },
-            { label: 'Contact', url: '/contact' }
-        ]),
+        links: [
+            { label: 'About', url: '#' },
+            { label: 'Focus Areas', url: '#' },
+            { label: 'News & Events', url: '#' },
+            { label: 'Contact', url: '#' }
+        ],
+        menuEnabled: false,
         inverseHeader: false,
         userFeature: false,
         keycloakUrl: 'http://localhost:8080',
@@ -58,9 +63,10 @@ export const Default = (args) => `
     <eds-toast-manager />
     <eds-header
       home-url="${args.homeUrl}"
-      links='${args.links}'
+      links='${JSON.stringify(args.links)}'
       menu-links='${args.menuLinks}'
       dashboard-url="${args.dashboardUrl}"
+      menu-enabled="${args.menuEnabled}"
       inverse-header="${args.inverseHeader}"
       user-feature="${args.userFeature}"
       keycloak-url="${args.keycloakUrl}"

package/dist/collection/shared-ui/eds-login/eds-login.js

@@ -66,9 +66,10 @@ export class EdsLogin {
         return this.authenticated ? 'Logout' : 'Login';
     }
     render() {
-        return (h("div", { key: '3e9fdf8fa303948f00da83a1c8c1efc35e2c3c1a' }, h("eds-button", { key: '452b1c6ba9dda0ae5570accedf5e61b8391aeadb', label: this.getBtnLabel(), intent: "primary", loading: false, disabled: false, pill: false, icon: "arrow-diagonal", size: "small", "icon-pos": "right", "aria-label": this.getBtnLabel(), "element-type": "button", triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) })));
+        return (h("eds-button", { key: '35f298ecf951d5b1087f988262ae7d312c5e2d38', label: this.getBtnLabel(), intent: "primary", "extra-class": "text-default", "aria-label": this.getBtnLabel(), triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) }));
     }
     static get is() { return "eds-login"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "keycloakUrl": {
@@ -145,7 +146,7 @@ export class EdsLogin {
                     "text": "Event emitted when the authentication status changes.\nIt emits a boolean value indicating the new authentication status."
                 },
                 "complexType": {
-                    "original": "{ authenticated: boolean; user: any }",
+                    "original": "{\n    authenticated: boolean;\n    user: any;\n  }",
                     "resolved": "{ authenticated: boolean; user: any; }",
                     "references": {}
                 }

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js

@@ -3,7 +3,7 @@ import { h } from "@stencil/core";
  * Component representing a list of social network links for EBRAINS.
  * Each link directs users to EBRAINS' profiles on various social networks.
  */
-export class EdsSocialNetwork {
+export class EdsSocialNetworks {
     constructor() {
         /**
          * Array of social network objects, each containing label, URL, and icon.
@@ -53,18 +53,18 @@ export class EdsSocialNetwork {
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '6169559327b728fd0f3a51a2b8a6439f80fba8fc' }, h("p", { key: 'df2e008500097af1b85660fe8b3fac122f5018a4', class: "f-ui-02" }, this.title), h("ul", { key: 'df01a2802412c4db4e5442fdfc0b6ef3f15c4109', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("div", { key: 'a6a3e2084eb01def71f6fee67ebe8c5f4f613c89' }, h("p", { key: '43b92e9c33f8abef6070a6a3cd77f7573e2ab454', class: "f-ui-02" }, this.title), h("ul", { key: 'c0e0dfdeff373885f62250c8bf4385268410406c', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["eds-social-network.css"]
+            "$": ["eds-social-networks.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["eds-social-network.css"]
+            "$": ["eds-social-networks.css"]
         };
     }
     static get properties() {

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.stories.js

@@ -0,0 +1,21 @@
+export default {
+    title: 'Shared Ui/Social Networks',
+    component: 'eds-social-networks',
+    argTypes: {
+        title: {
+            control: 'text',
+            defaultValue: 'Follow EBRAINS to keep up-to-date'
+        }
+    }
+};
+const Template = (args) => `
+    <eds-social-networks title="${args.title}"></eds-social-networks>
+  `;
+export const Default = Template.bind({});
+Default.args = {
+    title: 'Follow EBRAINS to keep up-to-date'
+};
+export const CustomTitle = Template.bind({});
+CustomTitle.args = {
+    title: 'Stay Connected with EBRAINS!'
+};

package/dist/collection/shared-ui/eds-tabs/eds-tabs.js

@@ -51,12 +51,33 @@ export class EdsTabs {
         this.setActiveIndex();
         this.tabChange.emit({ tabId: this.id, index: 0 });
     }
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
     parseTabs() {
-        try {
-            this.parsedTabs = JSON.parse(this.tabs);
+        if (Array.isArray(this.tabs)) {
+            this.parsedTabs = this.tabs;
         }
-        catch (error) {
-            //console.error('Invalid JSON format for tabs:', error);
+        else if (typeof this.tabs === 'string') {
+            try {
+                this.parsedTabs = JSON.parse(this.tabs);
+            }
+            catch (e) {
+                //console.error('Error parsing tabs prop:', e);
+                this.parsedTabs = [];
+            }
+        }
+        else {
+            // If the type is not an array or string, assume an empty array.
             this.parsedTabs = [];
         }
     }
@@ -106,7 +127,7 @@ export class EdsTabs {
         });
     }
     render() {
-        return (h("div", { key: '25078703609dbdaa2025013d0e266b169c880c50', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '8aa1b4ab1f15692c912db3ee39486a59d634c6a5', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '33728823ca0f039e1037a691da90b295cbe3f3ac', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '540bb667084b36ae2151ec39ef6b54a9ac6a4c4a', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: 'f0266d39c943b82725ded757cce0b35fb85fa874', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'fcedf94e6f6c14635291d9c8e6d672efc8055433', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) })));
@@ -164,8 +185,8 @@ export class EdsTabs {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | { label: string; url: string; active: boolean; ariaLabel: string }[]",
+                    "resolved": "string | { label: string; url: string; active: boolean; ariaLabel: string; }[]",
                     "references": {}
                 },
                 "required": false,
@@ -197,7 +218,7 @@ export class EdsTabs {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ tabId: string; index: number; name?: string }",
+                    "original": "{\n    tabId: string;\n    index: number;\n    name?: string;\n  }",
                     "resolved": "{ tabId: string; index: number; name?: string; }",
                     "references": {}
                 }

package/dist/collection/shared-ui/eds-tabs/eds-tabs.stories.js

@@ -17,11 +17,29 @@ export default {
         }
     }
 };
-const Template = (args) => `
-    <eds-tabs 
-      tabs='${args.tabs}'
-    ></eds-tabs>
+const Template = (args) => {
+    // Create a container element
+    const container = document.createElement('div');
+    // Insert the eds-tabs element and an output element for dynamic updates.
+    container.innerHTML = `
+    <eds-tabs tabs='${args.tabs}'></eds-tabs>
+    <p id="active-tab-output" style="margin-top: 16px; font-family: sans-serif; font-weight: bold;"></p>
   `;
+    // Query the eds-tabs element and the output element after the content is rendered.
+    // We use setTimeout to ensure that the custom element has upgraded.
+    setTimeout(() => {
+        const edsTabs = container.querySelector('eds-tabs');
+        const output = container.querySelector('#active-tab-output');
+        if (edsTabs) {
+            // Listen for the "tabChange" event
+            edsTabs.addEventListener('tabChange', (event) => {
+                // Update the output text dynamically
+                output.textContent = `Active Tab Index: ${event.detail.index}, Tab Name: ${event.detail.name}`;
+            });
+        }
+    }, 0);
+    return container;
+};
 export const Default = Template.bind({});
 Default.args = {
     tabs: JSON.stringify([

package/dist/collection/shared-ui/eds-tabs-content/eds-tabs-content.js

@@ -114,11 +114,11 @@ export class EdsTabsContent {
         });
     }
     render() {
-        return (h("div", { key: 'b1bfb55fbdee21a10fcc600d4c3ce2842684c519', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '1d1aeb094b6c350355abec1bf74928561a1c0f2d', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '5d5b04ddf5ddb60c2a9b49d19f4efe026cc2557d', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '7bc954d9251bd15b5e3a49d5c74b83805f802b07', class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '1bfda380604f1eae1cc5be147a5e3e6b537e0396', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'b2ed26b52fd629ec99b01c7dc8e612eae4f3886d', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             //const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label, url: tab.url, active: index === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index, tab.label) })));
-        })), h("slot", { key: '58e9281516d0a4485ba0779f9b79c0fa5e989166' }))));
+        })), h("slot", { key: '5072b877786a23358d540d6d242d5fbdb3c63d7f' }))));
     }
     static get is() { return "eds-tabs-content"; }
     static get properties() {