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

package/dist/cjs/logo-variations-horizontal_2.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f08e4f5c.js');
+
+const logoVariationsHorizontalCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.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)}.w-\\[150px\\]{width:150px}.w-\\[500px\\]{width:500px}@media (min-width: 750px){.md\\:w-\\[300px\\]{width:300px}.md\\:w-\\[500px\\]{width:500px}}@media (min-width: 900px){.lg\\:w-\\[300px\\]{width:300px}.lg\\:w-\\[500px\\]{width:500px}}.coloured{background:linear-gradient(to left, \n  #9CE142 0%, \n  #00C959 50%, \n  #00A595 100%)}";
+const LogoVariationsHorizontalStyle0 = logoVariationsHorizontalCss;
+
+const LogoVariationsHorizontal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { key: '577cade970766dbbbd654258efe78920d8c0dbaf' }, index.h("div", { key: '1c577dafe342384bffce716b4bcb9494685f2283', class: "container my-16" }, index.h("h3", { key: 'b9f78264dbbe144cc9c7823c48874b3618af3919', class: "f-heading03" }, "Coloured Background"), index.h("div", { key: 'c07b24eb1a3338d33a3b95c0228a1a7f297a0976', class: "coloured lg:w-[500px] md:w-[300px]" }, index.h("eds-logo", { key: 'ed173d7c59ae22ad55814cf64222a5ce52d108d4', type: "no-bg", href: "#" }))), index.h("div", { key: '7d939b469a8ce14f609e529121a830d9a47af857', class: "container my-16" }, index.h("h3", { key: 'f110490f66e3d27f204e289a5eb85461c13594fa', class: "f-heading03" }, "Black and White Background"), index.h("div", { key: 'd05bd8166d2a60aac723436b96e2451ae4459c04', class: "bg-default lg:w-[500px] md:w-[300px]" }, index.h("eds-logo", { key: 'ce24bb6db3038d781a4d1917012c0d4ed7f23b1a', type: "black", href: "#" }))), index.h("div", { key: '32fbbb1568604bdfd04c6ca6c14a558a3c490ed8', class: "container my-16" }, index.h("h3", { key: 'ef03e68319669f548c7826d6387072af8d3f5a66', class: "f-heading03" }, "Dark Background "), index.h("div", { key: 'a6b082f14400be771f43074c1f7f0bc348e77673', class: "lg:w-[500px] md:w-[300px]" }, index.h("eds-logo", { key: '569f77f1b43b4a65a39720017b34273d6f3d7baa', type: "color-white", href: "#" })))));
+    }
+};
+LogoVariationsHorizontal.style = LogoVariationsHorizontalStyle0;
+
+const logoVariationsVerticalCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.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)}.w-\\[150px\\]{width:150px}.w-\\[200px\\]{width:200px}.w-\\[300px\\]{width:500px}.coloured{background:linear-gradient(to left, \n  #9CE142 0%, \n  #00C959 50%, \n  #00A595 100%)}";
+const LogoVariationsVerticalStyle0 = logoVariationsVerticalCss;
+
+const LogoVariationsVertical = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.orientation = 'vertical';
+        this.type = undefined;
+    }
+    render() {
+        return (index.h("div", { key: '70bc4a46031bb4456ba28bef27efbbfe5e7cf6f2' }, index.h("div", { key: '84ab774067350c75982d41b6d97500e19d3fe5e5', class: "container my-16" }, index.h("h3", { key: 'c080f9b4cfa18a3a48fb703f749c62531a322267', class: "f-heading03" }, "Coloured Background"), index.h("div", { key: 'a9a871769d76e97c879f49437187ca553a633dd2', class: "coloured w-[200px]" }, index.h("eds-logo", { key: '668f2607e0394ab1b25ddfbef4cd3e3880e1b4f9', orientation: "vertical", type: "no-bg", href: "#" }))), index.h("div", { key: 'd1674061f47b242930599337d605b51831214d7a', class: "container my-16" }, index.h("h3", { key: '8b1470587ad99fdf379c0c4b4646098d14f087e8', class: "f-heading03" }, "Black and White Background"), index.h("div", { key: 'bbb9997369a93ce84450a7d289948049fcfa5bf6', class: "bg-default w-[200px]" }, index.h("eds-logo", { key: '4f3dc6ad9f9db6f605d54df3c8adecea051cf34e', orientation: "vertical", type: "black", href: "#" }))), index.h("div", { key: '0f54fde04fbef65477809b45371ac15914b1433b', class: "container my-16" }, index.h("h3", { key: '5c46f1d7b09bf3e113e2733531611943ad21be4e', class: "f-heading03" }, "Dark Background "), index.h("div", { key: '88609875109aae85cb5333426a3bc270314d9fb5', class: "w-[200px]" }, index.h("eds-logo", { key: '0eeeba0006e25a8a4f0c4fb5c0d38b089e0a22f4', orientation: "vertical", type: "color-white", href: "#" })))));
+    }
+};
+LogoVariationsVertical.style = LogoVariationsVerticalStyle0;
+
+exports.logo_variations_horizontal = LogoVariationsHorizontal;
+exports.logo_variations_vertical = LogoVariationsVertical;

package/dist/cjs/logo-wrong-usage.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-f08e4f5c.js');
 const logoColor = require('./logo-color-6c787ac1.js');
 
