@ebrains/components 2.0.0 → 2.2.0

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: '2ff3cdb12cbd61fc4053418d1a678409c05755f2', class: "container" }, h("ul", { key: 'abfc33d14841a457959f5b15e8542465e8a0f883', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd81281a2d146a19d036678cb794f5224236ce521', 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: '9d3774468a2b09098b84a8354683b2c6940491f5', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: 'cb4d4a3ff951b25fba627bd98cc1319dcb803158', 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: 'fa2f563d8ad8100b6d12c626f41b4552d99c743e', class: "text-center mt-16" }, h("p", { key: 'bda0bb099f9e82b9462bee494f7d417bdd9984b9', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '92b100f67e3a7dd84d817b5dbc8cdfe76d6b2408', 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: '4d6ad4aacf24c4386493fe74ed928321627602ac', 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: 'd8357d0a4234d0c411881928a6daabdda928f272', class: "container" }, h("ul", { key: '30e3d8efd0f5fd173f48c6e1e02005e7da813ce9', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '751d2de97fe8774614b15de1feda7f59c8da2ef0', 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: 'd0ba9b152a505a591cabf5a54b720b6e718173e0', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '81b91d5c53a7ac440364083dd06222f32bf5dc51', class: "coloured" }, h("eds-logo", { key: '921cac572b2da3871eff8c2912de79babb909c91', type: "no-bg", href: "#" }))), h("li", { key: '74cebe6855e0e23d95a3ec74927b569c29b34d07', 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: 'ed5484e8ff8f85251f85a61fb53d21639dbb914b', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '7a5f1894fe514a323e8955c01d1ab071187c2a5c', class: "bg-default" }, h("eds-logo", { key: '9a072cdaf4f7f901b8cb91d3fe9bc85ddb0e8eba', type: "black", href: "#" }))), h("li", { key: 'ea3f60807f78264c6305061dc292d1d17f7fd173', 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: '530e8f71e5d6f56a9f8981ad454ecbd00162030e', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'b74d2cfb21a8d6f8288444cfed8ba9dc80d929b7' }, h("eds-logo", { key: 'f31c76f4f3e3f03f02d2712a272ba893f7832a7a', 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: '983decc613dcf98cc903eb0220e4604e6eaff4d0', class: "container" }, h("ul", { key: '4c76eb52168bc862e3d9ba4afcfce2feadb92ab8', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '4e51746424e45dcae4bd01fe5ff30a9634333e2f', 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: '18227e8430d94259740bcbcfe100540831d2a857', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '374be81aba7532670ff470026317a49d78f54762', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: 'fdfe6b1cc100dff3a53c9065bc16803043df97e5', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: '5aaf638a69109964188bbcad753f420177859107', 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: 'aadc470260f28236f3f4628ebf5c7261915f1fb2', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '3fed72cb0a3f38c6619d78a6995746a3cee5ee0e', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'bcf169b31b33615c82b768f20a0b648236644c65', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: '62f0c6803ca0ec6090db435388da6754054c2007', 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: '32813722dca892164d108df2ef0a3048cb4ebbbd', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'e33669ea223f6d923d71e2a8568140ae5ef739e3', class: "mx-auto w-[300px]" }, h("eds-logo", { key: '4176811098a57727ed30bfc1db82fa16aa06bd6c', 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: 'a7e8981363410d2a325478150990092516e74f2e', 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: 'fa573cdaaa0d55c820b5a355bff48d5f1d10544a', class: "container" }, h("ul", { key: '5c1941d3c45fa4814ffbdfaf30af106542862802', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'fd02c67fbe23ebb78289e5281c5b4917a44c950e', 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: '246527a7926c377c287a3c8073b06952b54dc694', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '88ebc748214a558e6cee28b8624f287de2faf80c', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: 'dbf4655e3bbbad7566f64f5b8eb474c749967c38', 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: '5d2c9c916bc81ce831daf99c6293024aa9b0b2f0', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: 'f9a37e0a587b60bf607efd2e1f3aa4114f67ef33', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '3e1126e6636e0064ce852cc4249a684b77d7ba0a', 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: 'a1eb4d8ea7764734f24b39cb95b36d6718f331a3', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: 'e3d0156ec563c657c03beaa61a7ae068e78df09c', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '062a45841b978d79fe82e5773ba82c98e8f9eb6c', 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: 'd0f276a91bf1ea13b4f482e39e9f83b7ef3f2593', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: '62f67b5f28839a5bb3706e78004c1989feced677', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: 'c4d0025e06c8385935a4b6162d65f78bc3d7b94d', 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: 'c6118e7d56abcf4a54f6f590d9a77a9397fa3209', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: 'a6c71000e3cf8b6d3a28c8f8c0df0840fdf2a749', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: 'd558e277275a305f3d491eba94aad8c1e7eec471', 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: '56947add9521b76a88ea05f8f64b6f0f656a9863', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: '0de198ca711a32e9b0f6ff7275af9dc2bce3c1b6', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '12b7c15e994ae6b40041da68eaa609ee0ec499a7', 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: '9ef38af84bee3b83b04f881e6481769fc39991ff', class: "mx-auto" }, h("div", { key: '7f793491cf76a2c937ab0ca820dfd3f2a5779728', class: "bg-accent p-16" }, h("div", { key: '60bfff8e962a543dcda5db9d1bdf75a3702f8b38', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '8a0a6a43def963fd5bd00e857ab7e21d60e54454', 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: '36ab796174ab215a5e8f834f0d6291853305e732', class: "full-width" }, h("eds-table", { key: '31fca470f340fa54137887ef426f4f7e1fc72f73', "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: '030dd5db2221d5613fae0fb215cac7c20c815c2b' }, h("eds-link", { key: '61d1bdf5e4299e65d980a08d25bec93b089f5330', 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: '58d69e0acbaca740439666bb9da015eaa81d160a', class: "grid inline" }, h(HeadingTag, { key: 'f7b066a56636e6555ace1b4947e00c293961b4ca', class: headingClass }, this.label), h("p", { key: '9bfb1903e25ba6c1d53849874f3309845c1b86dc', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '785ea01ac3d2f40bb148d52c9c18698c89424175', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '16d5b1ab0ab56a5e320a878f8259dc643b533e16', 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');
@@ -50,13 +56,11 @@ export class EdsFooter {
      * Renders the footer component with optional sections and elements,
      * including social network links, a Horizon Europe funding acknowledgment, and
      * legal links such as "Cookies Preferences" and copyright information.
-     *
-     * @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: '844c47f7e5119a577b03d1bf4bb598e891d7f8c7' }, 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: '0a6f03f13cf5513758740ce6f3d3357cac413826', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '1751d052c529e46de47bbe09ef24621b546b1514', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '86b3c5fac384d1ae0f310d43f9a4492ce96866cf', class: "flex items-center gap-x-12" }, h("a", { key: '7fed16c8a7bb7c15ea59438427987303a5a0ae14', 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: '491b2691d011359df1dc24a2408347574a893ca8', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: '50e5d853ee86066c932dd5fa3f04706d21b0d3aa' }, h("div", { key: 'ba36e26f29e1aee7d7da4cd91235419b18ab813a', class: "f-ui-04 text-light" }, h("p", { key: '120302d9cdad309da91bcd9f82e81f707f5f5b48' }, this.fundedBy), h("div", { key: '222a27fb7f085750312654c11d03793f02e29676', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '56db11dc4295c21c5e9d54cbc5568c5889f2dbb9', 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: '221f15b6c92e91835dcc2efa3d2247b055690a22', 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"; }
@@ -188,8 +192,11 @@ export class EdsFooter {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Controls the display of the \"Cookies preferences\" link."
                 },
                 "attribute": "enable-cookies-settings",
                 "reflect": false,

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

@@ -25,6 +25,14 @@
   letter-spacing: var(--f-body-01-letterSpacing);
 }
 
+.f-body-02 {
+  font-family: var(--f-body-02-fontFamily);
+  font-weight: var(--f-body-02-fontWeight);
+  font-size: var(--f-body-02-fontSize);
+  line-height: var(--f-body-02-lineHeight);
+  letter-spacing: var(--f-body-02-letterSpacing);
+}
+
 .f-body-01 b, .f-body-01 strong {
   font-weight: var(--f-body-01---bold-weight, bold);
 }
@@ -41,6 +49,18 @@
   letter-spacing: var(--f-heading-04-letterSpacing);
 }
 
+.f-heading-05 {
+  font-family: var(--f-heading-05-fontFamily);
+  font-weight: var(--f-heading-05-fontWeight);
+  font-size: var(--f-heading-05-fontSize);
+  line-height: var(--f-heading-05-lineHeight);
+  letter-spacing: var(--f-heading-05-letterSpacing);
+}
+
+.text-light {
+  color: var(--grey-700);
+}
+
 .rounded-sm {
   border-radius: 8px;
 }
@@ -96,4 +116,56 @@
 .border-group {
   border-left: 1px solid var(--soft-color, #ddd);
   padding-left: 1rem;
+}
+
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.effect-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.shadow-hover {
+  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
+  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.effect-focus-within {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
+}
+
+.effect-focus-within:focus-within {
+  outline-style: solid;
+}
+
+.relative {
+  position: relative;
+}
+
+.rounded-lg {
+  border-radius: 16px;
+}
+
+.px-16 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.pb-16 {
+  padding-bottom: 1rem;
+}
+
+.p-32 {
+  padding: 2rem;
 }

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

@@ -19,13 +19,17 @@ import { getFormInitData } from "../../utils/eds-form/formUtils";
 export class EdsForm {
     constructor() {
         this.name = 'eds-form';
+        this.title = undefined;
+        this.description = undefined;
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
+        this.buttonIntent = 'primary';
         this.errorMessage = 'Some fields in your form are incorrect.';
         this.fields = [];
         this.groups = [];
         this.initData = {};
+        this.formStyle = 'default';
         this.values = {};
         this.isSubmitting = false;
         this.hasError = false;
@@ -249,6 +253,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) {
@@ -304,10 +327,15 @@ export class EdsForm {
     }
     get groupedFields() {
         const map = {};
-        // initialize buckets for each group
+        // initialize buckets for each declared group
         this.parsedGroups.forEach((g) => (map[g.id] = []));
+        // always keep an ungrouped bucket
         map['__ungrouped'] = [];
+        // only bucket fields that are currently visible
         this.parsedFields.forEach((f) => {
+            if (!this.isFieldVisible(f)) {
+                return;
+            }
             const gid = f.groupId || '__ungrouped';
             if (!map[gid]) {
                 map[gid] = [];
@@ -317,7 +345,7 @@ export class EdsForm {
         return map;
     }
     renderField(field) {
-        var _a, _b;
+        var _a, _b, _c;
         if (!this.isFieldVisible(field)) {
             return null;
         }
@@ -327,7 +355,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, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
+        }
+        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 +367,13 @@ 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
+        // build the shadow/bg classes if formStyle="shadow"
+        const styleClasses = this.formStyle === 'shadow'
+            ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
+            : '';
+        return (h("form", { key: 'ecf49eb81f18b444d059d3bdea4600f4ae594ea9', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '65137fb770f274431c7906326cdf49e0fee73b18', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: 'e4c5b4a7883c4569a657cc234f18f995480ec8df', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '65528e4600127f1cff4ce0e5be6f8a6bddc4c864', class: "f-body-02 text-light" }, this.description), h("slot", { key: '6230035a050386763723c2b60bd5e81b912762d7' })), 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-32", 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: '8116d30248f8461a842365470da9915200531028', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: 'e2f1d3ca6a9f6a3b44c45e576150505c49e41dd1', class: "mt-32" }, h("eds-button", { key: 'e312bf08b5db526c00497fafaa9476a225919aaf', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }
@@ -372,6 +407,40 @@ export class EdsForm {
                 "reflect": false,
                 "defaultValue": "'eds-form'"
             },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The title displayed above the form."
+                },
+                "attribute": "title",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The description displayed below the title."
+                },
+                "attribute": "description",
+                "reflect": false
+            },
             "setFormUrl": {
                 "type": "boolean",
                 "mutable": false,
@@ -426,6 +495,24 @@ export class EdsForm {
                 "reflect": false,
                 "defaultValue": "'Submit'"
             },
+            "buttonIntent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost'",
+                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant/style intent for the submit button (e.g., primary, secondary, tertiary, ghost)."
+                },
+                "attribute": "button-intent",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
             "errorMessage": {
                 "type": "string",
                 "mutable": false,
@@ -495,6 +582,24 @@ export class EdsForm {
                     "text": "The init data the form will attempt to populate in the provided fields."
                 },
                 "defaultValue": "{}"
+            },
+            "formStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'shadow'",
+                    "resolved": "\"default\" | \"shadow\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Choose between default layout or an always-shadow style.\nWhen \"shadow\", the form gets the same effect-shadow + shadow-hover classes"
+                },
+                "attribute": "form-style",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }

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

@@ -4,6 +4,8 @@ export default {
     component: 'eds-form',
     argTypes: {
         name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
+        title: { control: 'text', description: 'Form title displayed above the form' },
+        description: { control: 'text', description: 'Form description displayed below the title' },
         fields: {
             control: 'object',
             description: 'Form fields as JSON array'
@@ -21,23 +23,38 @@ export default {
             control: 'text',
             description: 'Form button Label',
             defaultValue: 'Validate'
+        },
+        buttonIntent: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'tertiary', 'ghost'],
+            description: 'Variant/style intent for the submit button'
+        },
+        formStyle: {
+            control: 'select',
+            options: ['default', 'shadow']
         }
     }
 };
 const Template = (args) => html `
   <eds-form
     name="${args.name}"
+    title="${args.title}"
+    description="${args.description}"
     .fields=${args.fields}
     .groups=${args.groups}
     .initData=${args.initData}
     .setFormUrl=${args.setFormUrl}
     form-btn="${args.formBtn}"
     form-btn-label="${args.formBtnLabel}"
+    button-intent="${args.buttonIntent}"
+    form-style="${args.formStyle}"
   ></eds-form>
 `;
 export const Default = Template.bind({});
 Default.args = {
     name: 'extended-form',
+    title: 'User Details',
+    description: 'Please fill out the form below.',
     fields: [
         { name: 'username', label: 'Username', type: 'text', required: true, maxlength: 10, placeholder: 'Username' },
         { name: 'email', label: 'Email', type: 'email', required: true },
@@ -80,7 +97,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",
@@ -91,12 +108,17 @@ Default.args = {
             disabled: true
         }
     ],
+    setFormUrl: true,
     formBtn: true,
-    formBtnLabel: 'Validate'
+    formBtnLabel: 'Validate',
+    buttonIntent: 'primary',
+    formStyle: 'default'
 };
 export const WithGroups = Template.bind({});
 WithGroups.args = {
     name: 'grouped-form',
+    title: 'Grouped Form',
+    description: 'Form with grouped fields',
     fields: [
         { name: 'firstName', label: 'First Name', type: 'text', required: true, groupId: 'personal' },
         { name: 'lastName', label: 'Last Name', type: 'text', required: true, groupId: 'personal' },
@@ -106,12 +128,17 @@ WithGroups.args = {
         { id: 'personal', title: 'Personal Info' },
         { id: 'comments', title: 'Comments' }
     ],
+    setFormUrl: true,
     formBtn: true,
-    formBtnLabel: 'Submit'
+    formBtnLabel: 'Submit',
+    buttonIntent: 'secondary',
+    formStyle: 'default'
 };
 export const WithInitData = Template.bind({});
 WithInitData.args = {
     name: 'prefill-form',
+    title: 'Prefilled Form',
+    description: 'Form with initial values',
     fields: [
         { name: 'username', label: 'Username', type: 'text', required: true },
         { name: 'email', label: 'Email', type: 'email', required: true }
@@ -123,5 +150,7 @@ WithInitData.args = {
     },
     setFormUrl: false,
     formBtn: true,
-    formBtnLabel: 'Save'
+    formBtnLabel: 'Save',
+    buttonIntent: 'ghost',
+    formStyle: 'default'
 };

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: '665bc189cd905a55a9c6ac31eb2ec82853552f34', class: this.articleClasses() }, h("div", { key: '6ad6183a94cd0cb26d3e5641c5e584e8afc652d7', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '85bd9a7a4475ca3664cadf17ef1e729643c758f6', 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: '4799d59442cabb05f3bfea26a02db22a429266e6', 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"; }