@ebrains/components 2.0.0 → 2.1.0

package/dist/collection/eds-docs-ui/design-tokens/token-typography/token-typography.js

@@ -5,7 +5,7 @@ import typography from "../../../../../../../../packages/assets/tokens/typograph
  */
 export class TokenTypography {
     render() {
-        return (h("section", { key: '62bc664d442830ac40bc6aae9a5dbd38f5d18f05', class: "w-full" }, h("ul", { key: 'e8a97077420f77631e75ec99e14b22fd77a36c11', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'b638ddc335ade66f9eb0af8752f56945270fc5ee', class: "w-full" }, h("ul", { key: '40f638bc0eccdcc79aecaf5da8fc9c1332122d49', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
             .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, h("div", { class: "mr-auto hidden lg:block", style: {
                 fontFamily: typography.families.sans,

package/dist/collection/eds-docs-ui/docs-palettes/docs-palettes.js

@@ -17,7 +17,7 @@ export class DocsPalettes {
         }
     }
     render() {
-        return h("div", { key: '5ca77a86d54849aaed6f2d716a66a429e6df45b7', class: "container" }, this.renderContent());
+        return h("div", { key: '82b8de086298568ed7bbb4717da0f6f19ff9677c', class: "container" }, this.renderContent());
     }
     static get is() { return "docs-palettes"; }
     static get properties() {

package/dist/collection/eds-docs-ui/logo/logo-space/logo-space.js

@@ -5,7 +5,7 @@ import { vLogoMargins } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoSpace {
     render() {
-        return (h("div", { key: '7872766c3ef2db174e35ace73019dedb0851bc0a', class: "container" }, h("ul", { key: '3e8415ab8996258e660a3f06579be6c532e1f123', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd688491de23cd2b290c921bb9388dcb3b4dde884', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4be955235235c5833690d737715df93fa04b3571', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: '8e897cbbf86cfcfd89f4aaf5d93730e931c0b9e2', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '7447bbe0fe3046387d366d245a5fd7537fa3121b', class: "text-center mt-16" }, h("p", { key: '7f682977b3781fa8dfebb3115f25c9bf63d8592b', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '1bfec0fd0cb6d3a8316fb4e7632da601f5c1d40d', data: '[\n                  { "Media": "Print", "Landscape": "0.75 cm", "Portrait": "1.75 cm" },\n                  { "Media": "Web", "Landscape": "29 px", "Portrait": "50 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))), h("li", { key: '7c37fadabd572458f5e2e8d689b3fc32faa4da8d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }))));
+        return (h("div", { key: '715c9aab5f553f14a183efcec753ac3a7d2a6ef7', class: "container" }, h("ul", { key: 'd552744d7c502654c1863a0e2bfe939aa5ab0447', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '06ea3756aa8416e11a0f8c3995e70112808791e8', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '186172fddc2a100fb5f757ce7175501f7b838896', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: '6131a46a1f7d4efac1feb05ffbd88ca35ba07d08', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'df5acbe2348d1fcf069ddb55ce8c7180ecea0959', class: "text-center mt-16" }, h("p", { key: '65b120c29fd408808ab2b6ca3e038915f386c033', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '137055ef0dd2e79db8dd0cfac8c297385c693338', data: '[\n                  { "Media": "Print", "Landscape": "0.75 cm", "Portrait": "1.75 cm" },\n                  { "Media": "Web", "Landscape": "29 px", "Portrait": "50 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))), h("li", { key: 'cbaf5b78b83fa1874d2555ae07dcd849007d9b28', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }))));
     }
     static get is() { return "logo-space"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class LogoVariationsHorizontal {
     render() {
-        return (h("div", { key: 'ceda78e6258973d2de36caeed10ab579cc1dcf49', class: "container" }, h("ul", { key: '1400feede2a5c2ef8bd6fd2bd0549a8d2e62abc6', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'eac602da79fa9c94d0c8ae3cb18a49cf590a208d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '2508e10bab0731bc502870b4a68825df225dbabe', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '172e9d8329de02e17e2cee6a0186e4ae880252df', class: "coloured" }, h("eds-logo", { key: 'da041b3f7bbd97e62e7372a1c1dbc0110a44e4ec', type: "no-bg", href: "#" }))), h("li", { key: 'ad36fc3d41f7bc2e98d076b7b0d2aa95caf80fa9', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'e13de3f4225b22d17caf446451b2c93a4a735f1e', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'ee257b9b82b558831c0e7e962867d22f0d27b261', class: "bg-default" }, h("eds-logo", { key: 'd251ae3827082802f0d435d8d88f0d636980997f', type: "black", href: "#" }))), h("li", { key: '3c6caa0029039e51e72ffeb8bb858ea20e54fc3d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'bd21269ccce938450e5636ea4ea59cfa3f8509be', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: '89f4eea5eb6e1a0230d4ff88906f8113a2d91624' }, h("eds-logo", { key: '0859320cfc614dd5d07dea5e670b4bd9b9796637', type: "color-white", href: "#" }))))));
+        return (h("div", { key: '42b4022e993bb4e340a4f930706ed61d487856af', class: "container" }, h("ul", { key: '368cb376390f9cd4f311c34f35e227916bccc3aa', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'c144cf24fe85d4ca731cbcb47aee2ae6bbfb9500', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '9ebdf9fae31f6370bd469cf4c3964e5fa5dae53b', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '347dfdc62a77f9bc2774870d0bce4803a9def6a1', class: "coloured" }, h("eds-logo", { key: '642ed4f4dd0720b457e8871d8d39a3e6f8817919', type: "no-bg", href: "#" }))), h("li", { key: '4b97f489fdc512de54c0f2c0bbf206f6d64fec57', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '217c5485599de77021d5b008952a7463a95e8d22', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'c3e7f3b4b770662cc83c261af241306e8449cddb', class: "bg-default" }, h("eds-logo", { key: '1d0a90da209d8dbc28b91ccd3d3e112ed189428d', type: "black", href: "#" }))), h("li", { key: 'f8879a7c790e1b5f0555d6d764e828fbc6a4e263', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '93f6729dc8f3e4cf0257e57c4b034e94cfefa99d', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'd45eaff596387f93aabc377fa96f1b386b8c5e42' }, h("eds-logo", { key: '4a8209824ad3dcec06be65303dc9f0cf01613a8f', type: "color-white", href: "#" }))))));
     }
     static get is() { return "logo-variations-horizontal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: 'ec0d8cd7cb747510c50e7cec7fc7c34c6f478720', class: "container" }, h("ul", { key: 'b113e7c74a5821a3bb22b7d891e3ad9855865fb3', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '3435fb57f8c6bd402db8c4fffcb5b82b2d85f445', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '909917d2636aa6cfd2cd80dedc58a4e2cf4b1c75', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '6e5dca528cfc829a53372682cb38ed704c86afcf', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '4aa473af9b74186159434a182fc1b0ebe3d3f5bb', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: 'fe252c1da4e186a3e0d27c1972b2d72a76cce3ed', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '337437fd2a6ffa9b41c5d38b35c4bac5e43d91ea', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '6cd8796a987ecf918ea4d3a4ee72a87bfbbef83a', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'c65fb600fe8e69173d2d3651a519110c73d3b8a0', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: 'f9015fa8dc76b18abb2b3279c133022994ef74a9', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'b133e3e546056310e881de0e90d2ced7ff1f656c', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'bd7d7c6cf9be668644743cd0b45774a70f4d05a7', class: "mx-auto w-[300px]" }, h("eds-logo", { key: 'a7af6456daa78ac66968c4a9f36fe69872052104', orientation: "vertical", type: "color-white", href: "#" }))))));
+        return (h("div", { key: '9384d3b91a4b09c780a1bb8d6b49f441f7a7a22a', class: "container" }, h("ul", { key: '60a89752afab4d76da7a3fc070bff2f7cc98d4b0', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6a8b35e2eaa5b0b5f4aa233fbcaa2a21b1e340c7', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'f9893c662898f97567d4a56eaf2d5a620e087743', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '6fad2d66a3e34c11344210c3b8d92279d566f866', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '66740c018c8f3aa3fbeb2cab8c392713b7e004ed', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: '7a5a2ee2fab87b6ea7892134b5b1fb939cc5665c', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '79bd10816b9dfe8ab28d444d7dfb4b361afea94f', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '10f00983923848d8e89b6d7c7990972a76fbaf80', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: '3e10d0887921355c0974ad8a4c04cc86e901440d', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: 'eeaabdfa7d788647845d5488decfd06815fc2c47', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '1b058b1513f09eb8a1043ab3ff8a4cda28246576', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'bd3698e6210ecbe356f0c334a983b21ef6b7b5e3', class: "mx-auto w-[300px]" }, h("eds-logo", { key: 'c9321f6b80b68e74a02dbf77ba83f2bc2567c538', orientation: "vertical", type: "color-white", href: "#" }))))));
     }
     static get is() { return "logo-variations-vertical"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class LogoVariationsTabs {
         }
     }
     render() {
-        return h("div", { key: 'cbe9d3d2a53196ea35ea9d7d197265209da4b4c6', class: "container" }, this.renderContent());
+        return h("div", { key: 'ac936a8594bc4f5f8573da7ac2751103fe287e48', class: "container" }, this.renderContent());
     }
     static get is() { return "logo-variations-tabs"; }
     static get properties() {

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("div", { key: '9c2df9c517452bd4df5f27b0eb3077b4dbde76b0', class: "container" }, h("ul", { key: 'c69e0f3caed538edb975a51fafd7680ec06ac741', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'fe65b6703bca5e3fadc2bef60dbb40e7c0888654', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '6301af7e0c10cf233fc6c92861fab0a904f91915', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '7ba55a884e9c4be99fca5e64ee8f25009ad2fccc', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '9f7ac77917be3549a26ebfa0e4afad41de1d55cc', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '24a67d1408ff31b52133e5d75cbe71e705dee368', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: '0968d218c62040d9176e7848bc9965fe2ff76e93', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '37f70b5f3d907d4bad1aa7424da262a42a2e9da1', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4134f35b1bdd39eb60e87a9959f53a40a6f978f3', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: 'f318526f38479fff81cdefd9d98c81715842f8cd', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '7714089427702d8aacc1c7b6dd78f512204af563', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'd1f79a37deac283b07dcbc54ab25543c1458f4dc', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: '3e9cb64225dad45d1bab5eef343a897e7f589e2c', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: 'f7fb0bc0f6f744ad2dfac6a1e1f74c60b13904ab', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'e3296835f6a625092e2623bf5eece034c4b2c069', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: '6f9f088b3ebdbbf2693c36835ec6181b2283ed52', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: '28922de12ce7ff3b20a42ce11ed3ab21593a9ec8', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'fe52207a9a8554f958547e4f03dcd4163489623f', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: 'd4f38c9f8c819897473bc6120a0873c3476a688a', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: 'b69a437bc5b37c9e51fd16555020a4274dca9804', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '302947370175a03a44452e50c8260c8520a61c25', class: "mx-auto" }, h("div", { key: '4a3712ae64bcee40918b675c71a288cf67cc395a', class: "bg-accent p-16" }, h("div", { key: '304d6dd4615dcbeef15a20c18ca8492406e8b886', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '4d5a0931f712586c1a0206a6b2bceb5ffc1c6b8d', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
+        return (h("div", { key: 'db92af6471b73d6342c4c218ef26b7439e72e9c9', class: "container" }, h("ul", { key: '57239717b1f53107a5bfbc94794568ea9fe3b392', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'c32313633ff55e2fbb28bca75f4d0e9bc2eb85d0', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'ec127af6b1b3c5e0aed8c4c5bf6fb34166a50e89', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '130ae0f920e4b4231d00bf46804176f9c2d2750a', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '4efd7dd8cbc1fdefd65a94891c465373ac05391e', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'ea7fbe7c25663e944d80d1feb52ab972edf73aa8', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: '373939ac376d7f95a77e84e35b8c2773cecca0e0', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '23351f40af859f9a36b108db8c95dbdefe7f889a', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '6606581d39d6b1834eebc720be8695bec9052c5a', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: '10d459c1e0db7351b8d247bb0ab2c3db1f39cfc3', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '9253a8fdab1547c0a9282e44d7dfb586107c0916', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '7db0f94ca0d2a7c6b3cde529028c2789794b31b5', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: '39280d53b73bb6ad80d3398e508941604f4fc856', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: '24d87e264048c1f675cc0182c6dbf049af15f622', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '35cac43885a2364650ab3e758071b1fd685019fa', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: 'cd3d762cd6889f764bedc6b4ccd241e1b52413f6', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: '0a5c20a333830b85c2943b44c3ad1c3066c582cc', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'e2ced6578e0ea0574b1025c708061436beaa0c32', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: 'e41cf94b8ba85c372fe3118497a61f5fd9d127a0', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '87b548c1183299d29b14e3159ec712e27e72632f', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '1a96f1f9ffa1d9c3e29fa3c107893d440f259922', class: "mx-auto" }, h("div", { key: 'a2cfab02c9328045d9833fa143d53cdb5cc249fc', class: "bg-accent p-16" }, h("div", { key: 'fee8c2a733e1822b1b97db56f6b835a9694ee071', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'a978cd92ca70c5dd3437e251e603bc33099bb250', class: "f-ui-02 text-center" }, "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/eds-docs-ui/svg-repository/svg-repository.js

@@ -25,7 +25,7 @@ export class SvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("div", { key: '4f51504595167008271a6dce4d43c2988394fc8a', class: "full-width" }, h("eds-table", { key: '3cd08a72250aeb7f98fe1b68349bd7de6acb9079', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (h("div", { key: '7182d9e62bbee54fe4787d4fdd00e454d4f9df44', class: "full-width" }, h("eds-table", { key: '4f9e0681ce92a66ca09fd933663caf465208306d', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
     }
     static get is() { return "svg-repository"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.js

@@ -25,7 +25,7 @@ export class EdsCookiesPreference {
         }
     }
     render() {
-        return (h("div", { key: 'b16a1d29fe09e09fdcfc24b06430e6f99a69a81a' }, h("eds-link", { key: 'ee2192e1368a50fe3c80da277e97e614dd7e457f', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (h("div", { key: '76c90b0245f703ffd80e9aa8ccc587c74b813df2' }, h("eds-link", { key: '5df4bcf1261c5afb610576e72720e0689cb2eb21', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
     static get is() { return "eds-cookies-preference"; }
     static get originalStyleUrls() {

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

@@ -52,7 +52,7 @@ export class EdsFeedback {
         const HeadingTag = this.headingLevel;
         const levelNum = this.headingLevel.replace('h', '');
         const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
-        return (h("div", { key: '997deecc8a62be9bc1dda142c26df1aeb8b4ac41', class: "grid inline" }, h(HeadingTag, { key: '3ae9bd1c1cb1e1d6f452f7f101ee8032db90328d', class: headingClass }, this.label), h("p", { key: '1788790da082ec33d4c4d637be0c872ddf7303e3', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '763f72d5376075c765c4309c607f3591467bb377', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '4c0e09faa967965e6cca47775d076e1e317b7948', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: '5e1c1694270cd7504ca8ba942b6f108af5f0572e', class: "grid inline" }, h(HeadingTag, { key: 'da068fd8d6fb9e9789472c418896688e40ab9d32', class: headingClass }, this.label), h("p", { key: '5f896de20bc86c5f3b6596f1d73a3ef8419d8c56', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '4909638b6f5cec693075285f99f6881541c09d29', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'cdafafb8e206ecc4bbb74edc16de94a5c26defc9', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-feedback"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,6 +42,12 @@ export class EdsFooter {
         }
         const shouldShow = window.scrollY > 100 && document.body.scrollHeight > window.innerHeight;
         this.backBtn.style.opacity = shouldShow ? '1' : '0';
+        this.backBtn.style.pointerEvents = shouldShow ? 'auto' : 'none';
+        const btn = this.backBtn.querySelector('eds-button');
+        if (btn) {
+            btn.removeAttribute('aria-hidden');
+            btn.setAttribute('tabindex', shouldShow ? '0' : '-1');
+        }
     }
     toggleCookiesConsent() {
         this.cookies.emit('toggle');
@@ -54,9 +60,9 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: '7b9fd367d8ab6581854f2b2fd3ffea0fee47d871' }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: 'd01c96c60e4fc43175d7e2e1c238284e6a9540a1', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '76e2468ca9fed5d1438d71a147d1861f537e77b4', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: 'd944e079008523980a5adadc7e7fbd308ad9c7b8', class: "flex items-center gap-x-12" }, h("a", { key: '0841e38c0b4ad9adacd59f6a43ddf3931903af07', 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-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("eds-img", { key: '6cfe4051c471215e2919efde9436c7827f7cde5a', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'dbb3471bc25444418423c5f2148af22ef7beb77f' }, h("div", { key: 'c70bd75c802b6c2b61b627db52566f639362f90d', class: "f-ui-04 text-light" }, h("p", { key: 'dc0dfaf8d16b53b0dbac78e693adf9dc26620d7a' }, this.fundedBy), h("div", { key: '121fe9d4d74392a02e13c6f54ba94ef8cb008e8e', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'ab733d143a6113080e28e2af36034c0d41b4a297', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", "extra-class": "f-ui-04", onClick: () => {
+        return (h("footer", { key: '4912d7994a636d5159d863339f0119e7b6bb1bc3' }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: 'fb1db2c19f29a0fd1474565759992be78c404251', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'c7c6c6eb43f2ccb00df8b05247120763b3f665d3', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '45a29c7988edbf99ef5573dc77c9cc9a22faa666', class: "flex items-center gap-x-12" }, h("a", { key: '0fbc8e7d275a07af6da8b520bddf62f4c13aecac', 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-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("eds-img", { key: 'ec9e972f19d34cb13ea2022ab09ab6373d54be27', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '0281a7e09166bbd2e02913467fe3235585d0bf0a' }, h("div", { key: '97b96a7f6718cbc79ff98874e5dc90d6e1ed614e', class: "f-ui-04 text-light" }, h("p", { key: '810b11a720bdcb92ce587a125ac8d026f31e9872' }, this.fundedBy), h("div", { key: '2973f13cc831fa3d1131b182958fa425b94897fd', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'b4cb01b0601c8117ae427fc5ab9c43c20edc6536', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", "extra-class": "f-ui-04", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: 'ccdcbd5967e74cb305f18b961ad747b8e4da004f', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop }))) : null)))));
+            } })) : null))), h("div", { key: 'd0b26e1911f55b44fb8a5253bab62b8db9141411', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -249,6 +249,25 @@ export class EdsForm {
             message: `${field.name} updated`
         });
     }
+    handleNPS(e, field) {
+        const score = e.detail;
+        this.values = Object.assign(Object.assign({}, this.values), { [field.name]: score });
+        const newErrors = Object.assign({}, this.errors);
+        if (field.required && score === null) {
+            newErrors[field.name] = ['This field is required'];
+        }
+        else {
+            delete newErrors[field.name];
+        }
+        this.errors = newErrors;
+        this.hasError = Object.keys(newErrors).length > 0;
+        this.form.emit({
+            event: 'change',
+            field: field.name,
+            value: score,
+            message: `${field.name} updated`
+        });
+    }
     handleSubmit() {
         var _a, _b;
         if (this.isSubmitting) {
@@ -317,7 +336,7 @@ export class EdsForm {
         return map;
     }
     renderField(field) {
-        var _a, _b;
+        var _a, _b, _c;
         if (!this.isFieldVisible(field)) {
             return null;
         }
@@ -327,7 +346,10 @@ export class EdsForm {
             const val = this.values[field.name] || 0;
             return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
-        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, error: !!this.errors[field.name], errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
+        else if (field.type === 'nps') {
+            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
+        }
+        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, error: !!this.errors[field.name], errorMessage: (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
     async getData() {
         return this.makeFormData();
@@ -336,9 +358,9 @@ export class EdsForm {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
         const buckets = this.groupedFields;
-        return (h("form", { key: '65b3611bfc26512d594c3f4657bcba93f4e54ec9', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '24c77c04b83d458528fbb4423f2d1a0f0e7e65e3' }, h("slot", { key: '13cdf29e9da20c91d3fa38ced5f0843046cfeefb' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        return (h("form", { key: 'a66997f39b5be347a4d502f77bcd1da9d1a274ac', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'f8800d2ebe64b3279234ab8ebe20e535dc822872' }, h("slot", { key: 'b4194073b281dec35a79a6cc974fdf7476a67807' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "container mt-20", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '99706c326e6e18a1099fef82e78a4ea383338fb4', class: "flex flex-col mt-20 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f)))), this.formBtn && (h("div", { key: '6e66e2f87c18022d729fcea33e4db6bc2a173392', class: "mt-32" }, h("eds-button", { key: 'a94a3e027f58c5276bec7e612987e738d74e7d1c', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (h("div", { class: "container mt-20", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '2fc83ebb6b0a472f6853618602c37ee83adae9ff', class: "flex flex-col mt-20 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f)))), this.formBtn && (h("div", { key: '91b569b1a4513945f3228c374ae45b52ea17f91d', class: "mt-32" }, h("eds-button", { key: '1a8feaecd5a7f292f8aeae3db900700b4f7fb8d4', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -80,7 +80,7 @@ Default.args = {
             ]
         },
         { name: 'newsletter', label: 'Newsletter', type: 'checkbox', value: 'subscribe', required: true },
-        { name: 'range', label: 'Range bar', type: 'range', min: '0', max: '10', step: '1', required: true },
+        { name: 'range', label: 'Range bar', type: 'range', min: '1', max: '10', step: '1', required: true },
         {
             name: 'enable-me',
             label: "I'm disabled - enable me",

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

@@ -84,7 +84,7 @@ export class EdsFrame {
         }
     }
     render() {
-        return (h("div", { key: '7544fb993c0e18ca62fd0bb2bcc75088645163d9', class: this.articleClasses() }, h("div", { key: '3c8c254255056515de9496bd35dd9f0f43cab505', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'fc9bdb15d9d4ac15c8b3e572b4e755cdcfa436b0', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '65c233f9ec7c616cf23350a2b91b2095de0db0b2', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '9f5b6280292996b66fb3380678fae7748aba8cb3', class: this.articleClasses() }, h("div", { key: '6e4f6e0ce9b44fe94ff4622285258747503d9034', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '36bb5a7b005b4c23a7042e5cf06769efe29b07db', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '9d64e26eaa9e79d68e13d6a0faf67c8ca68d2097', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     static get is() { return "eds-frame"; }
     static get encapsulation() { return "shadow"; }

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

@@ -56,7 +56,7 @@ export class EdsHeader {
         const classes = variantClasses[this.headerVariant] || variantClasses.default;
         // Logo color variant: default and inverse use 'color', strong uses 'color-white'
         const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
-        return (h("header", { key: 'aac532eed29a3d4b310ea2550521c95d562d0ece', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '8794699aa3401c267aacb95959acd57f9ceea3f5', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '490fae1495ecd2b801b24d068c7a2b446ed8741a', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '3e109d13e8ae8b911511f7cd067ffc193735121a', 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: '87d2e7e9e1d8cafeac2a38b709f77c6bfe83a96d', 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: "large", 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: 'c61e952aeb210ec0f1df85dcd165a4af9bee2d35' }), this.menuEnabled && (h("div", { key: '6838e9ee79eca023c58236d817524f1f0a0b60a5', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '1b5e7090df7021a145914a77c8bc7388a3218465', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (h("header", { key: '812ad4427cbb3f4b0ca9e305870c35d63487dc59', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '531acdceb12ca45fea125091dee4d8a0ff39a10b', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'bb2708b3c8eacc575117bfed404b7c9db4fd05e2', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'a80192d7666416c29025a1ac5812946f14feec3f', 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: 'fae258c468367837a9738bcbe2442709fdc601a0', 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: "large", 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: '9588ef20e19fda76115074c39d902eebead3c845' }), this.menuEnabled && (h("div", { key: 'ce2e43645a1c33ca7d6495acd820ad0a93cefdf9', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: 'ed73c7e7a6544f60eea9dbf43379ffe4967c0dbd', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     static get is() { return "eds-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@ export class EdsSocialNetworks {
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '7bd6202c426d23ded6af47b26e025f2d1b42904a' }, h("p", { key: '0c66f58474ff55cc06bd9f3f15f3deb251c9fb87', class: "f-ui-02" }, this.heading), h("ul", { key: '3e082ae50c77e2d8612b823aa3e474672d65d42f', 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: '7241de6d0a20687523e17a4455dff1dfac59a191' }, h("p", { key: '8292c0dde1b3518ada53dddc2ea0134ff3035e83', class: "f-ui-02" }, this.heading), h("ul", { key: 'b30922e6d1f51a52300c889464824fafad775f74', 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"; }

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

@@ -93,11 +93,20 @@ a {
   white-space: nowrap;
 }
 
-.effect-color {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+.effect-focus {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
+}
+
+.effect-focus:focus-visible {
+  outline-style: solid;
+}
+
+.effect-focus-within {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
 }
 
 .focus-visible\:text-default:focus-visible {
@@ -197,6 +206,10 @@ a {
   border-right-width: 0px;
 }
 
+.border-b-0 {
+  border-bottom-width: 0px;
+}
+
 .pr-28 {
   padding-right: 1.75rem;
 }
@@ -263,6 +276,10 @@ a {
   z-index: 99;
 }
 
+.after\:z-10::after {
+  z-index: 10;
+}
+
 .before\:bottom-0::before {
   bottom: 0rem;
 }
@@ -306,6 +323,10 @@ a {
   background-color: var(--grey-200);
 }
 
+.after\:border-soft::after {
+  border-color: rgba(0, 0, 0, .15 );
+}
+
 .after\:border-softest::after {
   border-color: rgba(0, 0, 0, .05);
 }

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

@@ -13,15 +13,20 @@ import { parseData } from "../../utils/sharedUtils";
  */
 export class EdsTabs {
     constructor() {
+        this.tabRefs = [];
+        // Store tab reference
+        this.setTabRef = (el, index) => {
+            if (el) {
+                this.tabRefs[index] = el;
+            }
+        };
         // cva configuration
         this.tabCva = cva([
             'relative py-12',
             'f-ui-03 whitespace-nowrap',
-            'effect-color',
+            'effect-color effect-focus',
             'focus-visible:text-default hover:text-default',
-            'border-2',
-            "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:opacity-0",
-            'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'
+            'border-2'
         ], {
             variants: {
                 position: {
@@ -31,7 +36,10 @@ export class EdsTabs {
                     right: 'pl-28 pr-16 rounded-tr-lg border-l-0 -ml-16 after:left-16'
                 },
                 active: {
-                    false: 'text-lighter bg-dark hover:bg-darker border-softest after:border-0',
+                    false: [
+                        'text-lighter bg-dark hover:bg-darker border-softest border-b-0 z-1',
+                        "after:content-[''] after:absolute after:bottom-0 after:inset-x-0 after:h-2 after:border-soft"
+                    ],
                     true: [
                         'bg-default text-default z-99',
                         'rounded-t-lg',
@@ -50,28 +58,35 @@ export class EdsTabs {
     componentWillLoad() {
         this.parseTabs();
         this.setActiveIndex();
-        this.tab.emit({ tabId: this.identifier, index: 0 });
+        this.tab.emit({ tabId: this.identifier, index: this.activeIndex });
     }
     /**
-     * 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.
+     * Parses the `tabs` prop into an array of tab objects.
+     * Returns an empty array if parsing fails or if `tabs` is not a valid JSON string or object.
      *
-     * @returns {any[]} Array of parsed link objects
+     * @returns {any[]} Array of parsed tab objects
      */
     parseTabs() {
         this.parsedTabs = parseData(this.tabs);
+        // Reset tab refs when tabs change
+        this.tabRefs = [];
     }
     componentDidLoad() {
         this.scrollToActiveTab();
     }
+    componentDidUpdate() {
+        // Ensure we have the correct number of tab refs after render
+        if (this.tabRefs.length !== this.parsedTabs.length) {
+            this.tabRefs = new Array(this.parsedTabs.length).fill(null);
+        }
+    }
     setActiveIndex() {
         this.activeIndex = this.parsedTabs.findIndex((tab) => tab.active);
+        // If no active tab found, default to first tab
+        if (this.activeIndex === -1 && this.parsedTabs.length > 0) {
+            this.activeIndex = 0;
+            this.parsedTabs[0].active = true;
+        }
     }
     scrollToActiveTab() {
         var _a;
@@ -93,31 +108,74 @@ export class EdsTabs {
                 : index < this.activeIndex
                     ? 'left'
                     : 'right';
-        return Object.assign({ class: this.tabCva({
-                active,
-                position
-            }), style: {
-                zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
+        const rawZ = position === 'left' ? index : this.parsedTabs.length + 1 - index;
+        // clamp inactive to at least 1
+        const z = active ? this.parsedTabs.length + 99 : Math.max(rawZ, 1);
+        return Object.assign({ class: this.tabCva({ active, position }), style: {
+                // stringify the number so it matches { [key: string]: string }
+                zIndex: `${z}`
             } }, (active ? { 'data-tab-active': 'true' } : {}));
     }
-    handleTabClick(index, tabLabel) {
+    handleTabClick(index, tabLabel, shouldFocus = true) {
+        // Validate index
+        if (index < 0 || index >= this.parsedTabs.length) {
+            return;
+        }
         // Update the active index and set all tabs' active state accordingly
         this.activeIndex = index;
         this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
         this.tab.emit({ tabId: this.identifier, index: index, name: tabLabel });
-        sendAnalytics({
-            category: 'ui-component',
-            tag: this.el.tagName.toLowerCase(),
-            name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
-            action: 'click'
-        });
+        // Only send analytics for actual clicks, not keyboard navigation
+        if (shouldFocus) {
+            sendAnalytics({
+                category: 'ui-component',
+                tag: this.el.tagName.toLowerCase(),
+                name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
+                action: 'click'
+            });
+        }
+        // Focus management for keyboard navigation
+        if (shouldFocus && this.tabRefs[index]) {
+            // Use a small timeout to ensure the DOM has updated
+            setTimeout(() => {
+                var _a;
+                (_a = this.tabRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }
+    onKeyDown(ev, idx) {
+        let newIndex = idx;
+        switch (ev.key) {
+            case 'ArrowRight':
+                newIndex = (idx + 1) % this.parsedTabs.length;
+                ev.preventDefault();
+                break;
+            case 'ArrowLeft':
+                newIndex = (idx - 1 + this.parsedTabs.length) % this.parsedTabs.length;
+                ev.preventDefault();
+                break;
+            case 'Home':
+                newIndex = 0;
+                ev.preventDefault();
+                break;
+            case 'End':
+                newIndex = this.parsedTabs.length - 1;
+                ev.preventDefault();
+                break;
+            default:
+                return; // Don't handle other keys
+        }
+        if (newIndex !== idx) {
+            this.handleTabClick(newIndex, this.parsedTabs[newIndex].label, true);
+        }
     }
     render() {
-        return (h("div", { key: 'ef6902f4dafc40f290f8b63627f4534d665aa01d', id: `${this.identifier}` }, h("div", { key: 'a120ea68061894c2d9e2e3f0b8e61f53732c8753', 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: 'fb2bb608addcc777a55be828367e92268c676e16', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
-            const TabComponent = tab.active ? 'span' : 'a';
+        return (h("div", { key: 'e3bd802f08f460d5f3e89860669fefe2a8006e59', id: `${this.identifier}` }, h("div", { key: 'bcbd4afb8febec0520075c8e34269f184e2d9738', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft 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("nav", { key: '32e93b3ee6831918fd863fb23f1a5af1ae979201', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+            const TabComponent = 'button';
             const tabProps = this.getTabOptions(tab.active, index);
-            return (h(TabComponent, Object.assign({}, tabProps, { "aria-label": tab.label, "aria-current": index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) }), tab.label || tab.ariaLabel));
-        }))), h("div", { key: '82d6a43a9c326b6be73c81205201b18f148641ad', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { hidden: index !== this.activeIndex }, h("slot", { name: `panel-${index}` })))))));
+            const isActive = index === this.activeIndex;
+            return (h(TabComponent, Object.assign({}, tabProps, { type: "button", role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabIndex: isActive ? 0 : -1, "aria-label": tab.ariaLabel || tab.label, "aria-controls": `panel-${index}`, id: `tab-${index}`, ref: (el) => this.setTabRef(el, index), onClick: () => this.handleTabClick(index, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index) }), tab.label || tab.ariaLabel));
+        }))), h("div", { key: 'ffe610574d342933121cbaca9bcb8fb483fde60b', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1, class: "effect-focus" }, h("slot", { name: `panel-${index}` })))))));
     }
     static get is() { return "eds-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-toast-manager/eds-toast-manager.js

@@ -31,7 +31,7 @@ export class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '5724dea66c7025b67571699860af8ff1c318ef48', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: '85027aad9484f391686c4126e984a84e8045511c', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     static get is() { return "eds-toast-manager"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@ export class EdsUser {
     }
     render() {
         const user = this.parsedUser;
-        return (h("div", { key: 'e1413d070d6f5ce0a5f7a45e8eed7a27941bda10', class: "block" }, h("div", { key: 'f59cf79c2f09069d9e5bbae2bc126a0e3ef23564', class: "flex items-center" }, h("eds-dropdown", { key: '7316554277baffb16b6a2cc0ab0b4606a46ccfc8', label: `Hi, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: 'df80f62cd5c6e0876fcc20c54dbd25d6db031ce0', class: "min-w-[280px] p-8" }, h("div", { key: '34f0bd24c4c8ec55d5e99f77d0378bc14fb6943f', class: "flex gap-x-16" }, h("eds-avatar", { key: '73e45e3d20d02711af982a7a801cb7d6e18e201e', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: '1070df12372893476cc5ed2909ac735d0655cdb7', class: "max-w-full" }, user.name && h("p", { key: '4d6ca560545810da42d6acd5780c354565dc0d2d', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: 'f7e618449d15fc899484afda94e7837408f0b251', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'e6ca46f9863cea6d6bfa7021ead181509a5806f0', class: "f-ui-03-light text-light mt-4" }, user.email))), h("eds-block-break", { key: '76c0ba26ef63e046b7a01e12332b812ad5873776' }), h("div", { key: '448e592221de4406477bb0eb6bc84975699008f3', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '47e2d49bef131c827f49d3eaf68f6a09ba948707' })))))));
+        return (h("div", { key: '8a1f10cc85d8e2707042c85bc597b76fb2d25da4', class: "block" }, h("div", { key: 'a744de3d113920b8ff0d01ce273672b2bff57c97', class: "flex items-center" }, h("eds-dropdown", { key: 'e9230372d79936a785050ebb3e41f40e73282a57', label: `Hi, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: '7d4bd0ee0985c840a18764cac784726ff1c987fb', class: "min-w-[280px] p-8" }, h("div", { key: '603d6807988dd79cd4e7827918ff8932d8463fc3', class: "flex gap-x-16" }, h("eds-avatar", { key: '65ba89139cb6e3b6cb90c2072eb68cc7dc1da49c', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: 'df35b758918ebccbdfe6630bd356e647522404e1', class: "max-w-full" }, user.name && h("p", { key: '7174f34445bb1a0b77a3c1b893421bd104832485', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '72d853f5014c03803dce7aa0a74d96847ed8c875', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'e406e2f3ca8504220ee9586a1d176c15c7236502', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '8fd3b42ab4eb3d1d70a0b827e3a03af8503c55d1', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '6a477155c256543b7793947d52feb3f5abb0df6e' })))))));
     }
     static get is() { return "eds-user"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/examples/eds-app-root/eds-app-root.js

@@ -27,7 +27,7 @@ export class EdsAppRoot {
         this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
     }
     render() {
-        return (h("div", { key: '74be23fab63211137102b821a8928431d33714a3' }, h("eds-splash-screen", { key: 'da5b931f1e3999fc36afa3d7dc66ef940a553d22', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: 'eef7175edf257aabe1dd832f75e30d702ad5e96a', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: 'bcd9363278ab653852aa0f39b57070a056b8b9ab' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
+        return (h("div", { key: '36bb7790b9e035749548410ba1d54092c7a40810' }, h("eds-splash-screen", { key: '7be473b1c48f0ab2549077d7619a1dbd3a1fd90c', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '824affc8c670317f2c1b8a22b9fe6223a477d364', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: 'c5f6f9dae8608a49d3c47139f33735236a65091c' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
     }
     static get is() { return "eds-app-root"; }
     static get encapsulation() { return "shadow"; }