-const logoWrongUsageCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.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)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.container{display:flex;flex-wrap:wrap;gap:16px}.example{width:200px;text-align:center;font-size:14px}.logo{width:100%;height:auto}.bg-dark{background-color:#333}.bg-light{background-color:#f3f3f3}.bg-white{background-color:white}.non-brand-color{fill:purple;}.distorted{transform:scaleX(1.5)}.effects{filter:drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5))}.rotated{transform:rotate(15deg)}.no-other-bg-color{background-color:var(--purple-200)}.no-other-color{color:var(--red-700)}.outlined{stroke:red;stroke-width:2px;fill:none;}.custom-font{font-family:'Comic Sans MS', cursive;font-size:20px;color:#333;}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.gap-y-8{row-gap:0.5rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:flex{display:flex}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}@media (min-width: 750px){.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}}.flex-col{flex-direction:column}";
+const logoWrongUsageCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-accent{background-color:var(--green-500)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.p-8{padding:0.5rem}.p-16{padding:1rem}.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)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.container{display:flex;flex-wrap:wrap;gap:16px}.example{width:200px;text-align:center;font-size:14px}.logo{width:100%;height:auto}.bg-dark{background-color:#333}.bg-light{background-color:#f3f3f3}.bg-white{background-color:white}.non-brand-color{fill:purple;}.distorted{transform:scaleX(1.5)}.effects{filter:drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5))}.rotated{transform:rotate(15deg)}.no-other-bg-color{background-color:var(--purple-200)}.no-other-color{color:var(--red-700)}.outlined{stroke:red;stroke-width:2px;fill:none;}.custom-font{font-family:'Comic Sans MS', cursive;font-size:20px;color:#333;}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.gap-y-8{row-gap:0.5rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:flex{display:flex}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}@media (min-width: 750px){.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}}.flex-col{flex-direction:column}";
 const LogoWrongUsageStyle0 = logoWrongUsageCss;
 
 const LogoWrongUsage = class {
@@ -13,7 +13,7 @@ const LogoWrongUsage = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("ul", { key: '9aa8a3f496e779f561e54a6ee656528b2e55a500', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("span", { key: '735e61f1189decb4fef74b5f9f481f94f51c304e', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '8d8859bef157051ca9493bac1fd35e0db80414c0', class: "example" }, index.h("div", { key: '6ee9ce679339e1189439239889a60d8cba39c4b1', class: "bg-dark " }, index.h("div", { key: '492054f20250a9572ac3c641d05bbb955c050be4', class: "no-other-bg-color logo", innerHTML: logoColor.hLogoColor })), index.h("p", { key: 'c9f49c3c44fb7446e6e4e02c1f79ac15827633ba', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), index.h("span", { key: 'd5cbda2472d3396f08fdb600676852708991ce0f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: 'dacbf3bcf4dd4914b4332a663a81732a196457f4', class: "example" }, index.h("div", { key: '9f9bb9b86a840658cf7311a2b035dbadd6a3e0af', class: "no-other-color p-16" }, index.h("div", { key: '9e96d60f66801638898c12b190640ae0dcc18d24', class: "logo non-brand-color", innerHTML: logoColor.hLogoColor })), index.h("p", { key: '5e0470cb9f81e4bba14104746715704fed2fddeb', class: "f-ui-02" }, "Do not apply other colors"))), index.h("span", { key: '5e9e1943ab5d4cda7d6b4cb51b76f9da4370a50b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '9821754465969edcf1ea98aa7a353ff04140612f', class: "example" }, index.h("div", { key: '513bb5879746d5979cf7f5360ea60c97196e5379', class: "bg-light p-16" }, index.h("div", { key: '25f615bf82c51f8601960cb705fa5983667a4943', class: "logo distorted", innerHTML: logoColor.hLogoColor })), index.h("p", { key: '636efd5a54620ca8248b5e1adbf453a7d5292d0f', class: "f-ui-02" }, "Do not deform the logo"))), index.h("span", { key: 'a006b91c704b1df8f7adf1cad1d0033bd11378d8', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '6a494fdace1e6a2ff48e02a6a8a79f31ca101e02', class: "example" }, index.h("div", { key: '09ea335ac52cb395cc3173263b4a956aba59cc4e', class: "bg-white p-16" }, index.h("div", { key: '9acf37c882acb0a04fddc5754b8e91e6789f36ee', class: "logo effects", innerHTML: logoColor.hLogoColor })), index.h("p", { key: 'f648aefe81578e9768c24de085e53e2484c1bb7b', class: "f-ui-02" }, "Do not apply effects"))), index.h("span", { key: '70f90abc0d6a3292101e29bdfc311ebb0192a585', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '9eb3aa4276d7b0a9f7c5e76ffa9fefe7f3def0a3', class: "example" }, index.h("div", { key: '5a38e80d567d2c2faf08fbcb66a62c24973c3fea', class: "bg-white p-16" }, index.h("div", { key: '7edbadc8850a9babefea43be9c5f9697021712d5', class: "logo rotated", innerHTML: logoColor.hLogoColor })), index.h("p", { key: '96d30acd52838a03f33fd6c8dcf89a72417ce925', class: "f-ui-02" }, "Do not rotate the logo"))), index.h("span", { key: '41d476bd66b39e796f03c669945024720771216f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '3fd7f690559195125d633097b578b1cc2ff4ccc1', class: "example" }, index.h("div", { key: '684387318cfffdfbc5592486095a28a923e5af07', class: "bg-light p-16" }, index.h("div", { key: '7593acd61c1ea52ce613a1f3395c8769a09f9aed', class: "logo outlined", innerHTML: logoColor.hLogoColor })), index.h("p", { key: '51d6d974c005a0b5059cd002dff682dc50cfb19a', class: "f-ui-02" }, "Do not apply outlines"))), index.h("span", { key: '605db4b33b7aab4d0e81e30f658f639689a433b6', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), index.h("span", { key: '1dc1e6be701572fb7d31b435f8b25dbaf0bf30c8', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '30b239799a7d8acf93eba73d3d5dba3cc7117fb5', class: "example" }, index.h("div", { key: '16a146193f1ec233f37a9472dfe5fa92de10864d', class: "bg-accent p-16" }, index.h("div", { key: 'cc5924ad51847399ec52c2ece993bdd22305892f', class: "text-inverse", innerHTML: logoColor.hLogoColor })), index.h("p", { key: 'bdcd59e968000ecd459b65aaa42e75fa9e06f8ef', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
+        return (index.h("ul", { key: 'e2fbd7802c153f970a457011a5dcaf3163d6290f', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("span", { key: '07d6a5b930dd8ae652e63310c4232e8c3e6858b2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '5d3dd01a67f41f839e79aa3d449ba319dcc0209c', class: "example" }, index.h("div", { key: '6b51ea71b6b4072ec6c66223a4f92c1232e8691a', class: "bg-dark " }, index.h("div", { key: '03a476635bc1112f1ea2d4ed10df0415ead7f0f8', class: "no-other-bg-color logo", innerHTML: logoColor.hLogoColor })), index.h("p", { key: '084116335e9f8ed4c9d2a04a9551097dc2a53c4a', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), index.h("span", { key: 'e67f1bdeee28928f4f6f8fb5d1e0b59160edd949', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: 'b0e909eb57a6771b32a93dd0932ef5b848a19ff2', class: "example" }, index.h("div", { key: '19bc9f29ddbffd1c308cb429100f0af3d58237a1', class: "no-other-color p-16" }, index.h("div", { key: '301c5cb926b9ad167f1ba096f99a874577617fb1', class: "logo non-brand-color", innerHTML: logoColor.hLogoColor })), index.h("p", { key: 'b41ab53c2af9efeafb46d41a515eba2f801d49e4', class: "f-ui-02" }, "Do not apply other colors"))), index.h("span", { key: '826ae54f62c5a3880adf1833dbc19bbb9e1ec6f2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '092d5fc3176845532ecf577c66d6e3a349ebfe45', class: "example" }, index.h("div", { key: '1d1d3cc86e728fc21f898c59ff1511c5fa728f9f', class: "bg-light p-16" }, index.h("div", { key: 'df05102398d3de9916a23d0998529d8ca8a66257', class: "logo distorted", innerHTML: logoColor.hLogoColor })), index.h("p", { key: '377e38a762855d563d087eb275481de6a17ddbbb', class: "f-ui-02" }, "Do not deform the logo"))), index.h("span", { key: '766c4ea568c8bf2fa1efa207ff5f602e5128aef3', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: 'cf4e883370c0ee284167bea7f2c0c603932d1682', class: "example" }, index.h("div", { key: 'de160646456f91316bf966db6568c20ff382dd3b', class: "bg-white p-16" }, index.h("div", { key: '5aa03093e5e483547919eaeca58643e54a286405', class: "logo effects", innerHTML: logoColor.hLogoColor })), index.h("p", { key: 'aa65e295008001d6fe2b2168d8f7f43a770ec8e3', class: "f-ui-02" }, "Do not apply effects"))), index.h("span", { key: 'd0eb2536e430b6e9fdb9a37d638d5c31ee81e205', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '43ec87b4632c2709404aff9d3e7bbcb2910426ca', class: "example" }, index.h("div", { key: '36cd6dc2b23070e5c7fdfc09444d3ccbb8681216', class: "bg-white p-16" }, index.h("div", { key: 'a1077b322d113220e05ee3edce627c60547cb49a', class: "logo rotated", innerHTML: logoColor.hLogoColor })), index.h("p", { key: '86c384f5cf362d16bd6ac5ac8448e3e0d591fa18', class: "f-ui-02" }, "Do not rotate the logo"))), index.h("span", { key: 'b267f6024a4e7bad6348d323606922888db5264b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '0bd0c5d62e454ce133a187e7d3917afc0c26c551', class: "example" }, index.h("div", { key: '71e4c1681cfbb64970237b410e0925a0f22e1141', class: "bg-light p-16" }, index.h("div", { key: '01ab5d75102b9f476fecebcc31c975f6d4720c12', class: "logo outlined", innerHTML: logoColor.hLogoColor })), index.h("p", { key: '0734a049d710d1f6406989668f60da1249e29c7b', class: "f-ui-02" }, "Do not apply outlines"))), index.h("span", { key: '830b7b2a8cdf6dfc7f395dc92db42fbe626a7ae4', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), index.h("span", { key: 'ca40bb4ea839eacf62e93f7fbec41f076f7b12a6', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, index.h("div", { key: '641a963ba81294eefe8fc00dd0a3bdca91af94a2', class: "example" }, index.h("div", { key: '70691be08e9081899fb2928d5d287aaebef3b399', class: "bg-accent p-16" }, index.h("div", { key: '556135fd6596b530bf959bb9984641f185cd9f96', class: "text-inverse", innerHTML: logoColor.hLogoColor })), index.h("p", { key: '7eaded302e41fc1d04f2033add829dfaba6e8012', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
     }
 };
 LogoWrongUsage.style = LogoWrongUsageStyle0;

package/dist/cjs/token-list_3.cjs.entry.js

@@ -244,7 +244,7 @@ const TokenList = class {
     render() {
         // Check if `show` prop is provided; if not, display all sections
         const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
-        return (index.h("section", { key: '12f2874bbc9a74aea2a37e3c9314e85b5cf96d8c', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (index.h("section", { key: 'ac8573b341ad313eba0f9f082dcc72cfc81208b3', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }
@@ -264,7 +264,7 @@ const TokenRadii = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: '8b66cda1370f366c46ed2772ee0a5a18878cdc13', class: "w-full mt-28" }, index.h("ul", { key: '652f4812de4a40c94646b25429b16683bfc8f54c', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, index.h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), index.h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (index.h("section", { key: '84dabcd5a39d49e116f8fc9e9b26e00455c7fbb3', class: "w-full mt-28" }, index.h("ul", { key: 'a821c747c45b8898ab2e7626d2ead91814549335', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, index.h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), index.h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
     }
 };
 
@@ -291,7 +291,7 @@ const TokenShadows = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: '6651a6dcd282a9f9df84249c73ab08a6e8d83597', class: "w-full mt-28" }, index.h("ul", { key: '12bda2b4a1306c9a8d1bc4f41da4edd5258e381f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, index.h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, index.h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), index.h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (index.h("section", { key: '4575feac8b5bff23aed39733e638fbb62916988f', class: "w-full mt-28" }, index.h("ul", { key: 'c9833aa0d698a7ec33911011ccb9227d43c8261a', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, index.h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, index.h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), index.h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
 };
 

package/dist/cjs/token-ratios.cjs.entry.js

@@ -18,7 +18,7 @@ const TokenRatios = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: 'd6df281aee2b33d5dd1087c9d06aff6656bf9145', class: "w-full" }, index.h("eds-section-core", { key: 'fdf31da89f0fa75f5a724ae9bdb26d59dd22fe9e', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, index.h("ul", { key: '01473ff27842d278c1269870463fb0c1a0658406', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (index.h("section", { key: '9c4dc70bd40a40fbeedc88280ea3fdd4b2597e40', class: "w-full" }, index.h("eds-section-core", { key: '039b72b762e48f62a4fa58d5af7803d0ed73bf6a', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, index.h("ul", { key: 'be3e37d842a24536488b7bc03f24399faa1304ff', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
                 aspectRatio: value.replace('/', ':'), // Cast to string to resolve TypeScript error
                 width: '100%', // Full width to show the aspect ratio correctly
                 maxWidth: '300px'

package/dist/cjs/token-spacing.cjs.entry.js

@@ -9,7 +9,7 @@ const TokenSpacing = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'ae388def4474fbd6e9766c2e04eb382ac9022bb8', class: "w-full" }, index.h("ul", { key: 'a2a51b9494dbd1bbb8b8d454117bc254e9602938', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '9e48e3551369f35ae6ec72d493ae888ebee3cceb', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '65b5b1192cdfef841bd4beed6eedf0068393ba8d', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '770870c171999d004aba77b6058fe32525b1703e', class: "spacing-sample m-32 bg-darker" }, index.h("span", { key: 'fdba92dbc2c78e55481277c2858de4ea220b2397', class: "text-white" }, "Margin: 2rem / m-32")))), index.h("li", { key: '9420b6110f30e9f3cff94d409362627d32782023', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '2e438e9ee4291d1326acb2630ccb55f981acfeaa', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'b199e19274f23490485347d2ef102741f583b612', class: "spacing-sample ml-64 bg-darker" }, index.h("span", { key: '2cde99dd7d0bb469b7f69b852f20abc4f61d6a01', class: "text-white" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: 'b8cdd7b7245cd3e7c8fe59297b76f2e9e20a1c2e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '0f9cf988220669a2ebe2e93d33d904ee045af74a', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '88f5a191b1f9878ae6012efd5ec7365cf2f28da4', class: "spacing-sample mt-32 bg-darker" }, index.h("span", { key: 'af8f876d8cdc7620af861620173ea32fc706378f', class: "text-white" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: 'e65780c7ecfc9685791c40970350ba511e888283', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'c1a8e22fde087ac9f5e69602e23c8b7f429c0e3e', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '19aaa0273c1c818f1f6d57a0fd41d9be14aa4d1b', class: "spacing-sample p-32 bg-darker" }, index.h("span", { key: '18cbdee711f04e90e663d93bd8b752ec0d0b33ee', class: "text-white" }, "Padding: 2rem / p-32")))), index.h("li", { key: 'f2831db3170703786946a12a5b0c0e188c4f944a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '68ac92294defd683a3c49e38ce0f4366a8b91208', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '6bfd849d0f841d6fefb39d91a4be49ae1db8d43f', class: "spacing-sample pt-32 bg-darker" }, index.h("span", { key: '7f3b5868baf86913d172b07347b15ca1e8901d21', class: "text-white" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: 'f3608f5562949c9fb82d987719753bc0b59ba999', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'fe9d90cf206906742000da310a53873ecefaa77c', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'd6590820496db0ba1009deea6a4b56c9195814e6', class: "spacing-sample pl-32 bg-darker" }, index.h("span", { key: 'c65179e127861a66ca1c0d6ff429b07bc0d88945', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
+        return (index.h("div", { key: '5f72b8386e92973faca8b22ebadcffa5b8ca8744', class: "w-full" }, index.h("ul", { key: '619cc2546059aaac566dc89f56b098f72f7c2bde', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: 'b90587543210e02a577854ce061472ef8f3bdc7a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'd98ea95c641209ba592aae8c695e278549840420', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '6dd84540a213d98fa09480eac823fe030dfb2404', class: "spacing-sample m-32 bg-darker" }, index.h("span", { key: 'ad0493ba8d97cdcc15535505db4d726d6f69bd38', class: "text-white" }, "Margin: 2rem / m-32")))), index.h("li", { key: 'a0914d288cdb4b9caef6956af0069cd0937ee019', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '95adc2b10d3962378de300e00b749b691fda88af', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '8bad94397c9fe8112b49933a508958000f9cd99d', class: "spacing-sample ml-64 bg-darker" }, index.h("span", { key: '04229385104243a5ce9a194c4f8056f7341a6736', class: "text-white" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: 'f34e1fd5ccafc528ed9359766deaa5c615a2e14b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '38e12800b2c8502ea2f9e912af929f71d3ec9699', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'f4e93d89576ab3de7f44ce3a85d9838f21bfa7f6', class: "spacing-sample mt-32 bg-darker" }, index.h("span", { key: 'e85e2e1c7c4c7e765dfafd25dc9f2c33b6bd5069', class: "text-white" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: 'b42299c17c024a5906bd09c80a2f309b461b6fde', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'f54a9e32893ac6f1b0384e79e2959d1e65a251e2', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '4209fa0c979a1d55d42d7b892bc94cc0f3788e88', class: "spacing-sample p-32 bg-darker" }, index.h("span", { key: '1d9249c56d3a42500dfb8cc1d3eae1f89e79cdcd', class: "text-white" }, "Padding: 2rem / p-32")))), index.h("li", { key: 'ad6f2e33e15c4c21bdfed8478b3d2faa905490fa', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '9950970e66b8a382e7b0158b54e980a5e5f45774', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '40e96cd046eaddf3a23387995affbfc399d171ae', class: "spacing-sample pt-32 bg-darker" }, index.h("span", { key: '2d120273f7a6d4429061d0ade2164ada9a14b506', class: "text-white" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: '8c3327edc63f8959c0cb01cce0a8407bf3a605af', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'c0be38039770c54577f073e1a707110cd0807ab5', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'd8085da375e734ed11fe580f1a9004f6fddef679', class: "spacing-sample pl-32 bg-darker" }, index.h("span", { key: '029857c00659221390438d8477734d0f130d1b97', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
     }
 };
 

package/dist/cjs/token-typography.cjs.entry.js

@@ -207,7 +207,7 @@ const TokenTypography = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: '2078622c91b8906b71ee3aebdadcda0ac2c49512', class: "w-full" }, index.h("ul", { key: 'fe9212731cddcd43e3d5f5518245911d9d4cd493', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (index.h("section", { key: '23815518d694435812ed3d7b9aab850043941b96', class: "w-full" }, index.h("ul", { key: '366ed5bc5933c5b8a563d33b70471f507a21386c', 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]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, index.h("div", { class: "mr-auto hidden lg:block", style: {
                 fontFamily: typography.families.sans,

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "components/eds-cards/eds-card-generic/eds-card-generic.js",
     "components/eds-accordion/eds-accordion.js",
     "components/eds-alert/eds-alert.js",
     "components/eds-avatar/eds-avatar.js",
@@ -10,7 +11,6 @@
     "components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.js",
     "components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js",
     "components/eds-cards/eds-card-composer/eds-card-wrapper/eds-card-wrapper.js",
-    "components/eds-cards/eds-card-generic/eds-card-generic.js",
     "components/eds-cards/eds-card-project/eds-card-project.js",
     "components/eds-cards/eds-card-tool/eds-card-tool.js",
     "components/eds-code-block/eds-code-block.js",
@@ -81,6 +81,7 @@
     "eds-docs-ui/eds-components-section/eds-components-section.js",
     "eds-docs-ui/eds-docs-palettes/eds-docs-palettes.js",
     "eds-docs-ui/eds-docs-tokens/eds-docs-tokens.js",
+    "eds-docs-ui/eds-logo-variations/eds-logo-variations.js",
     "eds-docs-ui/eds-svg-repository/eds-svg-repository.js",
     "eds-docs-ui/logo/logo-space/logo-space.js",
     "eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.js",

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

@@ -1,3 +1,4 @@
+import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
 import { h } from "@stencil/core";
 /**
  * `EdsAccordion` is a flexible, interactive component for expanding and collapsing content sections.
@@ -25,9 +26,17 @@ export class EdsAccordion {
          * Toggles the `isExpanded` state and emits the `accordionChange` event.
          */
         this.handleClick = () => {
+            var _a;
             this.isExpanded = !this.isExpanded;
             this.accordionChange.emit(this.isExpanded);
             this.setPanelHeight();
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: this.el.tagName.toLowerCase(),
+                name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+                action: this.isExpanded ? 'expanded' : 'collapsed'
+            });
         };
         /**
          * Calculates and sets the panel height based on the content height
@@ -58,26 +67,8 @@ export class EdsAccordion {
      */
     componentDidLoad() {
         this.setPanelHeight();
-        // Emit context for each eds-link element after the component is fully loaded
-        const btn = this.el.shadowRoot.querySelector('eds-button');
-        this.emitContext(btn);
         window.addEventListener('resize', this.setPanelHeight);
     }
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
     /**
      * Lifecycle method that cleans up the resize event listener when the component is removed.
      */
@@ -90,10 +81,10 @@ export class EdsAccordion {
      */
     render() {
         const minHeightContentClass = this.minHeightContent ? 'min-h-56' : '';
-        return (h("div", { key: '1f8ea188c4b39f6d1a8d10cdbf43d3df88d1281f', ref: (el) => (this.wrapperRef = el), class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
+        return (h("div", { key: '14811b7517511999f97dc8d486f6c1138d89538b', ref: (el) => (this.wrapperRef = el), class: `container flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
           ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
           ${this.switchBg ? 'hover:bg-inverse' : ''} 
-          ${minHeightContentClass}` }, h("h3", { key: '4490bdc1a18b99850e8db8ae1c38fcb37912ec0d', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), h("div", { key: '82df433a9cc6805a735300fd1bb52f41c639c992', class: "ml-auto" }, h("eds-button", { key: '9965d5eecfa02fbea08c23c44d325417767f6495', id: "accordionId", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-controls": "accordionId", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '7ab8d2d07d55fa05c5e5647d1d00d1165f0d40ce', class: `w-full` }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: 'cb122dd5433d7012cba6f3769f79e92a155c45d7', id: "sectionId", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '0c2e1d9b38f21f0cb7f50aa3923edcc448418e3f', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, h("span", { key: 'd119c88d54e8d5e83d4cc3d4d16d1cd53d689bc7', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: 'b2a6917ec65bc808389a2d1c77cd1183f00cbaa1' })))))));
+          ${minHeightContentClass}` }, h("h3", { key: 'a55ab98b74555ab2ff470d824106d3ff2e9b7fec', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), h("div", { key: 'b3a76425eed4d05404a51d8991070a12cd1609a1', class: "ml-auto" }, h("eds-button", { key: '06ddefe21175e4bc28ef4477f5fd552689e1cd31', id: "accordionId", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-controls": "accordionId", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '7330f2824689a61e82c42f00f79e12d4148df2f9', class: `w-full` }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '533e8014f43ed6d50424f02bfb793456187badd9', id: "sectionId", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '02a0fa8a79942cd2bc760eb62da9cb910252b6cd', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, h("span", { key: '33edc6bc83eb4eaa49ae5482841ae642a60ffde8', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: 'bbbc3fa2b8fc5be7f55d6a45f0f37dc569706ac8' })))))));
     }
     static get is() { return "eds-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,10 +70,8 @@ export class EdsAlert {
     }
     componentDidLoad() {
         // Query all 'eds-link' elements, including those inside shadow DOM
-        const links = this.el.shadowRoot.querySelectorAll('eds-link');
-        links.forEach((link) => {
-            this.emitContext(link);
-        });
+        const lnk = this.el.shadowRoot.querySelector('eds-link');
+        this.emitContext(lnk);
     }
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
@@ -85,12 +83,12 @@ export class EdsAlert {
         linkElement.dispatchEvent(event);
     }
     render() {
-        return (h("div", { key: '99518cd34cbfc04691f2f827b53105ef88c03af8', class: alertStyles({
+        return (h("div", { key: '089491004acd618827ef139a7c2ef486726cea9d', class: alertStyles({
                 intent: this.intent,
                 direction: this.direction,
                 withBtn: this.withBtn
-            }), role: "alert" }, h("p", { key: '7eca97c849473bb4c8472d11243dc5eb9dded61f', class: "f-ui-01 py-8" }, this.message), this.withBtn &&
-            (this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary" })) : null)));
+            }), role: "alert" }, h("p", { key: '9a54555621b492f65b38ecd3cbb44660bf516e51', class: "f-ui-01 py-8" }, this.message), this.withBtn &&
+            (this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : null)));
     }
     static get is() { return "eds-alert"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,8 +29,8 @@ export default {
         message: 'This is an alert message.',
         intent: 'default',
         direction: 'horizontal',
-        pressableLabel: '',
-        pressableUrl: ''
+        pressableLabel: 'Click Me',
+        pressableUrl: 'https://example.com'
     }
 };
 export const Default = {
@@ -46,7 +46,7 @@ export const Default = {
         message: 'This is an alert message.',
         intent: 'default',
         direction: 'horizontal',
-        pressableLabel: '',
-        pressableUrl: ''
+        pressableLabel: 'Click Me',
+        pressableUrl: 'https://example.com'
     }
 };

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

@@ -68,7 +68,7 @@ export class EdsAvatar {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (h("div", { key: '716279a35cc9235da991563d5f84d2dedbdae001', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+        return (h("div", { key: '3ba716296c615d31ce7f3f41fd57e732adc530bf', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
     }
     static get is() { return "eds-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,33 +33,35 @@ export const Default = {
         rounded: false
     }
 };
-export const WithPicture = {
-    render: (args) => `
-        <eds-avatar 
-          first-name="${args.firstName}" 
-          last-name="${args.lastName}" 
+/*export const WithPicture = {
+  render: (args) => `
+        <eds-avatar
+          first-name="${args.firstName}"
+          last-name="${args.lastName}"
           picture="${args.picture}"
           rounded=${args.rounded}
         ></eds-avatar>`,
-    args: {
-        firstName: 'Jane',
-        lastName: 'Doe',
-        picture: 'https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200',
-        rounded: true
-    }
+  args: {
+    firstName: 'Jane',
+    lastName: 'Doe',
+    picture:
+      'https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200',
+    rounded: true
+  }
 };
+
 export const BackgroundColorVariant = {
-    render: (args) => `
-        <eds-avatar 
-          first-name="${args.firstName}" 
-          last-name="${args.lastName}" 
+  render: (args) => `
+        <eds-avatar
+          first-name="${args.firstName}"
+          last-name="${args.lastName}"
           color="${args.color}"
           rounded=${args.rounded}
         ></eds-avatar>`,
-    args: {
-        firstName: 'Bob',
-        lastName: 'Brown',
-        color: 'grey',
-        rounded: true
-    }
-};
+  args: {
+    firstName: 'Bob',
+    lastName: 'Brown',
+    color: 'grey',
+    rounded: true
+  }
+};*/

package/dist/collection/components/eds-block-break/eds-block-break.js

@@ -12,7 +12,7 @@ export class EdsBlockBreak {
         this.extraClass = '';
     }
     render() {
-        return h("hr", { key: '85b5253d4abb77072424452d2ff6a0d631e67652', class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
+        return h("hr", { key: '58ffdece778da8f323dd130908254690b3f6c8d3', class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
     }
     static get is() { return "eds-block-break"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,22 +38,24 @@ export class EdsBreadcrumb {
         this.maxVisibleItems = 6;
     }
     /**
-     * Watch for changes to the `items` prop and parse it when it changes.
-     * Converts the `items` string into an array of objects if it is a JSON string.
-     * If the format is invalid, it logs an error and sets an empty array.
-     *
-     * @param newValue - The new value for the `items` prop.
+     * Watches for changes to the `items` prop and parses it.
      */
     parseItems(newValue) {
-        try {
-            if (typeof newValue === 'string') {
-                this.parsedItems = JSON.parse(newValue);
+        if (typeof newValue === 'string') {
+            try {
+                const parsed = JSON.parse(newValue);
+                this.parsedItems = Array.isArray(parsed) ? parsed : [];
             }
-            else {
-                this.parsedItems = newValue;
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing breadcrumb items:', e);
+                this.parsedItems = [];
             }
         }
-        catch (e) {
+        else if (Array.isArray(newValue)) {
+            this.parsedItems = newValue;
+        }
+        else {
             this.parsedItems = [];
         }
     }
@@ -141,7 +143,7 @@ export class EdsBreadcrumb {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: 'b3f515670374a7451981638d658f8e37f07ab10c', "aria-label": "Breadcrumb" }, h("ol", { key: '999b2035f3c996016e753be3826881a11054e184', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: 'd66dd18fe856e4a8d82e47117d2de0288a9e3c56', "aria-label": "Breadcrumb" }, h("ol", { key: 'b3a218032b312cb5973c1ca59ab7bedcfc07d676', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
             return (h("li", { class: "flex items-center" }, !item.isHidden ? (h("eds-link", { label: item.label, url: item.url, intent: this.intent, current: isLast, "aria-label": item.label, size: "small", "icon-small": "false" })) : (h("span", { class: "truncate px-2 ", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
         }))));

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

@@ -226,7 +226,7 @@ export class EdsButton {
             show: !this.loading
         });
         const ElementType = this.elementType;
-        return (h(ElementType, { key: '04381724e90b1f71960832e705f3a1db46e3a200', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: 'f9b77e3a0eee7afa676fa2b7a4bdce8b3ac124cd', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '0e645a9f7c3d8e87f209ccd1a556ead976143094', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'e7810efb3f5e9853f67afb9491f35b19509700e9', class: "loader", style: {
+        return (h(ElementType, { key: 'e571ed0d3e2f4aa262259afea7d44d19b5685be7', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: '8928bd512c6fb592ed8d2d25ad46213a5a7f4bf5', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '8fdb5947ef65c60e5cc47f04d8fbe2f8485aa6bf', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '5a6cf5d4f2debc279066cb49fa30da7b66f5532b', class: "loader", style: {
                 border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
                 borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
             } }))), this.icon ? h("eds-icon-wrapper", { class: iconClasses, icon: this.icon }) : null));
@@ -254,7 +254,7 @@ export class EdsButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The label text to be displayed inside the button."
@@ -306,7 +306,7 @@ export class EdsButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The visual intent or style of the button.\nOptions include 'primary', 'secondary', 'tertiary', 'ghost', and 'ghostInverse'."

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.js

@@ -1,4 +1,12 @@
 import { h } from "@stencil/core";
+/**
+ * `eds-card-desc` is a simple component that renders a card description.
+ *
+ * It displays a block of text with optional truncation applied using a CSS line clamp.
+ * You can customize the description styling via the `descClass` property and control
+ * whether or not the text is truncated and to how many lines.
+ *
+ */
 export class EdsCardDesc {
     constructor() {
         this.description = undefined;
@@ -10,7 +18,7 @@ export class EdsCardDesc {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (h("p", { key: '017c115ebff999c74cff1eaeb5c63f97e0f6554d', class: `text-light ${this.descClass}` }, h("span", { key: 'f87b9b3d593e417ef351882f426d24c0b206ccab', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: 'ca38bcc0895d5a0c87fda782ef455e45c4b53263', class: `text-light ${this.descClass}` }, h("span", { key: '3108eec08a760b1db7ce1a7be05b68749f8f930b', class: this.getTruncateClass() }, this.description)));
     }
     static get is() { return "eds-card-desc"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.js

@@ -8,7 +8,7 @@ export class EdsCardTags {
         this.tags = [];
     }
     render() {
-        return (h("div", { key: 'b201dc6df5e809d828a055fb5f01fe798e228361', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
+        return (h("div", { key: '60a129de62d45736eba0884cc24c9738f3a0f55c', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
     }
     static get is() { return "eds-card-tags"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js

@@ -43,7 +43,7 @@ export class EdsCardTitle {
     render() {
         //const Tag = this.getTag();
         const Heading = this.headingLevel;
-        return (h(Heading, { key: '8aee3bcb0e04508dd21a03ea0f695e040f37c767', class: this.getTitleClass() }, h("a", { key: 'c5fa27fe86037ed6b039c156aecdf1acc9c7c8bc', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
+        return (h(Heading, { key: 'a654161b2c53e944eaefb21be7189a5e0acb06cf', class: this.getTitleClass() }, h("a", { key: '868fd911c1a8c366d726e886bfc7827487013e27', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
     }
     static get is() { return "eds-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-wrapper/eds-card-wrapper.js

@@ -21,7 +21,7 @@ export class EdsCardWrapper {
             this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
             'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
         ].join(' ');
-        return (h("article", { key: 'c52f6ad7873050c052b8c0e68b2c812d74f2ddf1', class: articleClasses }, h("slot", { key: 'dac6f9fe339c8baa191ee2fd622332ddf25ec08d' }), this.hasSlot('footer') && (h("div", { key: '301862515ba88f320d1af722bec6120bc3e7d723', class: "mt-auto" }, h("slot", { key: '85d939150663a4586934413c9965aa92a9babeef', name: "footer" })))));
+        return (h("article", { key: '7c12b1d147f061e189b5dda5d517ec4eae0c3691', class: articleClasses }, h("slot", { key: 'f506bad73ed38ae36931f88f7d7c5f5d94705e4f' }), this.hasSlot('footer') && (h("div", { key: '783f480be269e4a2f61aa8d4396e757fe41bfcc6', class: "mt-auto" }, h("slot", { key: 'f07ddaa2d930518a5c8ac82efab3cb0dd6647bdd', name: "footer" })))));
     }
     static get is() { return "eds-card-wrapper"; }
     static get properties() {

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

@@ -22,7 +22,7 @@ export class EdsCardGeneric {
         this.avatar = undefined;
         this.shortAbbreviation = undefined;
         this.headingLevel = 'h3';
-        this.tags = '';
+        this.tags = [];
         this.tiny = false;
         this.bg = true;
         this.withHover = true;
@@ -98,7 +98,7 @@ export class EdsCardGeneric {
         });
     }
     render() {
-        return (h("article", { key: '17d1f00f232a4436756fa3846684bbae8c716036', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: 'd99ee1716c4e308a3ea446f0f7cedfaeac30f2ed', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: 'c5bdc76e68a8d660609630aa8184ec3a9508ab61', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'fa993e3c60d357eb0d9a63e612bdd2bf026e7a85', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
+        return (h("article", { key: '5b498abfc65206fe89c9e54e673a81e1b6ed37d5', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '61a0c6076957e39ab2a059c8587fc2e716e470bc', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '6df3c08512acf60e22001867ab5691aa19f67961', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '712193c8afac6744e2512d8b760daf2c850987b9', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
     }
     static get is() { return "eds-card-generic"; }
     static get encapsulation() { return "shadow"; }
@@ -235,22 +235,28 @@ export class EdsCardGeneric {
                 "defaultValue": "'h3'"
             },
             "tags": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
+                    "original": "string | Tag[]",
+                    "resolved": "Tag[] | string",
+                    "references": {
+                        "Tag": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-cards/eds-card-generic/eds-card-generic.tsx",
+                            "id": "../../../packages/components/src/components/eds-cards/eds-card-generic/eds-card-generic.tsx::Tag"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A comma-separated string of tags related to the card content."
+                    "text": "Tags related to the card content."
                 },
                 "attribute": "tags",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "[]"
             },
             "tiny": {
                 "type": "boolean",

package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.stories.js

@@ -54,7 +54,7 @@ export default {
     },
     args: {
         cardTitle: 'Sample Card Title',
-        url: 'https://example.com',
+        url: '#',
         description: 'This is a sample description for the card.',
         headingLevel: 'h3',
         tags: [