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

package/dist/cjs/paper-0d6302f6.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const paper = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11 17H4V3H16V12M11 17L16 12M11 17V12H16"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+  </svg>`;
+
+exports.paper = paper;

package/dist/cjs/plus-d0e00ad0.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const plus = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M16 10H4" stroke="currentColor" stroke-width="2" />
+    <path d="M10 16L10 4" stroke="currentColor" stroke-width="2" />
+  </svg>`;
+
+exports.plus = plus;

package/dist/cjs/portal-46212559.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const portal = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 14.0806L8 11L3 11L3 9L8 9L8 5.91938L13.1008 10L8 14.0806Z"
+      fill="currentColor"
+    />
+    <path
+      d="M15 15L12 15L12 17L15 17C16.1046 17 17 16.1046 17 15L17 5C17 3.89543 16.1046 3 15 3L12 3L12 5L15 5L15 15Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+exports.portal = portal;

package/dist/cjs/private-38835fe7.js

@@ -0,0 +1,27 @@
+'use strict';
+
+const privat = `  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 5V3C8 1.89543 7.10457 1 6 1V1C4.89543 1 4 1.89543 4 3V5"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <rect
+      x="2"
+      y="5"
+      width="8"
+      height="6"
+      rx="1"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+    <circle cx="6" cy="8" r="1.5" fill="currentColor" />
+  </svg>`;
+
+exports.privat = privat;

package/dist/cjs/public-b519b1f6.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const pub = `  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="6" cy="3" r="2" stroke="currentColor" stroke-width="1.5" />
+    <path
+      d="M10 12V9C10 7.89543 9.10457 7 8 7H4C2.89543 7 2 7.89543 2 9V12"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+  </svg>`;
+
+exports.pub = pub;

package/dist/cjs/{eds-svg-repository.cjs.entry.js → svg-repository.cjs.entry.js}

@@ -28,9 +28,19 @@ const menu = require('./menu-7050a6d1.js');
 const more = require('./more-1d3dd8bc.js');
 const user = require('./user-a3c2230f.js');
 const copy = require('./copy-53102d0c.js');
+const unknown = require('./unknown-6814e551.js');
 const thumbsUp = require('./thumbs-up-411babb8.js');
 const thumbsDown = require('./thumbs-down-714036b1.js');
 const star = require('./star-942eee9f.js');
+const bookmark = require('./bookmark-c61853d9.js');
+const minus = require('./minus-1da6a98a.js');
+const paper = require('./paper-0d6302f6.js');
+const plus = require('./plus-d0e00ad0.js');
+const portal = require('./portal-46212559.js');
+const _private = require('./private-38835fe7.js');
+const _public = require('./public-b519b1f6.js');
+const tutotial = require('./tutotial-7855df3c.js');
+const upAndDown = require('./up-and-down-d71df67d.js');
 
 const color = `  <svg width="20" height="20" viewBox="0 0 36 36">
     <path fill="#e24329" d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"></path>
@@ -42,6 +52,8 @@ const color = `  <svg width="20" height="20" viewBox="0 0 36 36">
     <path fill="#fca326" d="M34 14l1.9 6.16c.18.565 0 1.2-.5 1.56L18 34.38z"></path>
   </svg>`;
 
