@ebrains/components 3.1.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: '989e469e815c6af6b46a14fddee85e4707f86704', 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: '8b4396894b1ec7cc1c2d928ffa5b3d7628f8c4ee', class: "relative w-full inline-block group" }, h("slot", { key: 'c2547098aacc584960f217edcafeb060ce742adc' }), h("div", { key: '1e6beac7e4294456f7a6130c4b0573cce3e4b548', 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="brand" pill="true" 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: '1a9c56a4868b68ea95fdbb19a61435f5fa23b1b5', class: "block" }, h("div", { key: '242beb1cf3dc3e545be84003615eaed119be3e20', class: "flex items-center" }, h("eds-dropdown", { key: 'e75e0305a60936df4deb5b012fa139ca9a6b024f', 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: '09c74d1320e9637e50f7e0f8482e435db7a3319a', class: "min-w-[280px] p-8" }, h("div", { key: 'fa70ecc13e477cf2d2ead8e8dbab4fa3c3587149', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: '69f059e2002237dd874ba62952c2b014ad94cb8a', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: 'c300f3bbe7f57d82913cef614637188babb82818', class: "max-w-full" }, user.name && h("p", { key: 'dc1a4a26f6c1da6c6e88e5aae484ca2ada2864e6', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '76f94c7b0394125d9a6b547722df5545c6b479fd', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '8be3fe5ba1c302d5ef9bfb6d563070c07ed722ca', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '191e365fa893122e09c07aa36d1fde5d28b9b3de', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '8d3fbd032340d5c32fd93ab89b034e7de25ef2e3' })))))));
+        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: 'baff427c72d8e73945459cd7988112758685e9dc', 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: 'f72b4b776eb902f9525ed7d8daf22f58e76adf6c', 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: '0f2cc155ce4e73dc47272a4640834cb0ee2e22a5', 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: 'a8696a25aafbfb13acf0966545e33caf6f65545d', 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: '0ddb6899f2537c472edbdd0de348c4155a861fff' }, h("ul", { key: 'f5dc4b1ec2fac8da8266e89b3ee51b13bbf2ab6c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'f0c8c818f3fcf25c565890fc330f0381c5c0dbc6', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b6df1db077f85646585b918b155e49ea139bcc82', 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: '77d1cb3761d5d5d1f415e9b47a31fee3f246dd7c', class: "grid" }, h("span", { key: 'b1d79586fdd0126a44329a6478702803df065afc', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '463fef5cd7531513f644605f4caba6218ddf08ad', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'e0ecb4d4ec8c30f2de553d8763d50b7346c1148a', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1e8f1a7be1aa0418232458729a5bb85d2cb98e4f', class: "grid" }, h("span", { key: 'a82f7eed64466929d0c366ad0cac1dd8d07095b3', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '78c94eaf3d621a16ebc17d210fd3f6baef0e70fe', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: '4b21c9633426e2d49421e9e93adb920306aced13', 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: '118a50630946847b09f2792fda6fc86f9c4b458e', class: "grid" }, h("span", { key: '4143c24062fcd7b3313867eb4c13a8a83fbbd644', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '5ef264bd694c497e2ba0348a36ef1789bcada833', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'a1456423e9173eb95da41584ecded25d5c61766a', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e345d8cc8c51f2d9d1fea9b2c67051ce5ca8f358', class: "grid" }, h("span", { key: '29b7d5bcfb5ac5f95474f053239a49e7fc91799f', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: 'b446728afaa56156a254499d335c2a1c8e1b0148', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: 'b3d7bc7434cf9f707cd1827cb2dac72fe70d58e2' }), h("ul", { key: 'c83274127086ebcb67f22d946480636059e313af', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '27fbee38a641a525a3dd02f4ad7b6b03fa2f59b5', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '34b924874118811fef752e975532fb6c56692b67', 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: '1e28e76e270583923233a207dcf14f155ec1a056', class: "grid" }, h("span", { key: '25ddba2af4b76aff1d3c28711052e23e1f924f35', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'a2f75582478b7ac7cb5e5c954fbe6bc41c534714', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '5ed9569671f7644be52a63735cd9f91dd0c38e45', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'b6c65b860f91f5d1b0dea6320588807b54935260', class: "grid" }, h("span", { key: '75fdc2677a0cf76e2fc458bf6ddafa8f25e47c25', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '48a8182282ab4311ebe104ce812924261f350c52', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '40f5edd974eff3891f08fb4bb71e627a7fc6c3e3', 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: '30e2c52d5dc2f14b2d31db28725602fa5db2c7cc', class: "grid" }, h("span", { key: 'f38624cf43d3afc08c6ddf7fda4c0d8c8302cabb', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '7fa03e96c202c03376214cf874de48ad3059a819', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '5668f67a60cf3c148b2f411b5e990409f1b2a63d', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '944dbcbe0b74d5de3b7a6cb6249292c4f6198ce4', class: "grid" }, h("span", { key: 'f85d29f44844bad53e1a8272792909ee655c3d11', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'a8565dd2fcd60b9e8f685ca91be4b91fd9310243', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '1736517e3b869da97268b88ca1e862e52afb72e3' }), h("ul", { key: '89c5251e7c56a1858f98f9877721aaf3818d3ce3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'f1bf325f0f4c4ff13212dd40a957a0407a0e2a31', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '8f324cbb1e6c24f786135607d511cc6040582902', 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: '1eb01383979ac6d4a0b61964a7bcd19887c8908f', class: "grid" }, h("span", { key: '2aaf61cb79ca93c7303ea37b0e23f755bf933948', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '5814e3e62806533329488aa61f3528d6add22db1', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'e5a78ab4f2ee993cbf6f084314534b645b782dfa', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'db666031e9fee9f2029992f776e1c468f5fb1ce7', class: "grid" }, h("span", { key: '9888a56c6d738e2a175d89e6fe16fe5b4761fc56', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '4337a6bedba3e7dbc09225a031c34f3e193d22bb', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '6cf755699eb3ff7f43b8694bb85fb4559372a0a3', 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: 'c9864bbfb228691b623c2713e3655de3fb871caa', class: "grid" }, h("span", { key: 'cc86cc9b24f429d7ebeca8ac8fff95346b8c149b', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: 'e46c02239ec074fe15cb2979b500a0b7e0a17a56', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '5325d7f9e4a8c28884ba1bc0147d549b42be68c6', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '09af1ed381838dc60410fe2ba9116e4da0644307', class: "grid" }, h("span", { key: 'bde38ea3998629f7ee7cf4cfafd96bfd3e11fb3a', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: 'f2da476b838b6124f8e1b77209fa1a524048e71a', 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: 'a74064ecc5a2d9646b76e50bd01fed9974cad718', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '2a79cfc1423158ebe2479e5f4160874c5c57bba0', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'f732817f063656d0f5083fbde7f53d78f4ce319b', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: 'a780e52ac0812ba9f2d0933169a1ed408dcac017', class: "grid" }, h("span", { key: '034c1c3f59ddb5d15b417eddd9049f61721c40e7', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'd85bde05df7d5e756d2c4e106ab364e7c3ec3d30', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'c4f3d8edad422dd905da51a2976b41df8833b2b2', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '6b6055393c1c086ef6c71fde0a06646d32c2cc49', class: "grid" }, h("span", { key: '7678ac503bbfe96a8c7e4ba0833e5872afc4bda4', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: 'e3861166afbbdcb1057d7aedf0363be1650ffef2', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '51a63dafebd44287264876132b1a53c7ada24f59', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '26c3f5cd749a0ce810ce71283ba75292884c1802', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'c2adcca45b3edb97cdc92f1bd177aee32c27d13b', class: "grid" }, h("span", { key: '06ee04c8345bd3c7bee01f28ec79c839d3956812', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '4118231fd5b280b10937136b05e420b3d4fa039d', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '8053667bcbbe539b49a8fa490b28d7fed3c206fb', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'ffbfe32727e433f64c2ca2fefb27348f46cdd123', class: "grid" }, h("span", { key: '50199120a53270d4e9a2fdbfe7b0430fd810247e', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '9f1b49b9e3e9cc941e4047362a531ac39fa4acf2', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '842be74ea7d2839282421c05c94de0ea08edc324', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e36fa05852a0e97af9f6d30b4bc7ac0a03c5ca46', 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: '7c20aa597afc6623e4f48c96a5dfe35fcc794417', class: "grid" }, h("span", { key: '9de55f6cf867d5ca0f359c34df82ea9ea9944b41', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '64ca513c8cb69fa0e8bf8decc3b9315f59e78adc', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'fe4421e78d7c9f6b9fae2aab43046e68fa61b33a', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1913674915edca8c83213f405465670bd1dc53b1', class: "grid" }, h("span", { key: 'a53396290e785e8c055e152d15256388a278606b', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'd175bc7681febbde0bfbcf9816c8077cef210de3', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'bbb39daa24f9881296be8b89fc5dd7d980acace6', 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: '8d2c43ece12d3b50970df5843d038c4866eeb18e', class: "grid" }, h("span", { key: '2e2fc983f867ef09fffb61c6f82d796c68c73b17', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '4d9f460a5f6f5b8166f41eee37e15809b2abf943', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'dfb80c0f00dc096561da4d5a85a98969e4568987', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1d7d6041de03afec92b41519d8422a998ce25465', class: "grid" }, h("span", { key: '5298461da58d328376cc3448da7b3994dabe0abd', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'a21f99e92de656addef78784d6c699ac17c82f36', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '36b0e8aed142a859481083b733e2c72dbe88e2a7', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'd6620556f763fc9b59ef96846c1121a78945e6df', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '3be07bea07803e9103ccaa26582502a746f9d832', class: "grid" }, h("span", { key: '25ead831ce5dab6e3c145b8610f6654d85bb185a', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'f5993b7b320e904ee13f63152aa33dd82431c387', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'b01544b8316df980372cc834a39a9adbf7ec2e26', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e7b4641f2fd27c0742439164bd1f10b08c593f4f', class: "grid" }, h("span", { key: 'd4fe6aacd76c7aa6b0e5fa06ff553403b16d05b4', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: 'a2eb07ff8a20e25ddf65e589285f016e1ecdc52e', 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: '1448b252afd426048e14a56782bad097bbc2cb04', class: "container" }, h("p", { key: '0a0a0ead35d299893d307a1eb9a71e4234d066aa', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '83f480812bba9e85716bae68885b3fdc7ed241a7', 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: '5c19085f34284f1a2aa3c525c9389611b75bfb1c', 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: 'd660baa9e8a74688099c0ec5e8c0a6a3f0519952', class: "flex" }, h("div", { key: 'e3402503bc727c66c39dd6fdc38e8f41a79f6fda', class: "w-full" }, h("ul", { key: '0b797f5b7339979cedb7fe29ecfa6ea36c656df7', 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: '36362208d138fa0e1d892f52c0f2e8d063dedfd2', class: "w-full" }, h("ul", { key: '5cbeeaf57b89f04f55e0a0c289d6d4b3ea3f5a64', 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: '9b409f7d4d271ebd6334d1a973e3a3e4c329ab9b', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '1b4b5713f609774b37e2a84ae992098f4412da6b', 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: '2aaef87146f0777ec614c27e5c309a862a32008a', 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: '8b0114f367da96c44094e88b642c3d80cc03eb3a', class: "flex" }, h("div", { key: '0e7031b26c356592194c9590969d87f59a533b99', class: "w-full" }, h("ul", { key: '9b081bf5903f907c50c3bd70b021dc1d5f13047f', 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: '7a48e557e56d0f76556bddd5c0d7348347b522e5', class: "w-full" }, h("ul", { key: 'de47269f2887ede6f63d78ea27216bdfca092e00', 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: '6462727e41d5adbb78e6516cc514deab0c82a4ff', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '4e451a7a19184ea9febc308440f18aa9ffd7ba20', 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: '00b0bfd638b09f74045600e1f8712ff291a9fefb', 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: 'defd084d15e5ea4ba08fc3bbd6e0b49177c5272f', class: "flex" }, h("div", { key: 'd6bf7ff0ae322e935cc5757470a46ebe3d0d9044', class: "w-full" }, h("ul", { key: 'e5446d344666bf651ea95740defb7ddc7a7b11c1', 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: 'fea82f2022e4649db4f0e7496682d1da56b081fd', class: "w-full" }, h("ul", { key: 'e678cd5f9af9969b3d5832102dc37ea2b720f88a', 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: 'd2e63f7de74f17c40529f04195dfceab6d2064ce', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'e038092dd9503209b495fcd19648891c8dcfd6e3', 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: '8a08ec7cdb4f054bdf44b949da4490b6ffce4e2a', 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: '8d082cd4dddffb42b6d16d1c8b1269a2ba6f9b20', class: "flex" }, h("div", { key: '9d5794ab3a57398babcd8d6f27df2d9ed2154c45', class: "w-full" }, h("ul", { key: 'b83da37b2a99897f68c44cf5c8b910c7626f828e', 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: '2842ef771db390b7e486e3926107238b3f91f7f9', class: "w-full" }, h("ul", { key: '59dda1da69095cda6ca70c92dec362b7ec6ae521', 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: '2688817c691de1f39d1c25845642e99af13e1b00', class: "container" }, h("div", { key: '823b5f324f9b7fe4143dd982e71f535b9c576dd6', class: "mb-8" }, h("eds-alert", { key: '95cf4b07317e116636979fb2d72b4fe925b09fa2', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: 'd4bfceeb122dddf376808ae187379c07ed0e1a06', class: "flex" }, h("div", { key: '82eac813cc9b29424640fb2517992e3384d19a6e', class: "w-full" }, h("ul", { key: 'da2ca77bd91a25c6a451910a6b3bf939e5e8abc9', 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: '538560ac8db9f9d023a5afbf4cd67dff80f6e7b6', class: "w-full" }, h("ul", { key: '4b601f722730fbe1cbb78c1185d79b34654d3f76', 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: '8d781f8e27f93eb003bd4390da57503dc17a945b', 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: '4104127b2816de8034a5bde49162486930647142', 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: '19a7dd76a980e2815f8df3ee0cb083b2c77cafa4', 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: '80a475b807538a7c9c1186d0f167a793858ad439', class: "w-full mt-28" }, h("ul", { key: 'e3fa97c0f627f2094c7eae87eb9f7079df2b35f2', 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: 'd95a7a36fc37fb829c74e336d16de79f57ec1b83', class: "w-full" }, h("eds-section-core", { key: '1e2fbe9a818a162d6acd148804a61b87f919eda5', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'a2429b25e2aef59bde0185115dc2ff908b075db5', 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: '0316f767a182da2f2e96c137034d84794947102a', class: "w-full mt-28" }, h("ul", { key: '16586b6a4d565ee58f4ea2465d54d527390d41ca', 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: '857d52883315b5be7edb90c89602b29f258cabda', class: "w-full" }, h("ul", { key: 'e1dbf5d8e227c9014183c2465bf281e554f7e35b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '85795c6c4ad2c4fc05cda1183a06dadc78521b45', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e0d6a8712ab4d47dca6ca275c09592b8af381b20', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'cbfc5e4dcb4040b375d195246626d833d5b33057', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '8aa060bb7da7ffdbcd343c849f5e62c6db648fd7', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: 'f4e5e7a4eedac3a350f8c68adc5cdc8ba742166a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'de4ce6ca17ba9c0a20a794e1ec55f2fcc1f0c440', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '52766704ac7cb4b1336d4283991c5204c7dece18', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '60c2b72b390ac0b204cf10cf2c01907915e0b3a1', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '1b7922c2a246a1a95e2e26e455b55ea7b5a2a3e9', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '7d43b9c4bc7ebd4883d9d7871b9fb02a2cece586', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '7afeb3b0db7c70f11e09b5df2d396ebfc4454f00', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '3bccca0e93ad8accb3da8ce64c86ee70d2a6f255', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '7cbdb2d1b0cd2f91c1b7a05d6654e89a26f74340', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'a47cb7cce3d8947d07ceff06fea30e19df12c6ec', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '2ee8dc2c52d8a689c12f0333cf7a4d0b36e572f7', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '2c19bbed58312c84d15ef45fc4bd5a699718b259', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '89283aab1c8e84f4d692e290e227d5b91e88cd56', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e341336d74199f51d440ad01217816939b4877eb', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6d59ec419924101b4b2d4daf1fa385cd7d921c2e', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '378293318a5aa7c0c9fecb575e533aa97c7b0ecf', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'a8e4328bb418b7b878aebfdfe4022e3054b5167e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '421adc7f90db876dca2304f0c0f794c2b93b4536', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'ebb689a6011c3da5282eb3bb1cc1a0581af86e90', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '8924318c5edcb5d78c37dc1a768e1b3e0fa775ed', 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: 'ce7e291884a4b1bef85050a04c798a365287a131', class: "w-full" }, h("ul", { key: '070567197ed557c07284ebe733c4f9f3246c60d7', 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};`,