@ebrains/components 2.3.1 → 2.4.1

package/dist/types/components.d.ts

@@ -8,12 +8,14 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
 import { Card } from "./components/eds-cards/eds-card-section/eds-card-section";
 import { Event, VNode } from "./stencil-public-runtime";
+import { SidebarItem } from "./components/eds-sidebar/eds-sidebar";
 import { Step } from "./components/eds-steps/eds-steps";
 import { Step as Step1 } from "./components/eds-steps-v2/eds-steps-v2";
 import { TableAction } from "./components/eds-table/eds-table";
 export { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
 export { Card } from "./components/eds-cards/eds-card-section/eds-card-section";
 export { Event, VNode } from "./stencil-public-runtime";
+export { SidebarItem } from "./components/eds-sidebar/eds-sidebar";
 export { Step } from "./components/eds-steps/eds-steps";
 export { Step as Step1 } from "./components/eds-steps-v2/eds-steps-v2";
 export { TableAction } from "./components/eds-table/eds-table";
@@ -210,7 +212,6 @@ export namespace Components {
           * The HTML element type for the button (e.g., 'button', 'a'). Default is 'button'.
          */
         "elementType": 'button' | 'a';
-        "extraClass"?: string;
         /**
           * The icon name to be displayed inside the button. Assumes a string for the icon name.
          */
@@ -1477,7 +1478,6 @@ export namespace Components {
           * Indicates whether the link points to an external URL. Defaults to false.
          */
         "external": boolean;
-        "extraClass"?: string;
         /**
           * If true, the label will be hidden on smaller screens.
          */
@@ -1764,6 +1764,28 @@ export namespace Components {
          */
         "withContainer": boolean;
     }
+    interface EdsSidebar {
+        /**
+          * Current active URL for routing
+         */
+        "activeUrl": string;
+        /**
+          * Enable/disable routing behavior
+         */
+        "enableRouting": boolean;
+        /**
+          * Sidebar items data structure Can be passed as JSON string in HTML or as object via JavaScript
+         */
+        "items": SidebarItem[] | string;
+        /**
+          * Maximum nesting level to display
+         */
+        "maxLevel": number;
+        /**
+          * Theme variant: 'default' or 'minimal'
+         */
+        "theme": 'default' | 'minimal' | 'ebrains';
+    }
     /**
      * Component representing a list of social network links for EBRAINS.
      * Each link directs users to EBRAINS' profiles on various social networks.
@@ -1807,92 +1829,70 @@ export namespace Components {
         "inverse": boolean;
     }
     interface EdsSteps {
-        /**
-          * Label for the **Back** button (linear mode).
-          * @default "Back"
-          * @attr back-label
-         */
         "backLabel": string;
         /**
-          * If `true`, disables **Next/Finish** and prevents advancing. Useful for gating progression until validation passes.
-          * @default false
-          * @attr disable-next
+          * Allow collapsing the active title (accordion-like) in **non-linear** vertical mode. Ignored in linear mode to prevent content hiding.
          */
-        "disableNext": boolean | boolean[];
+        "collapsibleTitles": boolean;
         /**
-          * Label for the **Finish** button on the **last step** (linear mode).
-          * @default "Finish"
-          * @attr finish-label
+          * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+          * @attr disable-next
          */
+        "disableNext": boolean | boolean[] | string;
         "finishLabel": string;
         /**
-          * Semantic heading tag used for each step title. Accepted values: `"h3" | "h4" | "h5"`.
-          * @default "h4"
-          * @attr heading-level
+          * Heading level for step titles.
          */
         "headingLevel": 'h3' | 'h4' | 'h5';
         /**
-          * Label for the **Next** button (linear mode).
-          * @default "Next"
-          * @attr next-label
+          * Labels
          */
         "nextLabel": string;
         /**
-          * Steps data as an **array** or **JSON string** of objects: `{ title: string; content?: string }`.  In static mode, all steps and their content render. In linear mode, only the active step renders its content.
-          * @default []
+          * Orientation (applies to linear mode visuals).
+         */
+        "orientation": 'vertical' | 'horizontal';
+        /**
+          * Steps data as array or JSON string.
          */
         "steps": string | Step[];
         /**
-          * Stepper mode. - `static`: all steps are visible (no navigation controls) - `linear`: one step at a time with Back/Next/Finish controls
-          * @default "static"
+          * Stepper mode.
          */
         "type": 'static' | 'linear';
     }
     interface EdsStepsV2 {
-        /**
-          * Label text for the "Back" button.
-         */
         "backLabel": string;
         /**
-          * If true, apply an inverse background to the container.
-         */
-        "bg": boolean;
-        /**
-          * If true, disables the "Next" button to block progression.
-         */
-        "disableNext": boolean;
-        /**
-          * Label text for the "Finish" button (last step in linear mode).
+          * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+          * @attr disable-next
          */
+        "disableNext": boolean | boolean[] | string;
         "finishLabel": string;
         /**
-          * Heading level to use for each step title.
-          * @default "h4"
+          * Heading level for titles
          */
         "headingLevel": 'h3' | 'h4' | 'h5';
         /**
-          * Optional image source to display above the steps.
+          * Optional illustration
          */
         "imageSrc"?: string;
-        /**
-          * Optional image width for the `eds-img` component.
-         */
         "imageWidth"?: number;
-        /**
-          * Optional message to display inside the placeholder if no image is provided.
-         */
         "message"?: string;
         /**
-          * Label text for the "Next" button.
+          * Labels
          */
         "nextLabel": string;
         /**
-          * JSON string or an array of step objects. Each object should have a `title` and optional `content` property.
+          * Orientation (applies to linear visuals)
+         */
+        "orientation": 'vertical' | 'horizontal';
+        /**
+          * JSON string or array of steps: { title, content? }
          */
         "steps": string | Step1[];
         /**
-          * The type of stepper: - `"static"`: shows all steps with their content. - `"linear"`: shows only one step at a time with navigation controls.
-          * @default "static"
+          * Stepper mode
          */
         "type": 'static' | 'linear';
     }
@@ -1962,6 +1962,14 @@ export namespace Components {
           * Enable or disable search input for filtering
          */
         "searchEnabled": boolean;
+        /**
+          * Enable or disable column sorting
+         */
+        "sortingEnabled": boolean;
+        /**
+          * Theme for table styling - 'default' or 'color' for alternating row colors
+         */
+        "theme": 'default' | 'color';
     }
     /**
      * `EdsTabs` is a tabs component that renders a navigational tab bar.
@@ -2165,6 +2173,10 @@ export interface EdsRatingCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsRatingElement;
 }
+export interface EdsSidebarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEdsSidebarElement;
+}
 export interface EdsSplashScreenCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsSplashScreenElement;
@@ -3171,6 +3183,23 @@ declare global {
         prototype: HTMLEdsSectionHeadingElement;
         new (): HTMLEdsSectionHeadingElement;
     };
+    interface HTMLEdsSidebarElementEventMap {
+        "sidebar": string;
+    }
+    interface HTMLEdsSidebarElement extends Components.EdsSidebar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLEdsSidebarElementEventMap>(type: K, listener: (this: HTMLEdsSidebarElement, ev: EdsSidebarCustomEvent<HTMLEdsSidebarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLEdsSidebarElementEventMap>(type: K, listener: (this: HTMLEdsSidebarElement, ev: EdsSidebarCustomEvent<HTMLEdsSidebarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLEdsSidebarElement: {
+        prototype: HTMLEdsSidebarElement;
+        new (): HTMLEdsSidebarElement;
+    };
     /**
      * Component representing a list of social network links for EBRAINS.
      * Each link directs users to EBRAINS' profiles on various social networks.
@@ -3572,6 +3601,7 @@ declare global {
         "eds-rating": HTMLEdsRatingElement;
         "eds-section-core": HTMLEdsSectionCoreElement;
         "eds-section-heading": HTMLEdsSectionHeadingElement;
+        "eds-sidebar": HTMLEdsSidebarElement;
         "eds-social-networks": HTMLEdsSocialNetworksElement;
         "eds-spinner": HTMLEdsSpinnerElement;
         "eds-splash-screen": HTMLEdsSplashScreenElement;
@@ -3806,7 +3836,6 @@ declare namespace LocalJSX {
           * The HTML element type for the button (e.g., 'button', 'a'). Default is 'button'.
          */
         "elementType"?: 'button' | 'a';
-        "extraClass"?: string;
         /**
           * The icon name to be displayed inside the button. Assumes a string for the icon name.
          */
@@ -5130,7 +5159,6 @@ declare namespace LocalJSX {
           * Indicates whether the link points to an external URL. Defaults to false.
          */
         "external"?: boolean;
-        "extraClass"?: string;
         /**
           * If true, the label will be hidden on smaller screens.
          */
@@ -5412,6 +5440,32 @@ declare namespace LocalJSX {
          */
         "withContainer"?: boolean;
     }
+    interface EdsSidebar {
+        /**
+          * Current active URL for routing
+         */
+        "activeUrl"?: string;
+        /**
+          * Enable/disable routing behavior
+         */
+        "enableRouting"?: boolean;
+        /**
+          * Sidebar items data structure Can be passed as JSON string in HTML or as object via JavaScript
+         */
+        "items"?: SidebarItem[] | string;
+        /**
+          * Maximum nesting level to display
+         */
+        "maxLevel"?: number;
+        /**
+          * Event emitted when the routing is changed.
+         */
+        "onSidebar"?: (event: EdsSidebarCustomEvent<string>) => void;
+        /**
+          * Theme variant: 'default' or 'minimal'
+         */
+        "theme"?: 'default' | 'minimal' | 'ebrains';
+    }
     /**
      * Component representing a list of social network links for EBRAINS.
      * Each link directs users to EBRAINS' profiles on various social networks.
@@ -5459,135 +5513,90 @@ declare namespace LocalJSX {
         "onSplash"?: (event: EdsSplashScreenCustomEvent<{ type: 'hidden'; message: string } | { type: 'error'; message: string }>) => void;
     }
     interface EdsSteps {
-        /**
-          * Label for the **Back** button (linear mode).
-          * @default "Back"
-          * @attr back-label
-         */
         "backLabel"?: string;
         /**
-          * If `true`, disables **Next/Finish** and prevents advancing. Useful for gating progression until validation passes.
-          * @default false
-          * @attr disable-next
+          * Allow collapsing the active title (accordion-like) in **non-linear** vertical mode. Ignored in linear mode to prevent content hiding.
          */
-        "disableNext"?: boolean | boolean[];
+        "collapsibleTitles"?: boolean;
         /**
-          * Label for the **Finish** button on the **last step** (linear mode).
-          * @default "Finish"
-          * @attr finish-label
+          * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+          * @attr disable-next
          */
+        "disableNext"?: boolean | boolean[] | string;
         "finishLabel"?: string;
         /**
-          * Semantic heading tag used for each step title. Accepted values: `"h3" | "h4" | "h5"`.
-          * @default "h4"
-          * @attr heading-level
+          * Heading level for step titles.
          */
         "headingLevel"?: 'h3' | 'h4' | 'h5';
         /**
-          * Label for the **Next** button (linear mode).
-          * @default "Next"
-          * @attr next-label
+          * Labels
          */
         "nextLabel"?: string;
-        /**
-          * Fired when the user clicks **Back** (before going back), with the **target** step index (current - 1).
-          * @event back
-         */
         "onBack"?: (event: EdsStepsCustomEvent<number>) => void;
-        /**
-          * Fired when the user clicks **Finish** on the **last** step.
-          * @event finished
-         */
         "onFinished"?: (event: EdsStepsCustomEvent<void>) => void;
-        /**
-          * Fired when the user clicks **Next** (before advancing), with the **target** step index (current + 1).
-          * @event next
-         */
         "onNext"?: (event: EdsStepsCustomEvent<number>) => void;
+        "onStep"?: (event: EdsStepsCustomEvent<number>) => void;
         /**
-          * Fired whenever the active step changes. Payload: the **current step index**.
-          * @event step
+          * Orientation (applies to linear mode visuals).
          */
-        "onStep"?: (event: EdsStepsCustomEvent<number>) => void;
+        "orientation"?: 'vertical' | 'horizontal';
         /**
-          * Steps data as an **array** or **JSON string** of objects: `{ title: string; content?: string }`.  In static mode, all steps and their content render. In linear mode, only the active step renders its content.
-          * @default []
+          * Steps data as array or JSON string.
          */
         "steps"?: string | Step[];
         /**
-          * Stepper mode. - `static`: all steps are visible (no navigation controls) - `linear`: one step at a time with Back/Next/Finish controls
-          * @default "static"
+          * Stepper mode.
          */
         "type"?: 'static' | 'linear';
     }
     interface EdsStepsV2 {
-        /**
-          * Label text for the "Back" button.
-         */
         "backLabel"?: string;
         /**
-          * If true, apply an inverse background to the container.
-         */
-        "bg"?: boolean;
-        /**
-          * If true, disables the "Next" button to block progression.
-         */
-        "disableNext"?: boolean;
-        /**
-          * Label text for the "Finish" button (last step in linear mode).
+          * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+          * @attr disable-next
          */
+        "disableNext"?: boolean | boolean[] | string;
         "finishLabel"?: string;
         /**
-          * Heading level to use for each step title.
-          * @default "h4"
+          * Heading level for titles
          */
         "headingLevel"?: 'h3' | 'h4' | 'h5';
         /**
-          * Optional image source to display above the steps.
+          * Optional illustration
          */
         "imageSrc"?: string;
-        /**
-          * Optional image width for the `eds-img` component.
-         */
         "imageWidth"?: number;
-        /**
-          * Optional message to display inside the placeholder if no image is provided.
-         */
         "message"?: string;
         /**
-          * Label text for the "Next" button.
+          * Labels
          */
         "nextLabel"?: string;
         /**
-          * Emitted when the "Back" button is clicked.
-          * @event back
-          * @payload {number} The target step index.
+          * Fired before going back, with the target step index.
          */
         "onBack"?: (event: EdsStepsV2CustomEvent<number>) => void;
         /**
-          * Emitted when the "Finish" button is clicked (last step in linear mode).
-          * @event finished
+          * Fired when user clicks Finish on the last step.
          */
         "onFinished"?: (event: EdsStepsV2CustomEvent<void>) => void;
         /**
-          * Emitted when the "Next" button is clicked.
-          * @event next
-          * @payload {number} The target step index.
+          * Fired before advancing, with the target step index.
          */
         "onNext"?: (event: EdsStepsV2CustomEvent<number>) => void;
         /**
-          * Emitted when the active step changes.
-          * @event step
-          * @payload {number} The index of the new active step.
+          * Fired whenever the active step changes. Payload: current step index.
          */
         "onStep"?: (event: EdsStepsV2CustomEvent<number>) => void;
         /**
-          * JSON string or an array of step objects. Each object should have a `title` and optional `content` property.
+          * Orientation (applies to linear visuals)
+         */
+        "orientation"?: 'vertical' | 'horizontal';
+        /**
+          * JSON string or array of steps: { title, content? }
          */
         "steps"?: string | Step1[];
         /**
-          * The type of stepper: - `"static"`: shows all steps with their content. - `"linear"`: shows only one step at a time with navigation controls.
-          * @default "static"
+          * Stepper mode
          */
         "type"?: 'static' | 'linear';
     }
@@ -5665,6 +5674,14 @@ declare namespace LocalJSX {
           * Enable or disable search input for filtering
          */
         "searchEnabled"?: boolean;
+        /**
+          * Enable or disable column sorting
+         */
+        "sortingEnabled"?: boolean;
+        /**
+          * Theme for table styling - 'default' or 'color' for alternating row colors
+         */
+        "theme"?: 'default' | 'color';
     }
     /**
      * `EdsTabs` is a tabs component that renders a navigational tab bar.
@@ -5904,6 +5921,7 @@ declare namespace LocalJSX {
         "eds-rating": EdsRating;
         "eds-section-core": EdsSectionCore;
         "eds-section-heading": EdsSectionHeading;
+        "eds-sidebar": EdsSidebar;
         "eds-social-networks": EdsSocialNetworks;
         "eds-spinner": EdsSpinner;
         "eds-splash-screen": EdsSplashScreen;
@@ -6245,6 +6263,7 @@ declare module "@stencil/core" {
             "eds-rating": LocalJSX.EdsRating & JSXBase.HTMLAttributes<HTMLEdsRatingElement>;
             "eds-section-core": LocalJSX.EdsSectionCore & JSXBase.HTMLAttributes<HTMLEdsSectionCoreElement>;
             "eds-section-heading": LocalJSX.EdsSectionHeading & JSXBase.HTMLAttributes<HTMLEdsSectionHeadingElement>;
+            "eds-sidebar": LocalJSX.EdsSidebar & JSXBase.HTMLAttributes<HTMLEdsSidebarElement>;
             /**
              * Component representing a list of social network links for EBRAINS.
              * Each link directs users to EBRAINS' profiles on various social networks.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/components/p-004801b2.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{s as c}from"./p-e2d5a487.js";const a=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"c5831907f350c7aa0a0029c69bcb5e8fcd51d221",class:this.class,innerHTML:c})}};export{a as eds_icon_star}

package/dist/components/p-02648f82.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{g as t}from"./p-50e27321.js";const a=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"ac1b505068670dc7cb5953b515f768586a79d6a3",class:this.class,innerHTML:t})}};export{a as eds_icon_gitlab}

package/dist/components/p-09f1b358.entry.js

@@ -1 +0,0 @@
-import{r as a,h as e}from"./p-271c61ff.js";const s=class{constructor(e){a(this,e),this.accent=!1,this.tags=[]}render(){return e("div",{key:"dc4a5cdabd7ab34e3c2c67b9a166ae8bc15a9861",class:"flex flex-wrap gap-y-4"},this.tags.map(((a,s)=>e("eds-tag",{key:s,intent:this.accent?"accent":"default",label:a}))))}};s.style=".flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-y-4{row-gap:0.25rem}";export{s as eds_card_tags}

package/dist/components/p-0ec9dcf5.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{a as e}from"./p-32e6c4df.js";const o=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"4dd5fc5be465494e8546404231cfdb63609e64f1",class:this.class,innerHTML:e})}};export{o as eds_icon_arrow_diagonal}

package/dist/components/p-0fb8511d.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{b as a}from"./p-52c28fa2.js";const t=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"9a7b52f2a2006bd83418d6b4bb2834bffa79305c",class:this.class,innerHTML:a})}};export{t as eds_icon_bin}

package/dist/components/p-127870d7.entry.js

@@ -1 +0,0 @@
-import{r as s,h as c}from"./p-271c61ff.js";import{m as a}from"./p-5ab1d64a.js";const r=class{constructor(c){s(this,c),this.class=""}render(){return c("span",{key:"780be04fc40f5ac361cc7cce4694c9f624ab4a0a",class:this.class,innerHTML:a})}};export{r as eds_icon_mastodon}

package/dist/components/p-12e153fb.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{m as c}from"./p-86bb73dc.js";const e=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"4c399e259be9fcce197e0735c42dd5fa76daa220",class:this.class,innerHTML:c})}};export{e as eds_icon_minus}

package/dist/components/p-1f80e708.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{p as c}from"./p-024c7937.js";const a=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"f8ff53678e0a06d505ac6f19ca79808597a2ef34",class:this.class,innerHTML:c})}};export{a as eds_icon_public}

package/dist/components/p-21b5ca1f.entry.js

@@ -1 +0,0 @@
-import{r as e,h as c}from"./p-271c61ff.js";const o=class{constructor(c){e(this,c),this.isAuthenticated=!1}componentWillLoad(){const e=new Promise((e=>{document.addEventListener("initKeycloak",(c=>{e(c.detail)}),{once:!0})})),c=new Promise((e=>{document.addEventListener("authStatusChanged",(c=>{var o;this.isAuthenticated=null===(o=c.detail)||void 0===o?void 0:o.authenticated,e(c.detail)}),{once:!0})}));this.combinedInitPromise=Promise.all([e,c])}render(){return c("div",{key:"814465ac49c8f5688bc8b1006723a531c925c030"},c("eds-splash-screen",{key:"578982c4b01714129ebf0e7c415bdacea10061f8",inverse:!0,initPromise:this.combinedInitPromise}),c("eds-login",{key:"abc4ef7fed629bc2eda0e2f14f5165b83851794d","keycloak-url":"http://localhost:8080","keycloak-realm":"nigeor-realm","keycloak-client-id":"stencil-app"}),c("main",{key:"1fb96900889c942ec0beb120e1ed869a9d78c6fa"},c("h1",null,this.isAuthenticated?"Welcome, authenticated user!":"Please log in.")))}};export{o as eds_app_root}

package/dist/components/p-2bfcb3cf.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{d as e}from"./p-454bdd5a.js";const d=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"0defed3e15ba10e6e62cf35d0540901ec1dd2485",class:this.class,innerHTML:e})}};export{d as eds_icon_draft}

package/dist/components/p-2efa0ba6.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{l as a}from"./p-2117611b.js";const o=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"3a9bd685a48bd253613d94a0755e3011144b69a8",class:this.class,innerHTML:a})}};export{o as eds_icon_loader}

package/dist/components/p-33a639b5.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{u as c}from"./p-d962849c.js";const n=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"3784c70a29511c1ef0cab2460186fdb396630df7",class:this.class,innerHTML:c})}};export{n as eds_icon_unknown}

package/dist/components/p-36b17bf2.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{t}from"./p-ba720bf3.js";const a=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"accd4312433f1e6e3e1a4833fa12388b9c6ca544",class:this.class,innerHTML:t})}};export{a as eds_icon_thumbs_down}

package/dist/components/p-3c478e74.entry.js

@@ -1 +0,0 @@
-import{r as s,h as e}from"./p-271c61ff.js";import{b as r}from"./p-81899237.js";const t=class{constructor(e){s(this,e),this.class=""}render(){return e("span",{key:"4f21c5659e92ea08e1f464d23e351fbfef6e347d",class:this.class,innerHTML:r})}};export{t as eds_icon_bluesky}

package/dist/components/p-447e436c.entry.js

@@ -1 +0,0 @@
-import{h as e,r as n}from"./p-271c61ff.js";const t=()=>e("div",{class:"static-content container"},e("h2",null,"Load the module"),e("p",null,"Integrating the EBRAINS UI Components to a project ",e("b",null,"with or without a JavaScript framework")," is straight forward. If you’re working on a simple HTML page, you can start using the components immediately by adding the tags below to the ",e("code",null,"head"),"."),e("eds-code-block",{code:"<script type='module'>\n  import { defineCustomElements } from 'https://unpkg.com/@ebrains/components@latest/loader/index.js'; \n  // Define custom elements\n  defineCustomElements(window);\n<\/script>",language:"javascript","copy-label":"Copy Code"}),e("p",null,"This snippet is part of the Stencil component loader system. Under the hood, it does the following:"),e("eds-steps",{steps:[{title:"Import the Loader Module",content:"The script imports the defineCustomElements function from the Stencil-generated loader module hosted at a CDN. This module contains the registration logic for all your custom components."},{title:"Register Custom Elements",content:"Calling defineCustomElements(window) loops through the available components and registers each one with the browser using customElements.define(). This makes your custom elements available in the DOM."},{title:"Lazy Loading in Action",content:"Although all components are registered on startup, their implementation code is lazy-loaded. This means a component's code is only fetched when it is first used, optimizing the initial load time."},{title:"Optimized Performance",content:"By registering components early and lazy-loading their implementations, the script helps maintain a fast startup while ensuring that all custom elements are ready for use when needed."}]}),e("p",null,"Once included, components can be used in your markup like any other regular HTML elements:"),e("eds-code-block",{code:'<eds-button label="my bytton" intent="primary"></eds-button>',language:"html","copy-label":"Copy Code"}),e("h2",null,"Load the variables and styles"),e("p",null,"To directly use only the produced variables (colors, breakpoints, typography) add the tag below to the"," ",e("code",null,"head"),". This approach is recommended when you’re working solely with the web components and want minimal integration. That said, the components are configured to require only these CSS variables and nothing more."),e("eds-code-block",{code:'<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>',language:"css","copy-label":"Copy Code"}),e("p",null,"To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the"," ",e("code",null,"head"),". Use this when you want quick access to ready-made utilities for building your own components or applications and you do not wish to dive deep to css configurations."),e("eds-code-block",{code:'<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>',language:"css","copy-label":"Copy Code"}),e("p",null,"Note that, loading either the variables or the predefined CSS framework above,"," ",e("b",null,"automatically loads the fonts so you can skip loading them separately"),".")),s=()=>e("div",null,e("p",null,"Before proceeding, ensure that Node.js is installed on your machine—you can download the latest version from the official website. If your project doesn’t 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."),e("div",{class:"my-8"},e("eds-code-block",{code:"npm install @ebrains/components",language:"html","copy-label":"Copy Code"})),e("div",{class:"my-8"},e("eds-code-block",{code:"npm install @ebrains/react",language:"html","copy-label":"Copy Code"})),e("div",{class:"my-8"},e("eds-code-block",{code:"npm install @ebrains/vue",language:"html","copy-label":"Copy Code"})),e("div",{class:"my-8"},e("eds-code-block",{code:"npm install @ebrains/angular",language:"html","copy-label":"Copy Code"})),e("div",{class:"my-8"},e("eds-code-block",{code:"npm install @ebrains/assets",language:"html","copy-label":"Copy Code"})),e("div",{class:"my-8"},e("eds-code-block",{code:"npm install @ebrains/svgs",language:"html","copy-label":"Copy Code"}))),o=()=>e("div",null,e("h2",null,"React Wrappers"),e("p",null,"To use the EBRAINS web components in a React Application, simple install the package below and check out the examples"),e("eds-code-block",{code:"npm install @ebrains/react",language:"javascript","copy-label":"Copy Code"}),e("eds-section-core",{"section-title":"Example React App","heading-level":"h3"},e("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."),e("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"}))),a=()=>e("div",null,e("h2",null,"Vue Wrappers"),e("p",null,"To use the EBRAINS web components in a Vue Application, simple install the package below and check out the examples."),e("eds-code-block",{code:"npm install @ebrains/vue",language:"javascript","copy-label":"Copy Code"}),e("h2",null,"Passing Properties to Custom Elements Using the ",e("b",null,".prop")," Modifier in Vue Wrappers"),e("p",null,"When using Vue wrappers for Stencil components (or any custom elements), you might encounter issues with property names being altered due to HTML’s attribute handling. By default, Vue binds values as HTML attributes, and HTML attributes are case-insensitive. This means that camelCase property names can be transformed into lowercase strings, which can prevent your component from receiving the correct data."),e("h3",null,"How to Use the ",e("b",null,".prop")," Modifier"),e("p",null,"When using Vue wrappers, you can pass properties with the .prop modifier by adding it to your binding expression. Here’s an example of how to do it:"),e("div",{class:"my-8"},e("eds-alert",{message:"This may lead to issues because Vue binds these as attributes .",intent:"error"})),e("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"}),e("div",{class:"my-8"},e("eds-alert",{message:"Use the .prop modifier to ensure properties are passed correctly.",intent:"default"})),e("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"}),e("p",null,"Using the ",e("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."),e("eds-section-core",{"section-title":"Example Vue App","heading-level":"h3"},e("eds-code-block",{code:'\n<template>\n  <div>\n    <EdsHeader></EdsHeader>\n    \x3c!-- render the splash until we manually hide it --\x3e\n    <EdsSplashScreen inverse="false" />\n\n    \x3c!-- then show main UI --\x3e\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"}))),l=()=>e("div",null,e("h2",null,"Angular Wrappers"),e("p",null,"To use the EBRAINS web components in an Angular Application, simple install the package below and check out the examples. The Angular Stencil output type used for this package = `standalone`."),e("eds-code-block",{code:"npm install @ebrains/angular",language:"javascript","copy-label":"Copy Code"}),e("p",null,"Install the components dependency as this important for the angular package to work properly."),e("eds-code-block",{code:"npm install @ebrains/components",language:"javascript","copy-label":"Copy Code"}),e("p",null,"Define the custom elements"),e("eds-code-block",{code:"import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();",language:"javascript","copy-label":"Copy Code"}),e("eds-section-core",{"section-title":"Example Angular App","heading-level":"h3"},e("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"}))),i=class{constructor(e){n(this,e),this.tabIndex=void 0}renderContent(){switch(this.tabIndex){case 0:return e(t,null);case 1:return e(s,null);case 2:return e(o,null);case 3:return e(a,null);case 4:return e(l,null);default:return e("p",null,"Content not available.")}}render(){return e("div",{key:"7c35270931bb242311baaa8b2d45f15135f72410",class:"container"},this.renderContent())}};export{i as components_section}

package/dist/components/p-4995b8b2.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{p as a}from"./p-b73410de.js";const e=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"a2fd252b8b3050636aeae7308d69ddcaf2d54a4e",class:this.class,innerHTML:a})}};export{e as eds_icon_paper}

package/dist/components/p-53343ea1.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{m as c}from"./p-29041952.js";const e=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"6eae5aa60d60601dcdacf6fcf1f40be87cd3f869",class:this.class,innerHTML:c})}};export{e as eds_icon_more}

package/dist/components/p-56447243.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as i,g as r}from"./p-271c61ff.js";const n=class{constructor(i){e(this,i),this.cookies=t(this,"cookies",7),this.backToTop=()=>{window.scrollTo({top:0,behavior:"smooth"})},this.social=!1,this.enableScrollTop=!1,this.fundedBy="EBRAINS is funded by the Horizon Europe Framework Programme.",this.rightsReserved=`${(new Date).getFullYear()} EBRAINS. All rights reserved.`,this.cookiesPreferences="Cookies preferences",this.enableCookiesSettings=!1,this.backToTopAriaLabel="Back to Top",this.showMatomoNotice=!1}componentDidLoad(){var e;this.backBtn=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector("#toTop")}handleScroll(){if(!this.backBtn)return;const e=window.scrollY>100&&document.body.scrollHeight>window.innerHeight;this.backBtn.style.opacity=e?"1":"0",this.backBtn.style.pointerEvents=e?"auto":"none";const t=this.backBtn.querySelector("eds-button");t&&(t.removeAttribute("aria-hidden"),t.setAttribute("tabindex",e?"0":"-1"))}toggleCookiesConsent(){this.cookies.emit("toggle")}render(){const e=(new Date).getFullYear(),t=this.rightsReserved||`${e} EBRAINS. All rights reserved.`;return i("footer",{key:"b1c8481183fb67cb8b0a97c4ecb56cbd68b8d5f2"},this.social?i("div",{class:"border-softest border-t-2 pt-20 md:pt-28"},i("div",{class:"container pb-20"},i("div",{class:"grid-layout"},i("div",{class:"grid-col-span-12 lg:grid-col-span-5"},i("eds-social-networks",{class:"mt-28"}))))):null,i("div",{key:"bfe4a641c968c7c8db656eb15ae4b20994f289f9",class:`border-softest ${this.social?"border-t-2":""} pb-28 pt-20 md:pt-28`},i("div",{key:"5a65394e8899cf62ac1bed4ac363bee86f9f17ad",class:"container flex items-center gap-20 lg:flex-nowrap"},i("div",{key:"00163d1e6c4f1021997b910935859a8bb97c18ba",class:"flex items-center gap-x-12"},i("a",{key:"12cc17423f3988f3f98b9ba9d5ce4a18a486021b",target:"_blank",rel:"noopener noreferrer",class:"effect-focus focus-visible:rounded-xs flex w-[54px] ml-0",href:"https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en","aria-label":"Learn about Horizon Europe funding"},i("eds-img",{key:"2448154fd301959d09ae0d4a2bc575ebddef0646",width:54,height:41,src:"https://www.ebrains.eu/flags/4x3/eu.svg",alt:"European Union Flag"}))),i("div",{key:"640d25df8ad2a7d5271c22b979a6198f6f7aa2aa"},i("div",{key:"6a4256e03d37e93b41bbc5f22db44fcf56f35548",class:"f-ui-04 text-light"},i("p",{key:"d2227c0d2f297a995006aa810d889e679f1ef1e2"},this.fundedBy),i("div",{key:"d3a56fc0695308fe5547109fb735e64bc4297b5e",class:"mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block"},i("span",{key:"5f0a5db7ea735b373fc6106b6fc8f4bc25ba6f27",class:"effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4"},"© ",t),this.enableCookiesSettings?i("eds-link",{label:this.cookiesPreferences,intent:"underline","extra-class":"f-ui-04",onClick:()=>{this.toggleCookiesConsent()}}):null))),i("div",{key:"e853a0ee1b2d3e4627ccc4b80aba566a9c7a2350",class:"ml-auto pl-12"},this.enableScrollTop?i("div",{id:"toTop",class:"transition-all transition duration-75 opacity-0"},i("eds-button",{id:"backToTop","aria-label":this.backToTopAriaLabel,intent:"ghostInverse",icon:"chevron-up",onClick:this.backToTop,tabindex:"-1"})):null))))}get el(){return r(this)}};n.style="p{margin:0}.cursor-pointer{cursor:pointer}.ml-4{margin-left:0.25rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-darker{background-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.border-t-2{border-top-width:2px}.pt-20{padding-top:1.25rem}.pb-28{padding-bottom:1.75rem}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.mt-28{margin-top:1.75rem}.gap-y-12{row-gap:0.75rem}.gap-x-12{-moz-column-gap:0.75rem;column-gap:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:1.25rem}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.focus-visible\\:rounded-xs:focus-visible{border-radius:4px}.flex{display:flex}.w-\\[54px\\]{width:54px}.ml-0{margin-left:0rem}.order-last{order:9999}.w-full{width:100%}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.mt-4{margin-top:0.25rem}.mr-4{margin-right:0.25rem}.gap-12{gap:0.75rem}.inline-block{display:inline-block}.\\!no-underline{text-decoration-line:none !important}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.hover\\:\\!underline:hover{text-decoration-line:underline !important}.ml-auto{margin-left:auto}.pl-12{padding-left:0.75rem}.opacity-0{opacity:0}@media (min-width: 750px){.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:mt-0{margin-top:0rem}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:order-none{order:0}.lg\\:w-auto{width:auto}}@media (min-width: 1024px){.xl\\:pb-40{padding-bottom:2.5rem}}";export{n as eds_footer}

package/dist/components/p-56cc4a15.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{b as a}from"./p-05754401.js";const o=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"48b2e81ac7f597b50d13a7a0a753894ac18022cd",class:this.class,innerHTML:a})}};export{o as eds_icon_bookmark}

package/dist/components/p-5ddcec77.entry.js

@@ -1 +0,0 @@
-import{r as s,h as e}from"./p-271c61ff.js";import{c as r}from"./p-ece618b3.js";const c=class{constructor(e){s(this,e),this.class=""}render(){return e("span",{key:"8847183f6f31439d94f87a24ee01697babe53ecf",class:this.class,innerHTML:r})}};export{c as eds_icon_chevron_left}

package/dist/components/p-5e8142ed.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-271c61ff.js";import{p as e}from"./p-694fc085.js";const c=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"eb2ac14ec0564bc1a1133ae099b4e49dffde5f92",class:this.class,innerHTML:e})}};export{c as eds_icon_private}

package/dist/components/p-70f5e9f5.entry.js

@@ -1 +0,0 @@
-import{r as s,h as c}from"./p-271c61ff.js";import{t as r}from"./p-7198c024.js";const t=class{constructor(c){s(this,c),this.class=""}render(){return c("span",{key:"1ad94bbcfc46e1e69f89162ccd0a5c5c0eda3245",class:this.class,innerHTML:r})}};export{t as eds_icon_tutorial}

package/dist/components/p-714445de.entry.js

@@ -1 +0,0 @@
-import{r as s,h as d}from"./p-271c61ff.js";import{d as r}from"./p-0da7d1c9.js";const e=class{constructor(d){s(this,d),this.class=""}render(){return d("span",{key:"b2b380a299ee2b9941613ddddc3d67b2db4ce57e",class:this.class,innerHTML:r})}};export{e as eds_icon_download}

package/dist/components/p-7436a99a.entry.js

@@ -1 +0,0 @@
-import{r as s,h as c}from"./p-271c61ff.js";import{c as r}from"./p-4eb2cf7f.js";const a=class{constructor(c){s(this,c),this.class=""}render(){return c("span",{key:"faa232cc2d703f00cbda76fb9c152773a032ded2",class:this.class,innerHTML:r})}};export{a as eds_icon_clone}

package/dist/components/p-772d6ca9.entry.js

@@ -1 +0,0 @@
-import{r as e,h as a}from"./p-271c61ff.js";const c=class{constructor(a){e(this,a)}render(){return a("div",{key:"e6d23c9b0eecdbb9551da827e84b536c237c3fa2",class:"w-full"},a("ul",{key:"f8c8ea13fd5f36050858e813f3300c12c9ed8a93",class:"not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"},a("li",{key:"9473a1f844d1d6e4cfd2aaf6e8ec8587ebbc8f46",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"86f5d11b9f24a78c2d000a487402ea203663472d",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"2aa3f316b2a8b9f75403bc148f1e0f2c5b008760",class:"spacing-sample m-16 bg-strong"},a("span",{key:"178bcea91ee96b6ba7d7f35d3129ba0365103a51",class:"f-body-01 text-inverse"},"Margin: 1rem / m-16")))),a("li",{key:"3bea85f0dabe95c77f1f7efa20868e05dbe8ac29",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"5500ec5a1b8a408ace5f6b74a09af135953508b9",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"4fe620bb9f4e246aac4093a3bceeb504a91f7347",class:"spacing-sample ml-64 bg-strong"},a("span",{key:"8043e928ce06e7eb4f9a980523b85bc1aeacce23",class:"f-body-01 text-inverse"},"Margin Left: 4rem / ml-64")))),a("li",{key:"3909330218202d18909ece6bb6c24209cdf89737",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"eddaed5ba95dcff41b807123719b86a2e109f199",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"9d4ab0bce204ed45ec8a35079213a3663dff2e70",class:"spacing-sample mt-32 bg-strong"},a("span",{key:"95a3e2eddf9d5b5659ee455de56815e83c873d22",class:"f-body-01 text-inverse"},"Margin Top: 2rem / mt-32")))),a("li",{key:"3dfe973b5081f9c209386a0b090703c5d9ee9286",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"a82ec5b68b327c2d6c73109170babaa42866a7bb",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"bf446dc3468e554be2419cd4f86a9e015f36e027",class:"spacing-sample p-32 bg-strong"},a("span",{key:"5569dc17bfd58e125651fa8bb7ff3c510e5a11c8",class:"f-body-01 text-inverse"},"Padding: 2rem / p-32")))),a("li",{key:"2bd50606ad35620c512c764008e1ebae74b7eb5a",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"6d3172e3d9db2aca2d44112795e030cbe8764327",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"7abece54dfbf26fa0f441079192e3de3d1924897",class:"spacing-sample pt-32 bg-strong"},a("span",{key:"dce98a63280c8b9e8a691074e7727a02c8683290",class:"f-body-01 text-inverse"},"Padding Top: 2rem / pt-32")))),a("li",{key:"2330aed59c3748951cd1b99bec3324554b81f51b",class:"grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"},a("div",{key:"f17b856f30a3ddaabc9d7dcc4438cde42f49956d",class:"container p-8 item-center border-2 border-soft"},a("div",{key:"fb0907d427077e137a878adcb54b1e9b0cdf368e",class:"spacing-sample pl-32 bg-strong"},a("span",{key:"e5f919cc44e91ce7eb887bc0419f998039c95fa6",class:"f-body-01 text-inverse"},"Padding Left: 2rem / pl-32"))))))}};export{c as token_spacing}