@ebrains/components 3.0.0 → 3.2.0

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

@@ -2,26 +2,48 @@ export default {
     title: 'Components/Toast',
     component: 'eds-toast',
     argTypes: {
+        variant: {
+            control: 'select',
+            options: ['toast', 'banner'],
+            description: 'Visual variant: compact "toast" pill (default) or rich inline "banner".'
+        },
         message: {
             control: 'text',
-            description: 'The main message or text to be displayed in the toast.'
+            description: 'The main message. In the banner variant this is the mono sub-line.'
+        },
+        heading: {
+            control: 'text',
+            description: 'Bold heading shown above the message. Banner variant only.'
         },
         intent: {
             control: 'select',
-            options: ['default', 'success', 'error', 'warning', 'brand'],
-            description: 'The visual intent or style of the toast.'
+            options: ['default', 'neutral', 'info', 'success', 'error', 'warning', 'brand', 'brandInverse'],
+            description: 'The visual intent / tone.'
+        },
+        icon: {
+            control: 'text',
+            description: 'Leading icon name (banner variant). Falls back to a per-intent default when omitted.'
+        },
+        dismissible: {
+            control: 'boolean',
+            description: 'Show a dismiss (×) button even without a duration.'
         },
         duration: {
             control: 'number',
-            description: 'The duration before the toast auto-dismisses (in milliseconds).'
+            description: 'Auto-dismiss delay in ms. When set, a close button is shown.'
         }
     },
     args: {
+        variant: 'toast',
         message: 'This is a toast message.',
+        heading: '',
         intent: 'default',
+        icon: '',
+        dismissible: false,
         duration: 5000
     }
 };
