@ebrains/components 0.8.0-alpha.0 → 0.9.1-beta

package/dist/components/token-list2.js

@@ -213,14 +213,14 @@ const TokenList = /*@__PURE__*/ proxyCustomElement(class TokenList extends HTMLE
     renderSection(sectionName, sectionContent) {
         if (sectionName === 'tokens') {
             const groupedTokens = this.groupTokensByCategory(sectionContent);
-            return Object.entries(groupedTokens).map(([, tokens]) => (h("ul", { class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, tokens.map((token) => {
+            return Object.entries(groupedTokens).map(([, tokens]) => (h("ul", { class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, tokens.map((token) => {
                 const tokenName = Object.keys(token)[0];
                 const tokenValue = this.resolveColor(token[tokenName]);
                 const textColorClass = this.getTextColor(tokenValue);
                 return (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height items-center justify-between p-16 hidden lg:flex", style: { backgroundColor: tokenValue } }, h("span", { class: `${textColorClass} f-body-02` }, tokenName), h("div", { class: "inline-flex" }, h("eds-code-block", { code: tokenValue, language: "hex", class: "min-w-[210px] mr-4" }), h("eds-code-block", { language: "css", code: `var(--${tokenName})`, class: "min-w-[210px]" }))), h("div", { class: "effect-height items-center justify-between p-16 block lg:hidden", style: { backgroundColor: tokenValue } }, h("span", { class: `${textColorClass} f-body-02` }, tokenName), h("div", { class: "inline block" }, h("eds-code-block", { code: tokenValue, class: "min-w-[210px] mb-4" }), h("eds-code-block", { code: `var(--${tokenName})`, class: "min-w-[210px]" })))));
             }))));
         }
-        return (h("ul", { class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(sectionContent).map(([key, value]) => {
+        return (h("ul", { class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(sectionContent).map(([key, value]) => {
             const resolvedValue = this.resolveColor(value);
             const textColorClass = this.getTextColor(resolvedValue);
             const style = resolvedValue.startsWith('#') || resolvedValue.startsWith('rgb')
@@ -243,7 +243,7 @@ const TokenList = /*@__PURE__*/ proxyCustomElement(class TokenList extends HTMLE
     render() {
         // Check if `show` prop is provided; if not, display all sections
         const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
-        return (h("section", { key: '3e1da1cf339496fb351d4ab2c6238ac389bccc10', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: '8b81b207da80d0006bd14157e527932ca5305a93', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }

package/dist/components/token-radii2.js

@@ -17,7 +17,7 @@ const TokenRadii = /*@__PURE__*/ proxyCustomElement(class TokenRadii extends HTM
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: '16cab4ed90701a89fe7586cb29e85e01156a2f9a', class: "w-full mt-28" }, h("ul", { key: 'e997b51855eb94a8cda474ce537ab81c88938ca9', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, 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" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (h("section", { key: '912af038957cf8b00443e72529d4929b7a508a0a', class: "w-full mt-28" }, h("ul", { key: 'ffffacd1e6006a05a27d5e1248ce626c36abc73e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, 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" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
     }
 }, [0, "token-radii"]);
 function defineCustomElement() {

package/dist/components/token-ratios.js

@@ -17,7 +17,7 @@ const TokenRatios$1 = /*@__PURE__*/ proxyCustomElement(class TokenRatios extends
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: '5e6ad389cf71ef5d70b7c4a92314b25ef7272f62', class: "w-full" }, h("eds-section-core", { key: '5dd2339752eddd0826987245e7b80edc64816a32', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'd71c41ed6a9d8f6b45c03fb8fa7070810f3fe6ba', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (h("section", { key: '595dc0d77e33bfb2109666d185933c9f5b23616e', class: "w-full" }, h("eds-section-core", { key: 'a3217b7808a1bc810ff0b158c4e6547bc2a77b06', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '505f84a67b6eba8c33d1484c4cb0e94f4de68bc0', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, 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/components/token-shadows2.js

@@ -26,7 +26,7 @@ const TokenShadows = /*@__PURE__*/ proxyCustomElement(class TokenShadows extends
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: '019be87dca82cd1edd392ef0758b8a2e37d09ff6', class: "w-full mt-28" }, h("ul", { key: 'ade136beb8b25087e26c3f2300b463aa3fda1e41', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (h("section", { key: 'af8f66e30d9115f920d483c02d1f7c2b718589f9', class: "w-full mt-28" }, h("ul", { key: '1588c580f981ab148ba23a76cd33b0c8b993822c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
 }, [0, "token-shadows"]);
 function defineCustomElement() {

package/dist/components/token-spacing.js

@@ -6,7 +6,7 @@ const TokenSpacing$1 = /*@__PURE__*/ proxyCustomElement(class TokenSpacing exten
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: 'a5ba01206487d07014bfd41fbed4f2f80f7d067e', class: "w-full" }, h("ul", { key: 'be6eb0bbe85f40b123ea04e02d839412401e0e0d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '1617719d10e11cc1e36df8cdc368fb3f55536d9a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '3510583e1adc5029a2562b96f33e9f6453240da5', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b01170621405035c36efe8e5858201b6d12b23e9', class: "spacing-sample m-32 bg-darker" }, h("span", { key: 'ce9639400a99d478a5e31f95c9482cec914e90af', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: '96dd43d6786acdcb5cf9c911ce39efce00b09a77', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd8d9178f9f700eb5e752c87333d894a2392d72e9', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'f357493cdad00a69ec48dc3fb7854ba4b25579ab', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: '6e5e8b20be76970dead72ca485fb5cc9a6e7c1f1', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '22fec87f6102e0577bf912508128c12716b48cb4', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'dee21a637d965b41cbdd9b4131ae7e6fc241d39a', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '43b150abac42ee2e189ec5fe8de64f5b43fba2c8', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: '3789c91cd7db3332af5df28308c4d69ccda4623d', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '07e7c1b44d09a873df7f4488381b561bd952b65f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '898be718773fee0d091424178ff4302f2fbc137b', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '60ce8427ee0c6deeda95b385c6342ca1b6215bba', class: "spacing-sample p-32 bg-darker" }, h("span", { key: '97913f64a9c0b15b200811e59214e0d0b3d8837d', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: '01ba17c02dc6fb806a23ce4429091e0417d094c5', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '559de3d223e040d0e1edbff121b99e6218773917', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'a857560b3ad4d7a5a670d5db5baae3fcfbf18d21', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '5fff31ad7de22d84df6741c0f9a611164bbe5cc9', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '6ac602257cb50ac1a05d78b477bc84fb25e89b4c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'a087fa3b78537b2c0e35b7e9c2693e972092d407', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '76265dd76d79f8eb33f20ae85794c70cf41dd38b', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: 'fe6a57a3977218cb6f9ea10560650634080d0931', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '5526a1591fe499aa09c78be0143f69b7b7af6018', class: "w-full" }, h("ul", { key: '690fb216bebd9a7ded21792e9b06aa06afbc722b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '601a7d094c2143cb0499251243282133b4389c7d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '2c57a78fea544c8e76021031dba8addba73a6d47', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '8879361b69dabe72270b3eac45cf1c95e569f98b', class: "spacing-sample m-16 bg-strong" }, h("span", { key: 'a3ae615891152c0305386082b117083f8bafde9c', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '24142c0ecca843e6185201878ba34a7f01e22bc9', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'c1c25ff252577d8e00e7d1de77f9960e7e97dfde', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c6797217f9bc11797961b3d26fe814bbb275e583', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '376548ee4fa82a8ac20a46b926b34ef6147350aa', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '973f0bb97ebb3c180d2283387f49df9513b7770f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '573eb47f4cc69d46f0603a0a709315c7e191998b', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '71cd97ffaeed369e234c75909a5be4bbb3cb43d5', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '0f6af30c5d310aba1436d9ff92e8d67d7f139b59', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '884a928c8d8c7b5dbdfd024e4e4d76bf98b55f49', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'cfa9dd4088ece07293702056de592c39d68a43ae', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'aca9b21ca52d79a724a5e985d6639e543b495e6b', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '550fc1d92e707439176933443fca6532b06209ca', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: 'a56af0286e1deee424fe9e7e6d3f1dccc0a0a92c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '738731e56be9be727e47687d9ef271ab5b0a087c', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '5448eeed3887bd66270be4e93761b9a3d8fe206c', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '535e325326444ab1d50e885de65d6acdd7f9ec63', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'e0b1ba436681545f760823f1e0d073fd8bd2d44b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9d65df19fdc4be8054e9b34c18f8b54eadac7dbd', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'fe8656e6f0f3fafa3e7dd1ba9dd35251a3a19bf0', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '32b26c324b26b3c57062d149cb49d1f1eeb5b5c4', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
 }, [0, "token-spacing"]);
 function defineCustomElement$1() {

package/dist/components/token-typography.js

@@ -206,7 +206,7 @@ const TokenTypography$1 = /*@__PURE__*/ proxyCustomElement(class TokenTypography
         this.__registerHost();
     }
     render() {
-        return (h("section", { key: '8a5867f30800adcc1e5ef9438f01b3a031110402', class: "w-full" }, h("ul", { key: 'd1fc83712676e6524bddc2e5d1bc50f0266b05eb', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'b2e3951c7419dccdd31e446898a9ad126e36398e', class: "w-full" }, h("ul", { key: '78ec896dad35353bcdc4d9f9d4b68873e1274933', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
             .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, h("div", { class: "mr-auto hidden lg:block", style: {
                 fontFamily: typography.families.sans,
@@ -214,7 +214,7 @@ const TokenTypography$1 = /*@__PURE__*/ proxyCustomElement(class TokenTypography
                 fontSize: style.fontSize,
                 lineHeight: style.lineHeight,
                 letterSpacing: style.letterSpacing
-            } }, h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), h("div", { class: "mr-auto block lg:hidden p-4" }, h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), h("div", { class: "ml-auto" }, h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: [
+            } }, h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), h("div", { class: "mr-auto block lg:hidden p-4" }, h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), h("div", { class: "ml-auto" }, h("eds-code-block", { code: [
                 style.fontSize && `font-size: ${style.fontSize};`,
                 style.lineHeight && `line-height: ${style.lineHeight};`,
                 style.letterSpacing && `letter-spacing: ${style.letterSpacing};`,
@@ -222,7 +222,7 @@ const TokenTypography$1 = /*@__PURE__*/ proxyCustomElement(class TokenTypography
                 style.fontFamily && `font-family: ${style.fontFamily};`
             ]
                 .filter(Boolean) // Remove any falsy values (e.g., undefined, null)
-                .join('\n'), language: "css", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-letterSpacing)`, class: "min-w-[250px] mb-4" }))))))))));
+                .join('\n'), language: "css", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-letterSpacing)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--sans: Inter, Helvetica, Arial, sans-serif;`, class: "min-w-[250px] mb-4" }))))))))));
     }
 }, [0, "token-typography"]);
 function defineCustomElement$1() {

package/dist/components/tutotial.js

@@ -0,0 +1,27 @@
+const tutorial = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 7.5L10 3L17 7.5L10 12L3 7.5Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+    />
+    <path
+      d="M5 8.5V13.2L10 16.5L15 13.6667V8.5"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.8896 13.4492V7.5H18.3896V12.6081L16.8896 13.4492Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+export { tutorial as t };

package/dist/components/unknown.js

@@ -0,0 +1,22 @@
+const unknown = `<svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="10.0001"
+      cy="10.0001"
+      r="9.00007"
+      fill="white"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+    <path
+      d="M8.78976 12.086V11.9135C8.79306 11.3215 8.8442 10.8495 8.94319 10.4977C9.04547 10.1458 9.19395 9.86167 9.38863 9.64515C9.5833 9.42864 9.81757 9.23242 10.0914 9.0565C10.296 8.92118 10.4791 8.78078 10.6408 8.63531C10.8025 8.48984 10.9312 8.32915 11.0268 8.15323C11.1225 7.97392 11.1704 7.77433 11.1704 7.55443C11.1704 7.321 11.1159 7.11632 11.0071 6.9404C10.8982 6.76448 10.7513 6.62916 10.5666 6.53444C10.3851 6.43971 10.1838 6.39235 9.96275 6.39235C9.74828 6.39235 9.54536 6.4414 9.35398 6.53951C9.16261 6.63424 9.00588 6.77632 8.8838 6.96578C8.76171 7.15184 8.69572 7.38358 8.68582 7.66099H6.6665C6.683 6.98438 6.84138 6.42618 7.14164 5.98638C7.4419 5.5432 7.83949 5.21336 8.33442 4.99684C8.82935 4.77694 9.37543 4.66699 9.97265 4.66699C10.6293 4.66699 11.21 4.77863 11.7148 5.00191C12.2196 5.22181 12.6156 5.54151 12.9026 5.96101C13.1897 6.38051 13.3332 6.88627 13.3332 7.47831C13.3332 7.87412 13.2689 8.22596 13.1402 8.53382C13.0148 8.83829 12.8383 9.10894 12.6106 9.34575C12.383 9.57918 12.114 9.79062 11.8039 9.98007C11.5432 10.1391 11.3288 10.3048 11.1605 10.4774C10.9955 10.6499 10.8718 10.8495 10.7893 11.0762C10.7101 11.3028 10.6688 11.5819 10.6655 11.9135V12.086H8.78976ZM9.76972 15.3338C9.43977 15.3338 9.15766 15.2153 8.92339 14.9785C8.69242 14.7383 8.57859 14.4508 8.58189 14.1159C8.57859 13.7843 8.69242 13.5001 8.92339 13.2633C9.15766 13.0265 9.43977 12.9081 9.76972 12.9081C10.0832 12.9081 10.3587 13.0265 10.5963 13.2633C10.8338 13.5001 10.9543 13.7843 10.9576 14.1159C10.9543 14.3391 10.8965 14.5438 10.7843 14.7299C10.6754 14.9126 10.5319 15.0597 10.3537 15.1714C10.1756 15.2796 9.98089 15.3338 9.76972 15.3338Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+export { unknown as u };

package/dist/components/up-and-down.js

@@ -0,0 +1,12 @@
+const upDonw = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M10 3L15 8L5 8L10 3Z" fill="currentColor" />
+    <path d="M10 17L5 12L15 12L10 17Z" fill="currentColor" />
+  </svg>`;
+
+export { upDonw as u };

package/dist/esm/bookmark-c200037c.js

@@ -0,0 +1,16 @@
+const bookmark = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5 4H15V16L10 12.0138L5 16V4Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linejoin="round"
+    />
+  </svg>`;
+
+export { bookmark as b };

package/dist/esm/color-primary-palette_6.entry.js

@@ -32,7 +32,7 @@ const ColorPrimaryPalette = class {
         ];
     }
     render() {
-        return (h("ul", { key: '153e3c0f00db6f824cb0f43b420645bcbd66632f', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '970e6baf4b258e9a0ed194316daf1c862d17733e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
 };
 
@@ -93,23 +93,15 @@ const ColorSecondaryPalette = class {
         this.show = undefined;
     }
     render() {
-        return (h("ul", { key: 'b0af2cdf6524cf79ef8d28f37533d1f84812f174', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '54f985b91b28ae253a06ec313872ccc81449bf51', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
 };
 
 const ColorSupportPalette = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        // Support palette data
         this.colors = [
-            {
-                rgb: 'R20 G20 B20',
-                cmyk: 'C78 M69 Y61 K87',
-                hex: '#141414',
-                pantoneC: '',
-                pantoneU: '',
-                background: '#141414'
-            },
+            { rgb: 'R20 G20 B20', cmyk: 'C78 M69 Y61 K87', hex: '#141414', pantoneC: '', pantoneU: '', background: '#141414' },
             {
                 rgb: 'R56 G56 B56',
                 cmyk: 'C68 M58 Y55 K63',
@@ -134,18 +126,39 @@ const ColorSupportPalette = class {
                 pantoneU: 'PANTONE 649 U',
                 background: '#E6E6E6'
             },
-            {
-                rgb: 'R255 G255 B255',
-                cmyk: 'C0 M0 Y0 K0',
-                hex: '#FFFFFF',
-                pantoneC: '',
-                pantoneU: '',
-                background: '#FFFFFF'
-            }
+            { rgb: 'R255 G255 B255', cmyk: 'C0 M0 Y0 K0', hex: '#FFFFFF', pantoneC: '', pantoneU: '', background: '#FFFFFF' }
         ];
     }
+    getTextColor(value) {
+        // hex branch
+        if (value.startsWith('#')) {
+            const hex = value.slice(1);
+            const r = parseInt(hex.substring(0, 2), 16);
+            const g = parseInt(hex.substring(2, 4), 16);
+            const b = parseInt(hex.substring(4, 6), 16);
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        // rgb(...) branch
+        if (/rgb/i.test(value)) {
+            const nums = value
+                .replace(/rgba?\(/i, '')
+                .replace(')', '')
+                .split(',')
+                .map((n) => parseFloat(n.trim()));
+            const [r, g, b] = nums;
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        // fallback
+        return 'text-default';
+    }
     render() {
-        return (h("ul", { key: 'c58041047c7d7993ac4e936051d40e1e8dda5263', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC || 'N/A'), h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
+        return (h("ul", { key: 'cf31dbb2778735cb95f40243f557e97c15cd29f0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+            // compute once
+            const textClass = this.getTextColor(color.background);
+            return (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), h("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));
+        })));
     }
 };
 
@@ -181,7 +194,7 @@ const GradientPrimaryPalette = class {
         ];
     }
     render() {
-        return (h("ul", { key: '95d991a7331f3f75909421db363b0c30646dd9f7', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '469fc7f19a4346b7e930095c489c0e89cc58e6df', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
                 background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
             } }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16" }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
@@ -243,19 +256,19 @@ const GradientSecondaryPalette = class {
         ];
     }
     render() {
-        return (h("div", { key: '95324cdbb1dc2eec5d1b47b5a88b69c9e2139535' }, h("ul", { key: 'deddb39135e4dee2c6b401eb543ea2169d606331', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '848cdd2984b1dc5b2c0672ab125fe951b9c7d30c', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'af8b2fd8be90d0fffe2334f66878a34b32fa148f', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("div", { key: 'bcfd5c5ca5a01138d27ae5f0867998bb40d526ac' }, h("ul", { key: '6f79d13b142488f1253ba77b0a044fd8ada8d297', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'e8e44a1ee3993564fc2331d0d9337a2e0ceaebc1', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '229940b2fe6264429fb7627c9d3aa02e18e90b5a', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, h("div", { key: 'b796899ca009ee80c877e2e728639abcf2b46770', class: "grid" }, h("span", { key: '2ba29c5bb91fef4b817f853056701feb001bdca0', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '23e36499f1ba4dd08ac928c6fefc6d38f03f4724', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '11af3db24e81dc5382e8b3c64296e0416c3a2a5a', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '0bc7aa191c1ddd71c5e716ac07687c2412530bad', class: "grid" }, h("span", { key: '3b84d1f6f75c3fa401fc08597318cb24e00a6db3', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: 'beb7250e567791947e9ccda81cf99d4fd3c7e007', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'd5c6301370b862c3bd713188b468ed22f9377e9c', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '0cf83c147dde777efe2783d2148e780ab328c978', class: "grid" }, h("span", { key: '06f893ff45abe7c1d3cb817fe5834a5176c93f06', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '3967e17ed980810d8b35b0d2b2e754f7b2e8b3e0', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '2adc489cee7b3a3a67f62493fb5e125fc1e75c04', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'cb27de2308afcaaaad82675c50573805e51f36f7', class: "grid" }, h("span", { key: '0655190c8a8d555ed0fec5c319ff349d9fefc4d0', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '2b75a99e922965547e9f86240c0db577ec0b9682', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'a8b7ef1c5309601366baffa2d3b48c6cd8893eb6', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, h("div", { key: '14958bec1bc69da8afcd5abbec40153900003aea', class: "grid" }, h("span", { key: '7efe478f1588fc12a88e74eb6385a9ac1e83f2d2', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'aaf8b133f495682cd5934be9719889fd6cd79d5f', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'ba3050a85770e74810686603510bbd439e9c48c2', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'cc133d0be620d1749317a2d46386c3b662c7e231', class: "grid" }, h("span", { key: '77a6292eec6c5b36a209d627e8ebe4b0d8978529', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '4bbf9a51af72aecd3d8e40388d56f7ec04307e5b', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: 'd8bd95b4b6a4992490b8a28c88ba94524ed3f89d' }), h("ul", { key: 'dcd47948561897e2b9dd5052f542b6faece97160', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '4c2780b54496da965860adb2a13b3874198d2c50', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '1817732e6c42366661ef95cc1efad7bb3443481d', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'fd01906e34a91984aa7ce6439abcf03673d70099', class: "grid" }, h("span", { key: 'd4e119028ad415d9a21988c2bf603011856bb78d', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '4ba9d26645884bc1fc75741ee40509af56a9e7ae', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '5be1c28b15b458fba099868b598ee513077562e0', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8609b9e68f23aaec35e76b312a425c376d508892', class: "grid" }, h("span", { key: 'f5cbb2d867e1a66e8371ebd73503ac1cd208f51d', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: 'b72b8b23c5b1e136cb1114af22f34c6222b0d0f9', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '73e70749f132579efc19bccab4fff8b3e2d6979a' }), h("ul", { key: 'ae61acfb731129d85d3c5151ac08d676113a5971', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '2b59810dbc40db3dfca10a09ad524499ea87f0e9', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e66cdabf69654205b975801bbc5ff102982fba78', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: 'fdb50c1ad5c1b19aa7d6b271857d63d7ff129d66', class: "grid" }, h("span", { key: '4b5f5b8e075d73329803b5ca1204c257e8e8d6c4', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '67a26de500956ca477aa2213e6ecf8bea6d7ecb0', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'f0cd24d68af26304da2bfc8755328ca9d319c1b9', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'f45ddb2b08e36a64e0383289fe7e1e70d11bc725', class: "grid" }, h("span", { key: 'b5f5fd53de2e0fee6122c0797f3269dd0e70e9f3', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'cbe037d718989eaf0274463ed300e81415e701e9', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '64e866bab4859c8a35a08440bf4c855d3824d20a', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '0f4d10150dc7694d7d4ccf59bc99a95216a00bc5', class: "grid" }, h("span", { key: '85bbcdc4ca9b1f35625c15f5e742c35599084456', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '0b5354d88e4ada3497bb20ae9138e3f23d31b5e7', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'a67ca35d57d13a66fcab132565c1a246e37f42e8', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '41322955767caa5ce439b142ccacdcb809ebc52e', class: "grid" }, h("span", { key: 'ab06d7acd75b1065d057a4ec8cd7af93cd91bb5c', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'ec63cad47f9021cfd1bed508721cc5772d037bd3', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'ce5898b0ff195f6033d28e68dfd981a1813a23a4', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '1060ff9082dc3fd0c1d76a7b1c348ee980d59d5d', class: "grid" }, h("span", { key: 'abe785e555f4ec227ae6fd5eda65431b63f69d84', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '43a7d7afd959c53d552225df797f308f2c6672c0', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '0238b051353f4d717d7e1fc8a2d038e03c337150', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'c922aca2c73e3d489f029edee6c21f2c741608bc', class: "grid" }, h("span", { key: 'fd09943b23b1c58efcb1f971fde59cdcdd6fb6d3', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '5a9e9d68d53c02c9a871efc71e384bfe4f3dc15e', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '708821f7228d40fa0a6af2ce906955e7d0a9134a' }), h("ul", { key: 'af9971a8abdf34a4397466712e6391496a4fbbfb', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'fc026fa3187ed8536a553a34eca496d60c0a3c28', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'd42c5c8620956085d632daa27f552935cc57c4f5', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '1126fbf08d60b5840ba76e7d838d0ebfb47a0af9', class: "grid" }, h("span", { key: 'd18fbf24fcedb41638c626991e9ef3706cd0e4f7', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '9d7d1df13ce9ab7b447d72851a2f5f3b66cf1034', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '5f92ba3b52a56638b7469572614d75fde23a1516', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '4b17671dd5d18382d80ee52b8cbce51633d78603', class: "grid" }, h("span", { key: 'cc6a59b63bcd128d5adfd70d908cecba1324a717', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '1cf37dab03769794f85d09d8d331306fb24e2fb3', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '1e1888c860c39e5ac93c2dcd5ff9bf65e8c3b412' }), h("ul", { key: '46ee0e1cd0a80a6da7991ee9474e4db5841b1c52', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '59343e8799ddb56b0d14d3a9c43f4d43c5d82cba', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '5388a8eb55332a9a6d5b5fbe8bf022eb2a76d06c', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, h("div", { key: '3cd0f3371918e997facce06672764914a168e7b9', class: "grid" }, h("span", { key: '1111da42bd889d65bba8615cbb321c1ad6386a5b', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '172ea59eb6a729ba29341662dba089d665dfe921', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '7a56e5937a4ae52d5c55489d49379b04d99f1bc3', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '4a5fd644619823b3ae0e30cd60fa6d7bfc643047', class: "grid" }, h("span", { key: '15a2d7d98420c0ebb8fe3914bb1457e821a5a99a', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '4e09b1d98588aba17283686303f02ddce63b9f79', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '527816987ba5afd8d906ab1b1c92c1499bb0c82c', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '0f57d835c53d5844a155c8cfb78b1b3d0d37aecd', class: "grid" }, h("span", { key: '65b91767f90901590ca0ca4d892bf4bf5ca215d2', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'c2c46be9bee84e4ca53929dc9a0f5b87f48ad3ed', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'c40e13a9f535d710cede159d555fac9bbddf7b4c', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '0ebf1113e44f4e2704465d286022b84ddd57c43e', class: "grid" }, h("span", { key: 'e8c7485dfe4b2d1e36eae2cb21ec624384e5c085', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '7d875d8c15a4f7bee7c746d9f297bd910f4cc5a6', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '27777683ba91c02274fd691b09a43c836e24aca3', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, h("div", { key: '5723ecebf48cb271b908892880b2e5916a2260d3', class: "grid" }, h("span", { key: '1f4bc5243c69d4d875100dea5678eca909a318d6', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: 'a0d7e3283b2c27c9c909174671f84f0e127fd47b', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '80eb873c0ef3db0ab0fedb0b97fd6a55c77b7a9b', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '7ad8e2f8fd77fa22f8c960b9f60b93160d7b18e4', class: "grid" }, h("span", { key: '76d8a46dc70cabfb90314730a14cf613dd94e5a2', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '6fba90e3c22c2a2cb79dc99345648fdce235a529', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, h("div", { key: '4f9b082b9e6c5d679801446fa5a7b88d18b40147', class: "grid" }, h("span", { key: '6afd59aafb0f1b793a8f989f7d201a922951dacd', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '2114f91de062deba17e69d9bff77670107ed3f91', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '08f8b3155d932eed5b05f4dbfc0e3c6e23aa02b5', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '5459b32225dbf86021dd6a95e84b73bf14a74fe8', class: "grid" }, h("span", { key: 'bedfeaa4250c3bf74f267d50aecc0df93fbf21ad', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '8cc7a7a1abef3dcccad63c600692bffa5df89837', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
 };
 
@@ -307,11 +320,11 @@ const GradientSupportPalette = class {
         ];
     }
     render() {
-        return (h("ul", { key: '2d73e1f2954e7900990f3f1b92e088172c48d193', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'ddd095d39334d645bd69143f975c869c9061becf', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '8fdd52e523f612f65293cefa69cd1587722ea0b2', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: 'ba16ce258232ac4ff1dd57e69ce89eba2755ea4e', class: "grid" }, h("span", { key: 'e5bbd8438eedce22c00a570b5000bb2f9544f943', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '26bdb7eab2bf73b568d79a31d697d835a1a2c16d', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '63ed93911453afa708119d3bc237581fc14d859b', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a99939016fee0fdcbfc8916ddabc70da990506b6', class: "grid" }, h("span", { key: 'f51ea8694129ef99920037fae8837b2c4f7552ce', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '047e32f25dc6f2c8d8c0881c500e4485d20e9312', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '8364ad80dc8a18b4315f9e39f8d364fe928e1334', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'f03dce05b8e864f63560d3ac02bdbc37c66f5c00', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'b6995567668ffafb14824bfcb2394dfbaff7f718', class: "grid" }, h("span", { key: 'eea29f050955e9cb036650af9760f4056ca2de29', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '4978ad35c6902267c8bbecb471ea479c2a08577b', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'e043773af3e73ebd7978c7f7bc7cbc0ca02f162c', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '3fa13de855940e4188818ff7031463b9d3915511', class: "grid" }, h("span", { key: '0c5f5c3ab2946033c7ff74f39b7a71380471d887', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '4b21f7ed78add17b4d013c59aac12976670ef037', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: 'fce44ca75c9d2317b6fd9a1953db054b8d1ca4b3', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '4748c78922ae9c03cd457911b0e9e92c818545d8', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("ul", { key: 'd965ec67f29697480e0b7a6fea0743d946476153', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '7ae7f96aa9b3ce2a8d1fbc018b652a83e4f41e90', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '604c51b26cc5eec60e2e0125cda0cb60c82282f0', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '083d7aa003c99b54dc0c62c5ba1603c2a2a75c0a', class: "grid" }, h("span", { key: '4bc89f70e22217fa58f1db0586a8d5ee0db8bdae', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'd8e1bb4f6ce3e173e31685fc4435be29d9eac4a4', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'e370e6ea2808161625aea5e9b1e6e4dd9d137f33', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '6caf8c42e6296081a3daaca0e52c2a2776d1ab46', class: "grid" }, h("span", { key: '48ac4de4d194ae630a8a14df56ff2670f2f37092', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: 'fd02781c816a152d92c1579dc9a3115eadb0690e', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: 'a8562d9fb6ff77fcc6b31952a2ead12f3e0e9b50', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '4578880af1de315101deb5b42c91769dc2ca7437', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'ed304eb3c8c3ccb769db7d769872ce075261cb17', class: "grid" }, h("span", { key: '956fe1115a5c1c4f6d2503737a46f0f1cbdc8e06', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '6beb1017eec40dd27351fda2ec1609987d46fb05', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'a9319b683d13670c827b3444484d5469142ef76d', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1d4f1a48a18aee0a90dd04fb336352042014ce29', class: "grid" }, h("span", { key: 'f4b7df5e0cde451a5e650e11b9805cc5be0c9fec', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '26d4869a2207e1386f72d2833aaf819c15006c34', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: 'ed2b1465825e249bff9f5df38649b331f19e0672', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '22182a6d9bb64ab5dcbc38e359c3a7d7f79f3090', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '9cff6d7998f301a7c97d939bf5c38e5687fb0bde', class: "grid" }, h("span", { key: 'a1561d5f9472d43e40bd054cf516458f89841c3f', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'b55020b6dbb423ec2151b81c185311229993ec83', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'ae4d929c795f5e12cb1f2f41aad3bfc9a1db47c7', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '3ba7d23eb05b4dcc97b8dd7204a93daca6e0e798', class: "grid" }, h("span", { key: '4c047aae61adb93550b0ce1da65387b6d57e745f', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '8d8776d142dd8f9378900dc152b32b5b3cfbe95e', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'd4d02de329e6d6407c8e360a7b1838395f7aab40', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '28e2e772e7d12fbfdebec31f0aff6db397140132', class: "grid" }, h("span", { key: '872451c9846398641f1a592e8c166a6a51ee7298', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '84e28be1191f264e126c8579e26cbe6966010b4d', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'a4c3dc76652feefaf3a9eba5bb3694b8dbf96be8', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'ff3a6599da869d3f9e85cb94481206e7e6331988', class: "grid" }, h("span", { key: '37ef90488eb673fdac1221f7123daa87a5a75fcd', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '0a6fbb96f982a3e7c12af3787520335878faa9fe', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'b59aeb053ab1145e0d3bc163f4650cdf30afe7d4', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '50659022ed31e85fa46df11e33050430bc3a92db', class: "grid" }, h("span", { key: 'b2353739a0a09c5576eed0355a2c96913fb81a97', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'a40cd11295617a0b67bfe1ac49420d9918503a6d', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'd42fa64fbc856b2a52241650d6b74acd2b8642ee', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '341bd4f637751cefa429bc6c3aab0adc714830e6', class: "grid" }, h("span", { key: '728dfa47d7e92236cfb9c321fcd610a9cd3c4cd8', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '3f06c0d1468942e9999655d32b0b32454720ceae', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '9bdd7ba9ccb255e8540b12ae33636a164f2d2da1', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e700e5494922cdd1940a4002cab7fecfd407ce72', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '7dc4bfe5e3db4754f7e0c21005b36e16f32cf531', class: "grid" }, h("span", { key: '7faca86fa5a0477b8a136c39c9e6caac63bbaa27', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'b0dede7a2415df03772b15e32feb066f1dc18124', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '3903bcb378fc37313c79c187d2722a80773a6fdf', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'b15d2d0529d6ac65f549219155b0dc1f17c4e43e', class: "grid" }, h("span", { key: 'c7bc170b9f4b11552e5f5b7332fb3cc2db628dbf', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '8c643a1a1590e3cf928835afc3a0a8c35dbe18f2', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, h("div", { key: 'af020f1a66c2d0afcb2e2bdf189569e6d897ef32', class: "grid" }, h("span", { key: '3b2f895dccdeb5e2fb5aa505f19514f012d24426', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '9836a6ef47ed0dc8767a590212a23bfca2f74adf', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '3b274f716c6ca1381e4cc0136d18e167290bfa74', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a41592e2172dc9f81e9d2f36328ff88de3f0954e', class: "grid" }, h("span", { key: 'fd7a06a256d3513bcf239fe9f778f3589895b9d5', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '991f38ea137b729c9e9e6c9e0031940151f6e9dc', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '8efdd7d9f93cba4b9479e1d3face7cec94cf1af6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '4223ec29cac4313dc261cb472bd880ae00279657', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '227dd5fab1add4083271b6e7f95c7d575d91252e', class: "grid" }, h("span", { key: 'e5b1aab8d67f7c67f231acd4156768f146320be3', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'fc4712e37494e8e30a48bc77a0ca61c94e24075d', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'a429c519e42e242d8ce8f661a513f7b5327ffce7', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '84f30a1620cacadf8c0bf1382333d74772f81f27', class: "grid" }, h("span", { key: '2b6dfc8e87517e4d0421ef0e5c2391a07f033600', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: 'c4cd5bc061ce4163a170568c0ed5934c7f30d75f', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
 };
 

package/dist/esm/{eds-components-section.entry.js → components-section.entry.js}

@@ -1,6 +1,6 @@
 import { h, r as registerInstance } from './index-8a71b9a7.js';
 
-const EdsComponentsOverview = () => (h("div", { class: "static-content container" },
+const DocsOverview = () => (h("div", { class: "static-content container" },
     h("h2", null, "Load the module"),
     h("p", null,
         "Integrating the EBRAINS UI Components to a project without a JavaScript framework is straight forward. If you\u2019re working on a simple HTML page, you can start using the components immediately by adding the tags below to the",
@@ -35,15 +35,19 @@ const EdsComponentsOverview = () => (h("div", { class: "static-content container
         ' ',
         h("code", null, "head")),
     h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }),
+    h("p", null,
+        "To directly use only the produced variables add the tag below to the ",
+        h("code", null, "head")),
+    h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>', language: "css", "copy-label": "Copy Code" }),
     h("p", null,
         "Note that, loading the predefined CSS framework above,",
         ' ',
         h("b", null, "automatically loads the fonts so you can skip loading them separately"),
         ". If you wish, however, to load the fonts, add the tag below to the ",
         h("code", null, "head")),
-    h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" })));
+    h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" })));
 
-const EdsDocsInstallation = () => (h("div", null,
+const DocsInstallation = () => (h("div", null,
     h("p", null, "Before proceeding, ensure that Node.js is installed on your machine\u2014you can download the latest version from the official website. If your project doesn\u2019t already use npm and you plan to integrate EBRAINS Components, you'll need to create a package.json file by running npm init and following the on-screen instructions."),
     h("div", { class: "my-8" },
         h("eds-code-block", { code: "npm install @ebrains/components", language: "html", "copy-label": "Copy Code" })),
@@ -56,14 +60,15 @@ const EdsDocsInstallation = () => (h("div", null,
     h("div", { class: "my-8" },
         h("eds-code-block", { code: "npm install @ebrains/angular", language: "html", "copy-label": "Copy Code" }))));
 
-const EdsDocsReact = () => (h("div", null,
+const DocsReact = () => (h("div", null,
     h("h2", null, "React Wrappers"),
     h("p", null, "To use the EBRAINS web components in a React Application, simple install the package below and check out the examples"),
     h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" }),
     h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" },
-        h("eds-code-block", { code: '\nimport {\n  EdsHeader,\n  EdsFullscreenMenu,\n  EdsUser\n} from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n  // Add any other properties your user object might have\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n    };\n  }, []);\n\n  return (\n    <div>\n      <EdsHeader\n        homeUrl="/"\n        menuEnabled={true}\n        inverseHeader={false}\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      >\n        <div className="px-16">\n          <EdsUser\n            keycloak-url="http://localhost:8080"\n            keycloak-realm="nigeor-realm"\n            keycloak-client-id="stencil-app"\n          ></EdsUser>\n        </div>\n      </EdsHeader>\n\n      <EdsFullscreenMenu\n        home-url="/"\n        links={[\n          { label: "About", url: "#" },\n          { label: "Focus Areas", url: "#" },\n          { label: "News & Events", url: "#" },\n          { label: "Contact", url: "#" }\n        ]}\n      ></EdsFullscreenMenu>\n      \n      <div>\n        User is{" "}\n        {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n\n      <div id="main"></div>\n    </div>\n  );\n}\n\nexport default App;\n\n', language: "javascript", "copy-label": "Copy Code" }))));
+        h("p", null, "This code displays a Stencil-based splash screen that stays visible until an initialization promise resolves (or errors), then hides itself and reveals the main React app content."),
+        h("eds-code-block", { code: "\nimport React, { useMemo, useState } from 'react';\nimport {\n  EdsHeader\n  EdsSplashScreen,\n  EdsMatomoNotice,\n  EdsSteps\n} from '@ebrains/react';\nimport './app.css';\n\n// simulate 2s\nfunction fakeInit(): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, 2000));\n}\n\nexport function App() {\n  // 1) create init promise\n  const initPromise = useMemo(() => fakeInit(), []);\n\n  // 2) is splash still visible\n  const [splashVisible, setSplashVisible] = useState(true);\n  const [initError, setInitError] = useState<string | null>(null);\n\n  // 3) show the UI after the splash has hidden\n  const showApp = !splashVisible && !initError;\n\n  return (\n    <div>\n      {splashVisible && (\n        <EdsSplashScreen\n          inverse={false}\n          initPromise={initPromise}\n          onSplash={(e: CustomEvent) => {\n            if (e.detail.type === 'hidden') {\n              setSplashVisible(false);\n            } else if (e.detail.type === 'error') {\n              setInitError(e.detail.message);\n              setSplashVisible(false);\n            }\n          }}\n        />\n      )}\n\n      {initError && (\n        <div className='error'>\n          Failed to initialize: {initError}\n        </div>\n      )}\n\n      {/* Show App only when ready */}\n      {showApp && (\n        <>\n          <EdsHeader></EdsHeader>\n          <EdsSteps\n            steps={[\n              {\n                title: 'Introduction',\n                content: 'Begin by familiarizing yourself with the overall process.'\n              },\n              {\n                title: 'Process Overview',\n                content: 'Review the detailed steps and understand the workflow.'\n              }\n            ]}\n            type='linear'\n          />\n\n          <EdsMatomoNotice />\n\n          <div id='root'></div>\n        </>\n      )}\n    </div>\n  );\n}\nexport default App;\n", language: "javascript", "copy-label": "Copy Code" }))));
 
-const EdsDocsVue = () => (h("div", null,
+const DocsVue = () => (h("div", null,
     h("h2", null, "Vue Wrappers"),
     h("p", null, "To use the EBRAINS web components in a Vue Application, simple install the package below and check out the examples."),
     h("eds-code-block", { code: "npm install @ebrains/vue", language: "javascript", "copy-label": "Copy Code" }),
@@ -81,16 +86,16 @@ const EdsDocsVue = () => (h("div", null,
         h("eds-alert", { message: "This may lead to issues because Vue binds these as attributes .", intent: "error" })),
     h("eds-code-block", { code: '<EdsAlert\n  message="This is a default informational alert."\n  intent="default"\n  :pressableLabel="Press Me"\n  :pressableUrl="https://ebrains.eu"\n></EdsAlert>', language: "javascript", "copy-label": "Copy Code" }),
     h("div", { class: "my-8" },
-        h("eds-alert", { message: "Use the .prop modifier to ensure properties are passed correctly.", intent: "success" })),
+        h("eds-alert", { message: "Use the .prop modifier to ensure properties are passed correctly.", intent: "default" })),
     h("eds-code-block", { code: '<EdsAlert\n  message="This is a default informational alert."\n  intent="default"\n  :pressableLabel.prop="Press Me"\n  :pressableUrl.prop="https://ebrains.eu"\n></EdsAlert>', language: "javascript", "copy-label": "Copy Code" }),
     h("p", null,
         "Using the ",
         h("b", null, ".prop"),
         " modifier in Vue ensures that the data you pass to your custom elements is received as intended. It prevents Vue (and the browser) from transforming camelCase property names into lowercase attributes, thereby maintaining the correct data mapping in your Stencil components."),
     h("eds-section-core", { "section-title": "Example Vue App", "heading-level": "h3" },
-        h("eds-code-block", { code: '\n<template>\n  <EdsHeader \n    :inverseHeader.prop="true"\n    :menuEnabled.prop="true">\n  </EdsHeader>\n</template>\n\n<script>\n\nimport { EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: {\n    EdsHeader,\n  }\n};\n</script>\n', language: "javascript", "copy-label": "Copy Code" }))));
+        h("eds-code-block", { code: '\n<template>\n  <div>\n    <EdsHeader></EdsHeader>\n    <!-- render the splash until we manually hide it -->\n    <EdsSplashScreen inverse="false" />\n\n    <!-- then show main UI -->\n    <div v-if="!splashVisible" class="container my-16">\n      <EdsSteps \n        :steps="JSON.stringify(stepsdata)"\n        type="linear"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { EdsSplashScreen, EdsSteps, EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: { EdsHeader, EdsSplashScreen, EdsSteps },\n  data() {\n    return {\n      stepsdata: [\n        { title: "Introduction", content: "Begin by familiarizing yourself with the overall process." },\n        { title: "Process Overview", content: "Review the detailed steps and understand the workflow." }\n      ],\n      splashVisible: true\n    };\n  },\n  methods: {\n    delay(ms) {\n      return new Promise(resolve => setTimeout(resolve, ms));\n    },\n    async initialize() {\n      try {\n        // simulate your init work\n        await this.delay(2000);\n\n        // fire the built-in event that EdsSplashScreen listens for\n        window.dispatchEvent(new Event("hideSplash"));\n      } catch (e) {\n        console.error("Init error", e);\n        window.dispatchEvent(new Event("hideSplash"));\n      } finally {\n        // show the rest of the app\n        this.splashVisible = false;\n      }\n    }\n  },\n  mounted() {\n    this.initialize();\n  }\n};\n</script>\n', language: "javascript", "copy-label": "Copy Code" }))));
 
-const EdsDocsAngular = () => (h("div", null,
+const DocsAngular = () => (h("div", null,
     h("h2", null, "Angular Wrappers"),
     h("p", null, "To use the EBRAINS web components in an Angular Application, simple install the package below and check out the examples."),
     h("eds-code-block", { code: "npm install @ebrains/angular", language: "javascript", "copy-label": "Copy Code" }),
@@ -101,7 +106,7 @@ const EdsDocsAngular = () => (h("div", null,
     h("eds-section-core", { "section-title": "Example Angular App", "heading-level": "h3" },
         h("eds-code-block", { code: '\n<div class="container">\n  <eds-breadcrumb\n    intent="tertiary"\n    items="[\n      { "label": "Home", "url": "#" },\n      { "label": "Products", "url": "#" },\n    ]">\n  </eds-breadcrumb>\n  <eds-footer></eds-footer>\n</div>', language: "javascript", "copy-label": "Copy Code" }))));
 
-const EdsComponentsSection = class {
+const ComponentsSection = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.tabIndex = undefined;
@@ -109,22 +114,22 @@ const EdsComponentsSection = class {
     renderContent() {
         switch (this.tabIndex) {
             case 0:
-                return h(EdsComponentsOverview, null);
+                return h(DocsOverview, null);
             case 1:
-                return h(EdsDocsInstallation, null);
+                return h(DocsInstallation, null);
             case 2:
-                return h(EdsDocsReact, null);
+                return h(DocsReact, null);
             case 3:
-                return h(EdsDocsVue, null);
+                return h(DocsVue, null);
             case 4:
-                return h(EdsDocsAngular, null);
+                return h(DocsAngular, null);
             default:
                 return h("p", null, "Content not available.");
         }
     }
     render() {
-        return h("div", { key: '85fff494e98ff10bbcc630487a75d345e7cce78c', class: "container" }, this.renderContent());
+        return h("div", { key: 'ee8facfaad3786770fd3ea39f1db7922a67ffd3e', class: "container" }, this.renderContent());
     }
 };
 
-export { EdsComponentsSection as eds_components_section };
+export { ComponentsSection as components_section };