+const arrowExternal = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5858 3H17V9.41421L14.5 6.91421L8.70712 12.7071L7.29291 11.2929L13.0858 5.5L10.5858 3Z" fill="currentColor"></path><path d="M8 4H5C3.89543 4 3 4.89543 3 6V15C3 16.1046 3.89543 17 5 17H14C15.1046 17 16 16.1046 16 15V12H14V15H5V6H8V4Z" fill="currentColor"></path></svg>`;
+
 const error = `<svg
 width="20"
 height="20"
@@ -226,27 +238,6 @@ const group = `<svg
     />
   </svg>`;
 
-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>`;
-
 const svgs = /*#__PURE__*/Object.freeze({
   __proto__: null,
   twitter: twitter.twitter,
@@ -258,6 +249,7 @@ const svgs = /*#__PURE__*/Object.freeze({
   euSvg: eu.euSvg,
   arrowRight: arrowRight.arrowRight,
   arrowDiagonal: arrowDiagonalBlack.arrowDiagonal,
+  bookmark: bookmark.bookmark,
   chevronUp: chevronUp.chevronUp,
   chevronDown: chevronDown.chevronDown,
   chevronRight: chevronRight.chevronRight,
@@ -285,24 +277,33 @@ const svgs = /*#__PURE__*/Object.freeze({
   vLogoWhiteNoBg: logoWhiteNoBg.vLogoWhiteNoBg,
   vLogoMargins: logoColorMargins.vLogoMargins,
   menu: menu.menu,
+  minus: minus.minus,
   more: more.more,
   failed: failed,
   filter: filter,
   group: group,
+  plus: plus.plus,
+  paper: paper.paper,
+  privat: _private.privat,
+  pub: _public.pub,
+  portal: portal.portal,
   user: user.user,
+  upDonw: upAndDown.upDonw,
   search: search.search,
   success: success.success,
+  tutorial: tutotial.tutorial,
   warning: warning,
-  unknown: unknown,
+  unknown: unknown.unknown,
   thumbsUp: thumbsUp.thumbsUp,
   thumbsDown: thumbsDown.thumbsDown,
-  star: star.star
+  star: star.star,
+  external: arrowExternal
 });
 
-const edsSvgRepositoryCss = ":host,.full-width{display:block;width:100%}";
-const EdsSvgRepositoryStyle0 = edsSvgRepositoryCss;
+const svgRepositoryCss = ":host,.full-width{display:block;width:100%}";
+const SvgRepositoryStyle0 = svgRepositoryCss;
 
-const EdsSvgRepository = class {
+const SvgRepository = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
@@ -327,10 +328,10 @@ const EdsSvgRepository = class {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (index.h("div", { key: '8b10e6b478c9a2354f4cf418dacb33d5629585ac', class: "full-width" }, index.h("eds-table", { key: '04ea0a3bc8d72f42225290210aa0bda441e14b95', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (index.h("div", { key: 'f9b58e4ab1104753ef5e26fa70af162d9e5ddb1c', class: "full-width" }, index.h("eds-table", { key: 'fe21b6043cc0fc6f96cb8359f3e7ace75d3f4639', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
     }
     get hostEl() { return index.getElement(this); }
 };
-EdsSvgRepository.style = EdsSvgRepositoryStyle0;
+SvgRepository.style = SvgRepositoryStyle0;
 
-exports.eds_svg_repository = EdsSvgRepository;
+exports.svg_repository = SvgRepository;

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

@@ -214,14 +214,14 @@ const TokenList = class {
     renderSection(sectionName, sectionContent) {
         if (sectionName === 'tokens') {
             const groupedTokens = this.groupTokensByCategory(sectionContent);
-            return Object.entries(groupedTokens).map(([, tokens]) => (index.h("ul", { class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, tokens.map((token) => {
+            return Object.entries(groupedTokens).map(([, tokens]) => (index.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 (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, index.h("div", { class: "effect-height items-center justify-between p-16 hidden lg:flex", style: { backgroundColor: tokenValue } }, index.h("span", { class: `${textColorClass} f-body-02` }, tokenName), index.h("div", { class: "inline-flex" }, index.h("eds-code-block", { code: tokenValue, language: "hex", class: "min-w-[210px] mr-4" }), index.h("eds-code-block", { language: "css", code: `var(--${tokenName})`, class: "min-w-[210px]" }))), index.h("div", { class: "effect-height items-center justify-between p-16 block lg:hidden", style: { backgroundColor: tokenValue } }, index.h("span", { class: `${textColorClass} f-body-02` }, tokenName), index.h("div", { class: "inline block" }, index.h("eds-code-block", { code: tokenValue, class: "min-w-[210px] mb-4" }), index.h("eds-code-block", { code: `var(--${tokenName})`, class: "min-w-[210px]" })))));
             }))));
         }
-        return (index.h("ul", { class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(sectionContent).map(([key, value]) => {
+        return (index.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')
@@ -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: '3e1da1cf339496fb351d4ab2c6238ac389bccc10', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (index.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)));
     }
@@ -264,7 +264,7 @@ const TokenRadii = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: '16cab4ed90701a89fe7586cb29e85e01156a2f9a', class: "w-full mt-28" }, index.h("ul", { key: 'e997b51855eb94a8cda474ce537ab81c88938ca9', 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: '912af038957cf8b00443e72529d4929b7a508a0a', class: "w-full mt-28" }, index.h("ul", { key: 'ffffacd1e6006a05a27d5e1248ce626c36abc73e', class: "not-prose 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: '019be87dca82cd1edd392ef0758b8a2e37d09ff6', class: "w-full mt-28" }, index.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]) => (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: 'af8f66e30d9115f920d483c02d1f7c2b718589f9', class: "w-full mt-28" }, index.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]) => (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: '5e6ad389cf71ef5d70b7c4a92314b25ef7272f62', class: "w-full" }, index.h("eds-section-core", { key: '5dd2339752eddd0826987245e7b80edc64816a32', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, index.h("ul", { key: 'd71c41ed6a9d8f6b45c03fb8fa7070810f3fe6ba', 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: '595dc0d77e33bfb2109666d185933c9f5b23616e', class: "w-full" }, index.h("eds-section-core", { key: 'a3217b7808a1bc810ff0b158c4e6547bc2a77b06', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, index.h("ul", { key: '505f84a67b6eba8c33d1484c4cb0e94f4de68bc0', 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-typography.cjs.entry.js

@@ -207,7 +207,7 @@ const TokenTypography = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: '8a5867f30800adcc1e5ef9438f01b3a031110402', class: "w-full" }, index.h("ul", { key: 'd1fc83712676e6524bddc2e5d1bc50f0266b05eb', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (index.h("section", { key: 'b2e3951c7419dccdd31e446898a9ad126e36398e', class: "w-full" }, index.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]) => (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,
@@ -215,7 +215,7 @@ const TokenTypography = class {
                 fontSize: style.fontSize,
                 lineHeight: style.lineHeight,
                 letterSpacing: style.letterSpacing
-            } }, index.h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), index.h("div", { class: "mr-auto block lg:hidden p-4" }, index.h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), index.h("div", { class: "ml-auto" }, index.h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: [
+            } }, index.h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), index.h("div", { class: "mr-auto block lg:hidden p-4" }, index.h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), index.h("div", { class: "ml-auto" }, index.h("eds-code-block", { code: [
                 style.fontSize && `font-size: ${style.fontSize};`,
                 style.lineHeight && `line-height: ${style.lineHeight};`,
                 style.letterSpacing && `letter-spacing: ${style.letterSpacing};`,
@@ -223,7 +223,7 @@ const TokenTypography = class {
                 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" }), index.h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), index.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" }), index.h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `--var(--f-${typeKey}-letterSpacing)`, class: "min-w-[250px] mb-4" }), index.h("eds-code-block", { code: `--sans: Inter, Helvetica, Arial, sans-serif;`, class: "min-w-[250px] mb-4" }))))))))));
     }
 };
 

package/dist/cjs/tutotial-7855df3c.js

@@ -0,0 +1,29 @@
+'use strict';
+
+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>`;
+
+exports.tutorial = tutorial;

package/dist/cjs/unknown-6814e551.js

@@ -0,0 +1,24 @@
+'use strict';
+
+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>`;
+
+exports.unknown = unknown;

package/dist/cjs/up-and-down-d71df67d.js

@@ -0,0 +1,14 @@
+'use strict';
+
+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>`;
+
+exports.upDonw = upDonw;

package/dist/collection/collection-manifest.json

@@ -25,18 +25,29 @@
     "components/eds-icons/chevron/eds-icon-chevron-up/eds-icon-chevron-up.js",
     "components/eds-icons/eds-icon-arrow-diagonal/eds-icon-arrow-diagonal.js",
     "components/eds-icons/eds-icon-arrow-right/eds-icon-arrow-right.js",
+    "components/eds-icons/eds-icon-bookmark/eds-icon-bookmark.js",
     "components/eds-icons/eds-icon-close/eds-icon-close.js",
     "components/eds-icons/eds-icon-copy/eds-icon-copy.js",
     "components/eds-icons/eds-icon-eu/eds-icon-eu.js",
+    "components/eds-icons/eds-icon-external/eds-icon-external.js",
     "components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js",
     "components/eds-icons/eds-icon-loader/eds-icon-loader.js",
     "components/eds-icons/eds-icon-menu/eds-icon-menu.js",
+    "components/eds-icons/eds-icon-minus/eds-icon-minus.js",
     "components/eds-icons/eds-icon-more/eds-icon-more.js",
+    "components/eds-icons/eds-icon-paper/eds-icon-paper.js",
+    "components/eds-icons/eds-icon-plus/eds-icon-plus.js",
+    "components/eds-icons/eds-icon-portal/eds-icon-portal.js",
+    "components/eds-icons/eds-icon-private/eds-icon-private.js",
+    "components/eds-icons/eds-icon-public/eds-icon-public.js",
     "components/eds-icons/eds-icon-search/eds-icon-search.js",
     "components/eds-icons/eds-icon-star/eds-icon-star.js",
     "components/eds-icons/eds-icon-success/eds-icon-success.js",
     "components/eds-icons/eds-icon-thumbs-down/eds-icon-thumbs-down.js",
     "components/eds-icons/eds-icon-thumbs-up/eds-icon-thumbs-up.js",
+    "components/eds-icons/eds-icon-tutorial/eds-icon-tutorial.js",
+    "components/eds-icons/eds-icon-unknown/eds-icon-unknown.js",
+    "components/eds-icons/eds-icon-updown/eds-icon-updown.js",
     "components/eds-icons/eds-icon-user/eds-icon-user.js",
     "components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.js",
     "components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.js",
@@ -76,21 +87,21 @@
     "eds-docs-ui/colors/gradient-palette/support.js",
     "eds-docs-ui/colors/use-of-colors/correct-use-of-colors.js",
     "eds-docs-ui/colors/use-of-colors/incorrect-use-of-colors.js",
+    "eds-docs-ui/components-section/components-section.js",
+    "eds-docs-ui/design-tokens/docs-tokens/docs-tokens.js",
     "eds-docs-ui/design-tokens/token-list/token-list.js",
     "eds-docs-ui/design-tokens/token-radii/token-radii.js",
     "eds-docs-ui/design-tokens/token-ratios/token-ratios.js",
     "eds-docs-ui/design-tokens/token-shadows/token-shadows.js",
     "eds-docs-ui/design-tokens/token-spacing/token-spacing.js",
     "eds-docs-ui/design-tokens/token-typography/token-typography.js",
-    "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/docs-palettes/docs-palettes.js",
     "eds-docs-ui/logo/logo-space/logo-space.js",
     "eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.js",
     "eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js",
+    "eds-docs-ui/logo/logo-variations-tabs/logo-variations.js",
     "eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js",
+    "eds-docs-ui/svg-repository/svg-repository.js",
     "shared-ui/eds-cookies-preference/eds-cookies-preference.js",
     "shared-ui/eds-feedback/eds-feedback.js",
     "shared-ui/eds-footer/eds-footer.js",

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

@@ -49,6 +49,10 @@ menu {
     --breakout-container-outer-gutter: 0;
 }
 
+.break-words {
+    overflow-wrap: break-word;
+}
+
 .block {
     display: block;
 }
@@ -200,11 +204,9 @@ menu {
 .h-auto {
     height: auto;
 }
-
-.pt-20 {
-    padding-top: 1.25rem;
+.pt-4 {
+    padding-top: 0.25rem;
 }
-
 .overflow-hidden {
     overflow: hidden;
 }

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

@@ -86,7 +86,7 @@ export class EdsAccordion {
         return (h("div", { key: 'db04fa9db1f53e95a7ac758656b32e75281f5749', ref: (el) => (this.wrapperRef = el), class: `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' : ''}
-          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: 'ac468164b79b655e221f91863fbe515c5351d97f', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 pr-40" }, this.title), h("div", { key: '08ad0d2622719300b7d0a845f47a0cfa767929f4', class: "ml-auto" }, h("eds-button", { key: '6e14c820f3e565a392fa6739977cee89edcf3f5f', id: "toggleAccordion", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", 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: '2e5d7c323176958ad87ee6faeea74f07ca2462aa', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '49bd873208ba2fda4986c0dc3d1fe3804551a17f', id: "accordionSection", role: "region", "aria-labelledby": "accordionHeader", "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: '5eb6bcdef7a3a905f6c7443f8f134b7f54158252', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, h("span", { key: '58fb282ed326a640e5d4e2bdafc00caddbbfa761', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '2671b5610dd80c3d4da8249b95a9bd1dac3f9703' })))))));
+          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: 'a6fc54388e0eab3ddfb81dfb5907c55a1d6d40e1', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.title), h("div", { key: '96a1e4ae2849300e6cd3c737357a7e6e9a0439d5', class: "ml-auto" }, h("eds-button", { key: 'ca53eed446f9bc7a96182da9e9e3a45b1c63dba2', id: "toggleAccordion", intent: "tertiary", "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", 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: '2e1c52759fa07ecf63fed47f79c0384a79cd81c6', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '6ca819b2d9cb989f0942b98f32cd7243771b6ae9', id: "accordionSection", role: "region", "aria-labelledby": "accordionHeader", "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: 'aa33297747aca21c3b3ed33eb3eabc2998192aeb', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: 'af5b6e2218419a3c95e21e7e432696b073b7752b', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '2a9d1ef2d2537c831b28fbecb02a6125a1412019' })))))));
     }
     static get is() { return "eds-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -58,7 +58,7 @@ export const Default = {
         minHeightContent: true
     }
 };
-export const WithEdsAlert = {
+export const WithAlert = {
     render: (args) => `
     <eds-accordion
       title="${args.title}"

package/dist/collection/components/eds-icons/eds-icon-bookmark/eds-icon-bookmark.js

@@ -0,0 +1,36 @@
+import { bookmark } from "../../../../../../../../packages/svgs/src/index";
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsIconBookmark {
+    constructor() {
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: '9cc4aa1805e43ca6275305e26d2fff79e2818862', class: this.class, innerHTML: bookmark });
+    }
+    static get is() { return "eds-icon-bookmark"; }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional CSS classes to be applied to the icon for styling."
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-icons/eds-icon-close/eds-icon-close.js

@@ -8,7 +8,7 @@ export class EdsIconClose {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'cdc9ce68b682f85cd180461ec58ec0a402833941', class: this.class, innerHTML: close });
+        return h("span", { key: '95690e0a265a88172a33edfa456de45a9943578f', class: this.class, innerHTML: close });
     }
     static get is() { return "eds-icon-close"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-copy/eds-icon-copy.js

@@ -8,7 +8,7 @@ export class EdsIconCopy {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'cf0aeae1e95d6bf9fab75d9153b28395821bc41a', class: this.class, innerHTML: copy });
+        return h("span", { key: '2f2e67b6792ca2c4aa711526a3d69e7a9779e159', class: this.class, innerHTML: copy });
     }
     static get is() { return "eds-icon-copy"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-eu/eds-icon-eu.js

@@ -8,7 +8,7 @@ export class EdsIconEu {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b05d83668879b6f05e20bb569f98b5614b134594', class: this.class, innerHTML: euSvg });
+        return h("span", { key: '9758d733a6bdc751f059588ca8c3bc916f430968', class: this.class, innerHTML: euSvg });
     }
     static get is() { return "eds-icon-eu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-external/eds-icon-external.js

@@ -0,0 +1,36 @@
+import { arrowDiagonal } from "../../../../../../../../packages/svgs/src/index";
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsIconExternal {
+    constructor() {
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: '8b5169456f56b7294d86af4e75a9aeec20a20174', class: this.class, innerHTML: arrowDiagonal });
+    }
+    static get is() { return "eds-icon-external"; }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional CSS classes to be applied to the icon for styling."
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js

@@ -8,7 +8,7 @@ export class EdsIconGitlab {
         this.class = '';
     }
     render() {
-        return h("span", { key: '844a286865abb7d1cb0037126dda71edf53e05a3', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: '804e76ad1a00913b2e5ac695e43eeb33f1fd9727', class: this.class, innerHTML: gitlabBlack });
     }
     static get is() { return "eds-icon-gitlab"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-loader/eds-icon-loader.js

@@ -8,7 +8,7 @@ export class EdsIconLoader {
         this.class = '';
     }
     render() {
-        return h("span", { key: '00c35977290c38061fd73a30d4187d43efae102e', class: this.class, innerHTML: loader });
+        return h("span", { key: 'c7d6b2dae9717ba0e99a8ecb98e4f9b02c45be6d', class: this.class, innerHTML: loader });
     }
     static get is() { return "eds-icon-loader"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-menu/eds-icon-menu.js

@@ -8,7 +8,7 @@ export class EdsIconMenu {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd4c98e638eaa5cb15ff671d989fd40ae84f59b1a', class: this.class, innerHTML: menu });
+        return h("span", { key: '3fcbaa6aba76b06be9f4e72bf7c61a0c3fbae9fd', class: this.class, innerHTML: menu });
     }
     static get is() { return "eds-icon-menu"; }
     static get properties() {