+/* ── Classic toast (unchanged) ────────────────────────────────────────────── */
 export const Default = {
     render: (args) => `
       <eds-toast
@@ -49,7 +71,7 @@ export const Brand = {
         duration: 5000
     }
 };
-export const AllVariants = {
+export const AllToastIntents = {
     render: () => `
     <div style="display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;">
       <eds-toast message="Default notification" intent="default" duration="0"></eds-toast>
@@ -60,3 +82,78 @@ export const AllVariants = {
     </div>
   `
 };
+/* ── Banner variant ───────────────────────────────────────────────────────── */
+export const Banner = {
+    render: (args) => `
+      <eds-toast
+        variant="banner"
+        intent="${args.intent}"
+        heading="${args.heading}"
+        message="${args.message}"
+        ${args.icon ? `icon="${args.icon}"` : ''}
+        ${args.dismissible ? 'dismissible="true"' : ''}>
+      </eds-toast>
+    `,
+    args: {
+        variant: 'banner',
+        intent: 'warning',
+        heading: 'Closing soon',
+        message: 'This form closes in 2 days.',
+        icon: 'time',
+        dismissible: true
+    }
+};
+export const BannerClosed = {
+    name: 'Banner · Closed (error)',
+    render: () => `
+      <eds-toast
+        variant="banner"
+        intent="error"
+        icon="warning"
+        heading="This form has closed"
+        message="Closed on Jul 1, 2026. Submissions are no longer accepted.">
+      </eds-toast>
+    `
+};
+export const BannerClosingSoon = {
+    name: 'Banner · Closing soon (warning, dismissible)',
+    render: () => `
+      <eds-toast
+        variant="banner"
+        intent="warning"
+        icon="time"
+        dismissible="true"
+        heading="Closing soon"
+        message="This form closes in 2 days.">
+      </eds-toast>
+    `
+};
+export const BannerWithActions = {
+    name: 'Banner · Saved draft (brand, actions slot)',
+    render: () => `
+      <eds-toast
+        variant="banner"
+        intent="brand"
+        icon="resultDraft"
+        heading="You have a saved draft"
+        message="Last edited 4h ago · 17% complete">
+        <div slot="actions" style="display:flex; align-items:center; gap:16px;">
+          <a role="button" tabindex="0" style="font-size:13px; color:#5a5f5c; cursor:pointer; text-decoration:none;">Discard</a>
+          <eds-button label="Resume" intent="brand" size="small" pill="true" icon="arrow-right"></eds-button>
+        </div>
+      </eds-toast>
+    `
+};
+export const AllBanners = {
+    name: 'Banner · All intents',
+    render: () => `
+    <div style="display:flex; flex-direction:column; gap:1rem; max-width:640px;">
+      <eds-toast variant="banner" intent="brand"   icon="resultDraft" heading="You have a saved draft" message="Last edited 4h ago · 17% complete"></eds-toast>
+      <eds-toast variant="banner" intent="info"     heading="Heads up" message="Your progress is saved automatically."></eds-toast>
+      <eds-toast variant="banner" intent="success"  icon="checkmark" heading="Submitted" message="Your response was recorded."></eds-toast>
+      <eds-toast variant="banner" intent="warning"  icon="time" dismissible="true" heading="Closing soon" message="This form closes in 2 days."></eds-toast>
+      <eds-toast variant="banner" intent="error"    icon="warning" heading="This form has closed" message="Submissions are no longer accepted."></eds-toast>
+      <eds-toast variant="banner" intent="neutral"  heading="Note" message="Neutral, uncoloured tone."></eds-toast>
+    </div>
+  `
+};

package/dist/collection/components/eds-toast-manager/eds-toast-manager.js

@@ -31,7 +31,7 @@ export class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: 'd707822f33892171428aa926822dff5ffefac219', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: 'bd01d186b0fa0dc2d44c169dfd2634cdcf80e906', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     static get is() { return "eds-toast-manager"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class EdsTooltip {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: '240956acf8218cb0b36254aecd629058ad39f4eb', class: "relative w-full inline-block group" }, h("slot", { key: '4424c8de31fd4e2aa702369314cf0819447ca364' }), h("div", { key: 'f260ef6ee9700231dc77ddc9debc7f5b92f546c6', class: `absolute ${positionClass}
+        return (h("div", { key: '70fac9a2e9d60c2dd24961d162c5230dcf5d6232', class: "relative w-full inline-block group" }, h("slot", { key: '02e4f975a0b23905883663f773a221c747906a11' }), h("div", { key: 'cff74243e3b7bd0111bb0e6023367ac88b50c379', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
             z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out

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

@@ -19,7 +19,13 @@ export const Default = {
     render: (args) => html `
     <div class="mt-32">
       <eds-tooltip content="${args.content}" position="${args.position}">
-        <eds-button label="Hover over me" intent="primary" size="large" aria-label="Hover over me"></eds-button>
+        <eds-button
+          label="Hover over me"
+          intent="brand"
+          pill="true"
+          size="large"
+          aria-label="Hover over me"
+        ></eds-button>
       </eds-tooltip>
     </div>
   `,

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

@@ -14,7 +14,6 @@ export class EdsUser {
         this.intent = 'ghost';
         this.dropdownLabel = 'Account';
         this.expanded = false;
-        this.shortMode = false;
     }
     /**
      * Helper getter to ensure we work with a User object.
@@ -31,7 +30,6 @@ export class EdsUser {
         }
         return this.user;
     }
-    async componentWillLoad() { }
     get initials() {
         var _a, _b, _c, _d;
         const user = this.parsedUser;
@@ -46,7 +44,7 @@ export class EdsUser {
     render() {
         const user = this.parsedUser;
         //const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
-        return (h("div", { key: 'd23f741600ca86103642bfe17058e8e966ed00e0', class: "block" }, h("div", { key: 'cf73f261fdd219f236a93b4162656ef3178ca419', class: "flex items-center" }, h("eds-dropdown", { key: 'c69a3c95348c765d893aa01d5631d122de428970', ref: (el) => (this.dropdownEl = el), intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "user", label: this.dropdownLabel, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: 'f142afdf77953f791ca0478af862934d0904dabb', class: "min-w-[280px] p-8" }, h("div", { key: '7ee37a9f2175e626c278071a409a5c26f4331c8a', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: '7248877a0579d8d15dec94b994af5150c9dbf2c2', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: '1766fb5e2613b434c8de825c90141b4f95be00e1', class: "max-w-full" }, user.name && h("p", { key: 'd36907607f575eeb5425c1f2e32e91034fad6dde', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '73e02010d3d54151252903071bbe30168ea7d64a', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'eb522e6c95f15ef0584c7a90c20bb815ccc5d1a1', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: 'c4284f4dba1964a949380aa0154419e3215daac4', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '6476e03cf61ad7517e9742e67b44b9c917d9f329' })))))));
+        return (h("div", { key: '680e43b28d6f449f1bc527a205bc8cb1593c2e3b', class: "block" }, h("div", { key: '472e128751bbd16584d2c17a0f05de9ce39b3618', class: "flex items-center" }, h("eds-dropdown", { key: 'b8e77167f98bcc07280a440ab8c086ab72650866', ref: (el) => (this.dropdownEl = el), intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "user", label: this.dropdownLabel, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: 'd55809a0ab5387f867d27669198c7e9bfc206383', class: "min-w-[280px] p-8" }, h("div", { key: 'e703e71577d4d1e78664fa807de67551483069c1', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: '7672f9a4f84bc13ab079a7e6185eff87aa15a1f7', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: 'ac9e6e17465d52a247b289224ce3ea473989c1ee', class: "max-w-full" }, user.name && h("p", { key: 'caab9568a17e0bbc68c418f070b93ae6f21fad21', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '0ba0fbec86e6600ee4eb0e0827a78e7292808ab1', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'a3f8870af9bdd001cf5e894b71f8403bff639608', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: 'd230d82178d53043406e26f264c3fe26d7a87211', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '5d28ca2126fbd735560e6034ea1c24e225bf2ee5' })))))));
     }
     static get is() { return "eds-user"; }
     static get encapsulation() { return "shadow"; }
@@ -129,8 +127,7 @@ export class EdsUser {
     }
     static get states() {
         return {
-            "expanded": {},
-            "shortMode": {}
+            "expanded": {}
         };
     }
     static get methods() {

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

@@ -5,6 +5,10 @@ export default {
         user: {
             control: 'object',
             description: 'User object containing authentication information'
+        },
+        dropdownLabel: {
+            control: 'text',
+            description: 'Trigger label next to the user icon. Apps ship it empty (icon-only trigger); the component default is "Account".'
         }
     },
     args: {
@@ -14,7 +18,9 @@ export default {
             preferred_username: 'johndoe',
             name: 'John Doe',
             email: 'john.doe@example.com'
-        }
+        },
+        // Mirror real app usage (App.vue passes dropdown-label=""): icon-only.
+        dropdownLabel: ''
     }
 };
 export const Default = {
@@ -24,7 +30,7 @@ export const Default = {
         container.innerHTML = `
         <eds-header>
           <div class="px-16" slot="actions">
-            <eds-user></eds-user>
+            <eds-user dropdown-label="${args.dropdownLabel}"></eds-user>
           </div>
         </eds-header>
       `;
@@ -32,14 +38,5 @@ export const Default = {
         const edsUser = container.querySelector('eds-user');
         edsUser.user = args.user;
         return container;
-    },
-    args: {
-        user: {
-            given_name: 'John',
-            family_name: 'Doe',
-            preferred_username: 'johndoe',
-            name: 'John Doe',
-            email: 'john.doe@example.com'
-        }
     }
 };

package/dist/collection/eds-docs-ui/colors/color-palette/primary.js

@@ -33,7 +33,7 @@ export class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '8e734cf4a60694d3f9e3b8418cda0b5ae2b53c0c', 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))))))));
+        return (h("ul", { key: '8358291e8f5aa8791abe4cd701ccb2d4ed6d7175', 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))))))));
     }
     static get is() { return "color-primary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/color-palette/secondary.js

@@ -58,7 +58,7 @@ export class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (h("ul", { key: '5ed603d55cb6903a0dcfa620ae51a729a61cc883', 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))))))));
+        return (h("ul", { key: '52cbd3ddc78dd2a33c695bee28b9458636709dc2', 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))))))));
     }
     static get is() { return "color-secondary-palette"; }
     static get properties() {

package/dist/collection/eds-docs-ui/colors/color-palette/support.js

@@ -58,7 +58,7 @@ export class ColorSupportPalette {
         return 'text-default';
     }
     render() {
-        return (h("ul", { key: '44b71e2df44c8c9d5a5ba570d25050a09566bf3f', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+        return (h("ul", { key: '9e6c8c637680b5159548a3ac78ca69041d172e42', 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)))));

package/dist/collection/eds-docs-ui/colors/gradient-palette/primary.js

@@ -33,7 +33,7 @@ export class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '258789470870c2782879bbf43ee7320b7c20278c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '3b0f811693a70082d267a916bcbd2be0e7226e94', 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))))))));
     }

package/dist/collection/eds-docs-ui/colors/gradient-palette/secondary.js

@@ -57,19 +57,19 @@ export class GradientSecondaryPalette {
         ];
     }
     render() {
-        return (h("div", { key: '69225b7fdfb7caca0f969c9f8443e5feae1e5049' }, h("ul", { key: '191050a4e4062a36abbe3dcbd341e42cf1bbc729', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '1983fa3f61c360c114d0219701e31cb986864b75', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '9f578c04f4bdb27ad92300ee3607f07332798798', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("div", { key: '55954a3c8ed2d1ded3844fbab0c5c98f7562bd4d' }, h("ul", { key: 'ee33d6686f73a91f77ee7e1ad8932b86d116f0e1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '969b34615646cfe815f11534a54e512ff9abcd5d', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'd4d2700591ab1cfea36e8d2d06a28f0cad4367b0', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, h("div", { key: '46d3cab1cb3dd781fb0b10a7e2a475a335d3a14b', class: "grid" }, h("span", { key: '20c96e39bb215773e97152fc6232b40c35369492', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'bf5eefcd1e597bd459367dde6435337fca6790bb', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '439f646e2f45512485a0e871340fe1c0d99af31d', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'ff06a5814e4d7a677ea695640235df7f1b09c685', class: "grid" }, h("span", { key: '1f2329355cde34ce8de0db364588a9210414a63f', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: 'ce99a877251340fa0fe40cf1a9449c180f3d4f4a', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'aeff17cba43d8048125b7934c9359183b98c94e5', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '8d8b8299c58871baea7eff4fab2844828117ef8c', class: "grid" }, h("span", { key: 'e1f34c4f267598e1eb0985d4d7b617e42e2fa5fd', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '0be1a29db0bb4406b77f518725342328996a900f', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'af6fd66bfbafc1db14b5e805d6d04a48f944b5eb', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '808f2034ac8bc48606a63b6b3a2b4f4da8b8d77c', class: "grid" }, h("span", { key: '7920838708d98113eda841e6b83534afac6346b6', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '4144490f054eb1d80c0008fcb01bcc7274a5a1f2', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: '6e524575f1f6bb753223f4a91e3aa9a5d244183a', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, h("div", { key: '4dbe74c2a516f22ef522d95fa3fb0c5815207a3c', class: "grid" }, h("span", { key: '22867c70b47939d9f9b30078c6873486eef8a03d', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '0510a917d4b4bc373d6a259cef421c20e6fef0cc', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '649226a0e9dc4825c3f009ac1b2044b68b55a80b', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '70d71385d6f5fa63e64831f31b3ca5c5b15a059f', class: "grid" }, h("span", { key: 'e31cb3e8d926d12dfb59c60e236458311867bd83', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: 'f36f4f08dc044852213b42dfde6e106a1b85c982', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '40c2cdbce85fe5233a167f2133082877ed46fe8a' }), h("ul", { key: '6c0ef5e7552351757cf0f419bf1b254cca6f9121', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd7b26c790d754d5ba55b3c02f601718c07b2c54a', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '24c753409e5b67d70212ea6a39850b4355ced584', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '0464ed0bddfe36aec3e6b2df236bf320c7509881', class: "grid" }, h("span", { key: '6691afb081acbf9406e52457f7cbf29ed1a39443', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '4e51865950984835e15e99dc99a42febf89d90ab', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '36bab658fecf69caa0c9537597a3cc6b0ca5bb60', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '55c28465b04f7d927f557b281ae7910c7e72cd27', class: "grid" }, h("span", { key: '23df59a17b7b0aef5b3856ae0646b57eaf182de3', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: 'b1c66632ffc7a8fc744d860d290b05a58a643b07', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '1885cfb28019b3fb2a5ab3542f045ac0850ef350' }), h("ul", { key: 'c30a76ff0d2245893943f13f1893671e5c4f19ff', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'b83b8b81d235daaa96010bdf2163bb0ee9f4c298', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'c4ba97bcefa96d1fc18f9dceda5b9d03c9243768', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '058568211b7fe1f9318ca17df97b54e06ae0ea5d', class: "grid" }, h("span", { key: '082e7edbbc979c8481e4c87471d5217fecd70325', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '1d7f777eeeae24bba34af35a328cfca5be2d6ab8', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '2226100dd044fe6cb53652f6384a6b1eff1cf20b', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '33f9d85cffdd0f83b9caf87805dd18eae875a76d', class: "grid" }, h("span", { key: '6637f361a11e185af2953435c93a76799e6fda05', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '749318eac8b7f37e1da1302bcbd17f93f0af344d', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '9d3b781a726649c0accc613cb697d01bb42c5e32', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'f9afe9bced7e90c769e89125cdda71466d09dad9', class: "grid" }, h("span", { key: '609fc9699aa5d08c32f859a415d900781846f41b', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '529d2beb8cd06e19a23849832d05faf025587743', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '8afbc63abcf2d9149fcd35665c31a9542df8242d', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '5c29b392b41dadc2dfe232e7863cf0c2f004f198', class: "grid" }, h("span", { key: '0cb9f0a85b34d945741ac1e9453ad07fc6843e25', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'aa20e1fe79e2f527aa467e0a6be3aa792fa5b141', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'e0adb4b4b02e9871ca7257e840c82fa9359654b5', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: 'a6b623c79282ce86a61e729057900ecbb5a68168', class: "grid" }, h("span", { key: 'f6eb8b41c30a9acf4f71f23c4f5dc63475792874', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'f0606ad3c6c4676d2899052e33f6c4441953cf6d', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'c910b8bfbe955617edcdaeea4fa3e3398c134b18', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a33a31c3d55d5490eb48800f921408dc48e046d5', class: "grid" }, h("span", { key: 'd74a10f52e474e9db505461bb53c44c9e12405ee', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '01ca7c9b8cf3dd0d3b3f3159a426f6f4f0840c5f', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '8d19ffae79f0d6c800d1ab6f303d978b2d0c6ae3' }), h("ul", { key: '508b78eda27c872d411df1b6c9f9bd8ece25b4ee', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '69ec343591e60f178e5c9a8742495739f489c8f5', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '8b142eaf31a4456fad672dbb8c60076e2c4ddfc5', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '62039bb0fc41220d7ea29c7b3134e94171e4b023', class: "grid" }, h("span", { key: 'c1679b75a0c63a35b886d9170114c307245c642c', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'de1c7ad0012fafd231671a2bb0ec86bcf90ae12e', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'c68180939d5f82e3606efea5f757be8c3b03a009', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'fcf4161319341b53b4b231cad28fb70758c0dd94', class: "grid" }, h("span", { key: '3eab8efd130f25708f694e775aa7ac36c943df50', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'b420abe12d8f5d2dfa39a51501316c5231c88d6c', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: 'f61e6b39b1e177214da443d951c5585554a06270' }), h("ul", { key: '749276ac2097b23d654da7a99de04032857d9785', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'caa5fc807aa92b8969a41545ab05cb3b3adc69c6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '6be2aecc15bae9efa645b2d41ac8c3741787201b', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, h("div", { key: 'bf5f0cf2b9ef7c9a4814fa6f423cb4b9434878c3', class: "grid" }, h("span", { key: '074772116344b8e4e4283e448a67de07019fc807', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'f963109c62079dd8dd85fb82eae94ece0170d8fd', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'c2e79bf856562f0830ea6fe651ec774644d64f08', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd08a0628c64b87da7e8714b75e2c380228ea6144', class: "grid" }, h("span", { key: '79bfd7870adbc66d77770dd59d63f1e368fc3d32', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '88d5fce43c419d06b0d1a7c5196ca2cb7c2e4171', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '36b4521488bd73d13f2e666b899e50df1537eb81', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'b47db3efc1d07f92d93f8efaaeb83f1924c5cb87', class: "grid" }, h("span", { key: '9cb73763d0f6b3650c9e0364ddd173d83726272f', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '9f9b556fe1826ea1094032f470061dfd3468985d', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'ffa2fccdef2ac4360e4d92e068a3b790d4a0459a', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '7ebf088b7ffd31da2edc33be16da19595354b6e8', class: "grid" }, h("span", { key: 'd5b485ad41e9c35d6d52fd28be92f31080d41dbc', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '80d76b4944c48e6ac7f0bbd2eb05d5ecf427e8bc', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '1e6c989cc32c59497f3eaa330e099c51c92e0056', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, h("div", { key: 'c94304a7f235b4ba472a07004773424d8a90c222', class: "grid" }, h("span", { key: 'b1b47cc470037312522f3de03c8249870dda6703', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '665d8aa39800f35bf04f04912ff18f6599f27735', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '4c09ed9f92d05ee3918d8f67b429989ae512d561', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '3500216d692f134a3a02426adf62e32bbf49d776', class: "grid" }, h("span", { key: 'eff3cd5a7e07a2a8d51db3471389ecdc0ffc4d83', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: 'e34aae1a29feadb849ae0e4ffa5037e716f67777', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, h("div", { key: '5ccc68d4f200bd755b3bccec8f67c0cb5471ac27', class: "grid" }, h("span", { key: 'b5f71a9d4e8de4eec9f88765feeb39087b48dd1b', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '9f6a9886a899b3a37addc9bf312ae7e10b999866', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: 'ae01dbf19c98571240867c52cf68a8fdebe24c5f', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'dab594140bb31548e9ebae53bb525ab93691c086', class: "grid" }, h("span", { key: '088f126b8b288c0f2475c13a3aa85e5a22ef4728', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '853fad90eafd82e6381eaad65e5efb7a68362474', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
     static get is() { return "gradient-secondary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/gradient-palette/support.js

@@ -49,11 +49,11 @@ export class GradientSupportPalette {
         ];
     }
     render() {
-        return (h("ul", { key: 'b2a9b236f4d09ceef5bda9568b2210ce5f244a35', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6527094bbfe9ae9b3d07107e06ad25639a5a9102', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'fd97b352fd25574a076855b168e9a86dd12450a5', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '1ecf065df68a1038dfb3d98e4f3b6c1de65bc08e', class: "grid" }, h("span", { key: '8768cb503ab0a21870428ed166f8e25f45072a3f', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'd2ca5585cb8e58941c1e24e3b92d24c113042f4b', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '179d621b1f7355241aba0332d8cb261300cc313b', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '2857e7fe056cd77b613697fcd0a71b6904d7f522', class: "grid" }, h("span", { key: '37fb181e166357e3a735a3b28cec42c04fa307d0', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '2df6d62a1f29d5815a910c3a1d69137a72d38837', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: 'b8f91e3c53126c2eaf8b4055754acbb40ff5641a', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '37f55d6e6af310b057b6c76011f995377e8479b4', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '2310de38c6deed34dde453039d22c3295c3515a0', class: "grid" }, h("span", { key: '3cf79727b544d93d73e58b257f73864bf928d301', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'd1f2e667b2e49c39b5c58a63a995aeedd4e8b659', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '6dfbad0e7a87977d9ad4eb3d6732c2582f66000d', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9e5a372a3a1b72ad7ef8e7658fc5ee328ee4ebc6', class: "grid" }, h("span", { key: '1b808be8fc77c51983ef4c43e8a3f0dc47b46006', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'ccabc7f2ddc85de55fb3b099b0b95b2030baa818', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '2831236d472040166824309e964608560f8935d8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '8471b5023d94083d8118f9c452b35d0c1c173662', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("ul", { key: '2bc6d57d63ae18aa162ed8a66f3ca270720fcf63', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '5a96685deaaceb7ab166b022748b78d569c4b0ae', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '931d9f72eb8ac4d19f80b4e2f1a7d97b8df34841', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '62d6fb428628a3bd416ee470debd176fef9d8fc7', class: "grid" }, h("span", { key: '4bda9dd2bd7fe1d6023a7de77c90dfc30e352089', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '8ae8f17c22b7235baad34fc595040d9d51f07a43', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'af14dfaa87fb6de3b528da4ecc3d3226c16c2c89', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '5f9040d0cf3768a602e9c3ef4605f3f957551251', class: "grid" }, h("span", { key: '4db5920188fe1916ab1f1998623fc7f4913f6972', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '52402b3e615f2f674b6faef8c7a3a2ed15f1aad3', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '78a2b0b368946e40be43063cab0450843cac701c', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'd720a4a85437cbd0ab36ac89e150042b15cd6cf6', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '1ab1dce596f2dc0ebfd4bbddf4f0831c37d9460c', class: "grid" }, h("span", { key: '40ac839dd4933379ff391009155f35c682ae7927', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'cf8df47df9313c06f98b156f082848a6a33d88c2', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '0ce5f69e74ce7b357f07f54e04df564b28687c4b', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'b2c3989b94876f2418e20528542e35316b86365e', class: "grid" }, h("span", { key: 'b2308e2721ab016eb788444c420c8667eb76e652', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'e587289f3b254a8d6ddc80bdc5806d7dc9220011', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '3da665043c0d50b3ca6019dcc1a7dc9286b5d375', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'dc1a6f96c760f5f8a3c08997d3b54aac9d9888b8', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '7c1251b8075a6d67b82e88e038ed772e292e0742', class: "grid" }, h("span", { key: '55793b301d204f7d5996f85ae5ad003d61930f5f', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'a5eab2850d8a5e41ec043cd3b506a2f536f20820', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'b7642a477a00c4f811b4cc36f36458179802211b', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '791c7d3c9d83c82848805efe96d6567dbcf2579a', class: "grid" }, h("span", { key: '3d46cbb0ccce0f1554d19c33aa4fb0a92d24381f', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '68ce16ea65d735d9025729b5cbffa173a2b9e07a', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'ee9efa5eec6d06a960619eb84de06703df3a4358', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '03a1133bd3081865b579ec9e2b6b05253d31b03a', class: "grid" }, h("span", { key: '7a29e5ffbe13527b4f624143ca1ed55a5a0bd5b7', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'd7087945fa2a7a42b8b3bd84eb63f9049da7dc82', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'cff25a4ed5ab919ba63ac52a0c6c61ab06029f41', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '0fa42c934995f16a76c0c4b17ac057187d1ee516', class: "grid" }, h("span", { key: '4e3a8c38cd60088275ca874d50b181f81f70aab2', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'aeb9282692211a5708fdda19c4e4397c256fa981', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '34f8ba04679de87eb1fe64270a3355d4730953f7', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: 'a1033cf5a07c5adae91f6968ef0d74ea910ff02e', class: "grid" }, h("span", { key: 'e5d58be01a90c281fa701d022b24807a3b1a8404', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '7bef9018db3e4997997124f6f3d697ecf614531e', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'c95ed9f2caf0a75b34e6cc1ca3d4afa12f163b35', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1ab575c669e9fb41388df03fe029c4dc63c167b0', class: "grid" }, h("span", { key: '58c31b1b22572eb897f7e5a2d82135b92505eae3', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'ca75da8134fd83a86150fd6dbcdde73a2561c453', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '700df92ad4634107b94e19ae2dd21b04909393b6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '9038289a89c119a695fcd3a0eb6d174f13a33591', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '73a8b1f9955f52c8e83aff7f85d269af13206cfa', class: "grid" }, h("span", { key: 'd7cd4652abb1e85f1751149c4be6ba5fc13c6da5', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'b38ed95e45e80e3ce59edff465293a9d9f42ab37', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '72ffcc7e26b91aaa5315738d902e3becbade6759', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '856966a786985018be9151aaef0442456056ca88', class: "grid" }, h("span", { key: '6baa9c0a4a587055b85940d846369086bc688075', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '578fbcd62e8ca8d6cd6d43891540451724133f6e', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, h("div", { key: '0d9d115feb671ea6a37f3679925f4de6748ef69c', class: "grid" }, h("span", { key: 'b6bb3e244a141000c880c9de1ff7fa13b8173a93', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'db6b6a1506829dcd5becb9793e3393f6f189efc3', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '965fe2bfc65134f2c41c91c93ad7a6268e76b334', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '0139cb83f5cd3d2350721eef750d4069ccfe25c6', class: "grid" }, h("span", { key: '4da26735fc80c68461954fe9ed80ea23aedd4e59', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '58cb3656d60250f39536aacafd0b5587d34b8561', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '6ba0e69f38d17ac5c815ad080e0a47c29579e2d8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '40c29529b7ad63c3206533af0a5025d5426a612d', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '054d8e9939f7ee072a639323df5c0c883144ff8e', class: "grid" }, h("span", { key: 'dac5d5b64277aab4e0caafd0e5e4baf1509975fe', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '8a93ed0436d2a27eda72c9f2a66014bc7c23bea8', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '5945fdf834b30dce6975ee39a32916a85cd671f4', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '6cb3c7e3e7a54ba48b3108b7733cfd8ac2ca9b73', class: "grid" }, h("span", { key: 'fe085679e7c4c948d99c0dfefd8b82d361160534', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: 'db516be172480131e88ee1a32a1e9d4b799960ee', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
     static get is() { return "gradient-support-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/use-of-colors/correct-use-of-colors.js

@@ -60,7 +60,7 @@ const red = [
  */
 export class CorrectUseOfColors {
     render() {
-        return (h("div", { key: '6f2e0d05692813eeb9f7edb52508efd608763908', class: "container" }, h("p", { key: '78ab9fe995f873ae56b734550fb96d5cfcc94ecf', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '2dd1a95794b4e72c5fc54079b69ef48108fca4ac', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'db85859e08c5faa38cc8e04d9e7602486cac1921', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'bbd0f8a9de6ab6d1ad08d79af9695ebee46568c4', class: "flex" }, h("div", { key: '12fe2d6fa1f349e6431a6484e50b637f3a9539cf', class: "w-full" }, h("ul", { key: '8750fcdacb4a408d1003153ef24c1aa1eb266d50', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '899c5ac4127fdab0c26a619e5ba9e9abad682b84', class: "w-full" }, h("ul", { key: '20324cb5001311ad3ff9dc138e2d7dfd4779a071', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '8d9cf6a12252c3ab51779365467d9b5b8eda2aac', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '01fb910b11041bb7b9891edf0546ad6d48a1c59d', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '0e16590a0ea3dd612c386ec8144d34c46d9cc239', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '409db013f54872918a046349932ffb03cbd5c7c8', class: "flex" }, h("div", { key: '7a4caa407edcf4778769b087e14f1d7725d49541', class: "w-full" }, h("ul", { key: '04a87008d35495235219096d6cee25c5b79c047a', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '42412cb3ccd6019262724d160208c9c74ab0be87', class: "w-full" }, h("ul", { key: '832b788f29badaf0e6b498b743400e98b3d62336', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '7d5710b21829f9a98d11d9328528391bb35b9b5b', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'afd01b3fbd6ba01f2e6f66c99a8d69e31a21bf1a', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '560b790073d516e3a48217454d2926eb8e7619ae', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '81ec29cd9873c62aa9afffecc9f39ada4535452a', class: "flex" }, h("div", { key: '358baaafe6def20de75387af5bac0cb69cb53daf', class: "w-full" }, h("ul", { key: '338913f0d10c724834a9bf9102ebff0159ad4b42', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'baf990dd3cf2c6587e312e07b93b00e975608268', class: "w-full" }, h("ul", { key: '60bb4363163e3d10eb61388a8f505d1da2027598', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: 'e607f95714c66a02cc8d7e336f2b0731bfeb916f', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '82b699d19d01e11eeea3c13d8e817d12c32ee4ca', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '54f9a3e1e6b7629ace882a50f971e88d983e66d2', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'bf1a294c09474031d042153d402e9fe84907d0f5', class: "flex" }, h("div", { key: '5ec457417cf7a123aabd28e822d437e2706c228f', class: "w-full" }, h("ul", { key: 'ee50fe6ddf736682fb69838f53875b88cd22507d', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '50fcc531966b131ec36acbf396e1676ea988d1ba', class: "w-full" }, h("ul", { key: '01fa6bca1248df187df894f419ff77efe24bf426', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: 'afddc656b9217a2df98181fe7be846c779486efb', class: "container" }, h("p", { key: '995cb777ef605d3cfb4a1fa8a8acf538a0522b74', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '5a14a5ea05e8b8bd58f2182594f4061986a9bfb0', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '22b9d164e0b5d22a82813b22e00258b051fb5291', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '1bd417ab605d072d6c87b5fcb708a475b06c0b4d', class: "flex" }, h("div", { key: 'e43e1e84710ac1fd52d7b9cc0deebd0c4d5a7e2e', class: "w-full" }, h("ul", { key: '18a5a63c7beace0bd6ecf0fe315f227162d10483', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'f3055c180b296dfb59863a754ffe6a06d726a6ff', class: "w-full" }, h("ul", { key: 'd341ddade09efdcc9d1af3964f9026a9707fbe0e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: 'af0b4403b93fffceea6ea1e5f06967b598028a99', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '8ea91d6f8a9924da6a7f9bca61c127565aad9007', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '50febc4ea15b0fa627d33d95ffc7095ac2d6c4ff', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '808176e6142ebf50f8f0b0202af6f3ef9af7a3b8', class: "flex" }, h("div", { key: '6d848442a7c7bcde5ef10c56ae3ab6d34e5cadc6', class: "w-full" }, h("ul", { key: '32578cc459e343292790a3ff842bed8ae807dd82', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'e12a82ccea09771605f012eadd6e84c34b26f185', class: "w-full" }, h("ul", { key: 'f1ee5355e9f21f53289c2d5849e72dcd5a8d7031', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '26077e0df6ae891c93681a7958f9edb20eaa818f', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '14cb5e7a55efaedeff39f32cfa15745ee1182a68', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '0b05ada6b2a2791508aa7acb74f3b9df083fa316', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '39a0425ecb995d6bf8d0c6587127f702fb658440', class: "flex" }, h("div", { key: 'ab4a5ffbcb73a88fea4ee67306be6bf30ea1dcff', class: "w-full" }, h("ul", { key: '1117d4f1541cb02b915aecae6c54545f3242a4df', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'ffa7b0017bb21b6608e99b60788c0ea4509fddfc', class: "w-full" }, h("ul", { key: '88517aeead68cb768814577987355c3f1421d3b3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '220bc12066e60ee1912fe194c849ad9569de8d69', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '51fb2578373998a1145c218d33f50c609fefc571', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'f11b329d33f72491c84b80b2094713673e0981b8', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '90c79cfa3aa9ca0c0ac9397d1f903ab3897e15ba', class: "flex" }, h("div", { key: 'e645ea51aac869eebd84e2f2d48bbd51c365b44c', class: "w-full" }, h("ul", { key: '7c7f731969f61d4b6005ee5c7855e1fe2f36e4b4', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '774507d20533e34dd712bea09b74858aff6d221a', class: "w-full" }, h("ul", { key: 'd270efd5cc0cca95117977a98aae34c037de82d0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get is() { return "correct-use-of-colors"; }
 }

package/dist/collection/eds-docs-ui/colors/use-of-colors/incorrect-use-of-colors.js

@@ -38,7 +38,7 @@ const incorrect = [
  */
 export class IncorrectUseOfColors {
     render() {
-        return (h("div", { key: '424c9b01d69068fa058b25dd89df08154912dfe7', class: "container" }, h("div", { key: '5a9dae817344c3c92b8bdb55b806b1f96e26496d', class: "mb-8" }, h("eds-alert", { key: 'afeaa6e5320151800d31c3fecb85669000409a14', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: '87241b25b9f9e326183ba4496983d93bef766380', class: "flex" }, h("div", { key: 'c018e1fffc8198b3e48e1df6b1e8d560e1c7b84a', class: "w-full" }, h("ul", { key: '97845ca2dfe71ac0feb27762c4b3c71c80ca626c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '05adf9099f1b043d08577cf1f233551d83fc4242', class: "w-full" }, h("ul", { key: '55792bcf3ecb93df6884d7366aa8c7f2c3cf5ad5', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: 'a6d5c05544bb0af37aeec022d53c9ebd64e891cc', class: "container" }, h("div", { key: '058290373f57f7f887f79a41d0441f0791037220', class: "mb-8" }, h("eds-alert", { key: 'f6168be82e7a540a1940314134c9eb57dbd1fae4', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: 'c05365d2dcdce23a750c752cef81a7843fe9b54f', class: "flex" }, h("div", { key: '16ca87385a2e3a8fc108df30d628f78534a1b057', class: "w-full" }, h("ul", { key: 'f8c62eec7f63fb153c1785ede3a2cf535dfad6e5', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '9c918b52798d9a50a4b4171dd3d2df0ff276a8fa', class: "w-full" }, h("ul", { key: 'f93524796d29dfc7d85da5a86a937519df10cdd3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get is() { return "incorrect-use-of-colors"; }
 }

package/dist/collection/eds-docs-ui/components-section/components-section.js

@@ -28,7 +28,7 @@ export class ComponentsSection {
         }
     }
     render() {
-        return h("div", { key: '9664cd887a7ac8a2a80f32e501cac7230620052e', class: "container" }, this.renderContent());
+        return h("div", { key: 'bc06ee85e7b45c9d45afa416ecb839c0a10aa576', class: "container" }, this.renderContent());
     }
     static get is() { return "components-section"; }
     static get properties() {

package/dist/collection/eds-docs-ui/design-tokens/docs-tokens/docs-tokens.js

@@ -25,7 +25,7 @@ export class DocsContent {
         }
     }
     render() {
-        return h("div", { key: 'd012b0c560b658efc52b6ed9c26f481d2ce38bd9', class: "container" }, this.renderContent());
+        return h("div", { key: '8819d91f67b1df2f4e2a7da791bce550003eaa41', class: "container" }, this.renderContent());
     }
     static get is() { return "docs-tokens"; }
     static get properties() {

package/dist/collection/eds-docs-ui/design-tokens/token-list/token-list.js

@@ -69,7 +69,7 @@ export class TokenList {
     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: 'b95825988f64556481b66203bcd8fb281b88d2a9', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: 'de737cb2dcf5942c1e4a8b67bf5c757c9ca6564b', 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/collection/eds-docs-ui/design-tokens/token-radii/token-radii.js

@@ -5,7 +5,7 @@ import radii from "../../../../../../../../packages/assets/tokens/radii"; // Adj
  */
 export class TokenRadii {
     render() {
-        return (h("section", { key: '8b1c08f1c32236156eea1d1d1f78a9bad3a202cb', class: "w-full mt-28" }, h("ul", { key: 'b995ce086b3c9b7796f161c29bd206534a3e5316', 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" }))))))));
+        return (h("section", { key: '199f8893d44b2c1087056d8c6d922652e08d78bd', class: "w-full mt-28" }, h("ul", { key: '175e5d717cb3e8a2ef32d3ace1a37fa3b305fda2', 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" }))))))));
     }
     static get is() { return "token-radii"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-ratios/token-ratios.js

@@ -5,7 +5,7 @@ import ratios from "../../../../../../../../packages/assets/tokens/ratios"; // A
  */
 export class TokenRatios {
     render() {
-        return (h("section", { key: '9ab666342a801e51b3a75c979bceadccf4d9736e', class: "w-full" }, h("eds-section-core", { key: '4eea7a8b3b8e3b0404108345756d11806ea2805d', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'faa065acac9bce28073f709d147c9b2725150da5', 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: '0f19e93b3841aa49c36e1195c25b01aa445158ce', class: "w-full" }, h("eds-section-core", { key: '750e15f4957fa7b0d0e050be22a5fcc06d947203', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '217447bc36c9ce0ccd309d0712711e30f704f5ef', 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/collection/eds-docs-ui/design-tokens/token-shadows/token-shadows.js

@@ -5,7 +5,7 @@ import shadowTokens from "../../../../../../../../packages/assets/tokens/shadows
  */
 export class TokenShadows {
     render() {
-        return (h("section", { key: '60745a5eb31e7ce043c3d69cd8246b752cd66520', class: "w-full mt-28" }, h("ul", { key: '4c8ce259916cf36fc240c0ae3f22d32571a919f8', 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]" })))))))));
+        return (h("section", { key: '178756bcd7a0192ed59e4cca5850529ed79d14ff', class: "w-full mt-28" }, h("ul", { key: 'f50430eca17728500d9bf3a074530f29e02708fb', 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]" })))))))));
     }
     static get is() { return "token-shadows"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-spacing/token-spacing.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TokenSpacing {
     render() {
-        return (h("div", { key: '8ebe0d888150e5fefd1d3047cc82548f12f47f9f', class: "w-full" }, h("ul", { key: 'c57af77dfb437bafaf060a6c6ebece84c4683409', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6ca948268bd07e50409334b84eeeb362287f131e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '0f33f8feec6657d21a4e4a1973d4c46cf4f6c526', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '194c9d5367c75c35f021d0b5c64601a72d1141fd', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '252af2371d58a8364718210563b7aa9a76a551a6', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '833a8373bbe4db4514c84d4e299e2103b37bc75e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd364398230aca7af47273a654a8f138d70361c75', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '707e0b62f500c16dc2d72da8e0bd85adabd7280b', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '846c07af2613e90c3acd1fa66aa422db14a95526', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '107899eab78bbb70f62b0aa2df8573f7a940024c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'fb007ac46524cfda56c1033869b3fd7edeec96b8', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '4312aaa901f7ad1075056517b2d8b0902e708aec', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '62a87119afea530831e3bcbb45da16f3a3cfb1b8', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '279e6f5af470cf3f969c37f715def542e4d13140', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '057bcacd976a4d7f0a69ccba3b469e79f6e8c86a', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '379423e5ef1b3f5be2a322493266305f2cf46b9d', class: "spacing-sample p-32 bg-strong" }, h("span", { key: 'a3bd9db6ab5dd4f6204d5009c4328f617f44b78c', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '526411b8ab854f67873964446dee7191949f5d54', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'c30d0c423a4d3104ca8736fbd2c0de5159ac8f2d', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '93e0422c2304a0d3a158ba086aa9235a05d621f0', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: 'dca707847134a421d60930307613a6528a009f9d', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'a132977bdf19ba79401ccc05f248711eb2793497', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '2fad0e796528bce6c021cbb9d3036d4a23226b82', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'be02958fc44ca651c348078dfc84fabbe92afaa1', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '6c94b77b470a1dd9de4dad7a6900d2e053236f52', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '21c919b5124094eb34f820327f439c0198758b2a', class: "w-full" }, h("ul", { key: '9dea1c4eb37380b4cf00c1e2b4ccc3b69eca5536', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'bf719062fc2724411a54076a272acf4d06f8cdad', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '6bab4e4c52e273faead36180c744593c5365d012', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b1327b6ce1ccca9f3ea64cc5eac0987a76209e04', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '188476bd66a4dff9fa395275088ef94c92f2afca', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '8ba0cdfbde803aa803b21641e4c15917ccbd8988', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'b1b88688a7ff18ac204d49c0536875c0b5a717ab', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b72362f8a8460253e39927f1efde1115aed0a873', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '156be8010b2a809d71354ba28c7908f4fe58064f', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '228d4fecc2d4b7f5958048d0d15c548455287392', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9c92a7fe82b51896bc1ee2462f66efa9251c2fcc', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '7059294203bace35afd2ed57b77807e2db806219', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '2e8ec24a3c550ca536a5701c04e0bed7844bc297', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'd79846088a37e1f03a409d11ba69b3ff3cafa5dd', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '0bd8e24e7369fd83c3de2fe7e841c0f3e97cd80b', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c502d2567fb9dc49516390a9a8405c31ab324f0a', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '6f07cec99d6fe8c32053ca3c407c336c7a40a64c', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: 'f6ddca79e1ab773c7a2f64653fbae0d49c03e071', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'bad00c444c75c5a458f66f8b480b69263e9d1548', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'd889c0216ded4bc9fce48d68ab7d8008bf9bd045', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '3b00250165aeb560641e99b5859266f1cecd7baf', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '53077e307812a3d15f534070e4ceb8dd39e22255', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9e7e1a60ef73524b630845bc686e9a44714c6de7', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c8e3e113b805376f03f9ffe2f2afa985f5e19739', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '924878b9f3c36c8b83112ed93ba354527037f6bd', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get is() { return "token-spacing"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-typography/token-typography.js

@@ -5,7 +5,7 @@ import typography from "../../../../../../../../packages/assets/tokens/typograph
  */
 export class TokenTypography {
     render() {
-        return (h("section", { key: 'a3698b57da5e26052bf013daef956ff5f9e0bd1c', class: "w-full" }, h("ul", { key: '924a82c721a636370a15e7a47ca73264c8e1d30e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'cfb9e2e38963772af466109521bbaedbf5852e2a', class: "w-full" }, h("ul", { key: '452fa03a44c1082ae4c260245b7dcb2df308ef4f', 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 flex flex-col mt-16" }, h("div", { class: "w-full p-16 border border-soft rounded", style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem', alignItems: 'center' } }, h("div", { style: {
                 fontFamily: style.fontFamily || typography.families['plex-sans'],
@@ -13,7 +13,13 @@ export class TokenTypography {
                 fontSize: style.fontSize,
                 lineHeight: style.lineHeight,
                 letterSpacing: style.letterSpacing
-            } }, h("span", { class: "text-default" }, `${typeKey}`), h("div", { style: { fontSize: '12px', fontWeight: '400', color: '#7A7B7A', marginTop: '4px', fontFamily: '"IBM Plex Mono", monospace' } }, size, " \u00B7 class: f-", typeKey)), h("div", null, h("eds-code-block", { code: [
+            } }, h("span", { class: "text-default" }, `${typeKey}`), h("div", { style: {
+                fontSize: '12px',
+                fontWeight: '400',
+                color: '#7A7B7A',
+                marginTop: '4px',
+                fontFamily: '"IBM Plex Mono", monospace'
+            } }, size, " \u00B7 class: f-", typeKey)), h("div", null, h("eds-code-block", { code: [
                 `/* Utility: f-${typeKey} | Screen: ${size}:f-${typeKey} */`,
                 style.fontSize && `font-size: ${style.fontSize};`,
                 style.lineHeight && `line-height: ${style.lineHeight};`,