@telesign/boreal-web-components 0.1.0-alpha.3 → 0.1.0-alpha.4

package/dist/css/theme-proximus.css

@@ -1,227 +1,226 @@
 [data-theme="proximus"] {
-  --boreal-accent-dark: var(--boreal-color-proximus-mint-mint-700);
+  --boreal-primary-darker: var(--boreal-color-proximus-cobalt-cobalt-900);
+  --boreal-primary-dark: var(--boreal-color-proximus-cobalt-cobalt-700);
+  --boreal-primary-base: var(--boreal-color-proximus-cobalt-cobalt-500);
+  --boreal-primary-light: var(--boreal-color-proximus-cobalt-cobalt-200);
+  --boreal-primary-lighter: var(--boreal-color-proximus-cobalt-cobalt-50);
+  --boreal-accent-darker: var(--boreal-color-proximus-cobalt-cobalt-900);
+  --boreal-accent-dark: var(--boreal-color-proximus-cobalt-cobalt-700);
+  --boreal-accent-base: var(--boreal-color-proximus-cobalt-cobalt-500);
+  --boreal-accent-light: var(--boreal-color-proximus-cobalt-cobalt-300);
+  --boreal-accent-lighter: var(--boreal-color-proximus-cobalt-cobalt-100);
+  --boreal-neutral: var(--boreal-color-proximus-neutral-neutral-50);
+  --boreal-neutral-lighter: var(--boreal-color-proximus-onyx-onyx-50);
+  --boreal-neutral-light: var(--boreal-color-proximus-onyx-onyx-100);
+  --boreal-neutral-paper: var(--boreal-color-proximus-onyx-onyx-200);
+  --boreal-neutral-dark: var(--boreal-color-proximus-onyx-onyx-100);
+  --boreal-neutral-base: var(--boreal-color-proximus-onyx-onyx-200);
+  --boreal-neutral-darker: var(--boreal-color-proximus-onyx-onyx-500);
+  --boreal-neutral-deep: var(--boreal-color-proximus-onyx-onyx-600);
+  --boreal-neutral-ink: var(--boreal-color-proximus-onyx-onyx-700);
+  --boreal-neutral-deeper: var(--boreal-color-proximus-onyx-onyx-800);
+  --boreal-neutral-contrast: var(--boreal-color-proximus-onyx-onyx-900);
+  --boreal-base-darker: var(--boreal-color-proximus-onyx-onyx-200);
+  --boreal-base-dark: var(--boreal-color-proximus-onyx-onyx-100);
+  --boreal-base-alt: var(--boreal-color-proximus-onyx-onyx-700);
+  --boreal-base-light: var(--boreal-color-proximus-neutral-neutral-300);
+  --boreal-base-lighter: var(--boreal-color-proximus-neutral-neutral-200);
+  --boreal-danger-darker: var(--boreal-color-proximus-red-red-900);
+  --boreal-danger-dark: var(--boreal-color-proximus-red-red-800);
+  --boreal-danger-base: var(--boreal-color-proximus-red-red-500);
+  --boreal-danger-light: var(--boreal-color-proximus-red-red-200);
+  --boreal-danger-lighter: var(--boreal-color-proximus-red-red-50);
+  --boreal-success-dark: var(--boreal-color-proximus-mint-mint-700);
+  --boreal-success-base: var(--boreal-color-proximus-mint-mint-500);
+  --boreal-success-lighter: var(--boreal-color-proximus-mint-mint-50);
+  --boreal-success-darker: var(--boreal-color-proximus-mint-mint-900);
+  --boreal-success-light: var(--boreal-color-proximus-mint-mint-200);
+  --boreal-warning-darker: var(--boreal-color-proximus-amber-amber-900);
+  --boreal-warning-dark: var(--boreal-color-proximus-amber-amber-700);
+  --boreal-warning-base: var(--boreal-color-proximus-amber-amber-400);
+  --boreal-warning-light: var(--boreal-color-proximus-amber-amber-200);
+  --boreal-warning-lighter: var(--boreal-color-proximus-amber-amber-50);
+  --boreal-information-darker: var(--boreal-color-proximus-cobalt-cobalt-900);
+  --boreal-information-dark: var(--boreal-color-proximus-cobalt-cobalt-700);
+  --boreal-information-base: var(--boreal-color-proximus-cobalt-cobalt-500);
+  --boreal-information-light: var(--boreal-color-proximus-cobalt-cobalt-200);
+  --boreal-information-lighter: var(--boreal-color-proximus-cobalt-cobalt-50);
+  --boreal-white: var(--boreal-color-proximus-neutral-neutral-50);
   --boreal-black: var(--boreal-color-proximus-onyx-onyx-900);
-  --boreal-accent-light: var(--boreal-color-proximus-mint-mint-200);
-  --boreal-white: var(--boreal-color-white);
-  --boreal-accent-base: var(--boreal-color-proximus-mint-mint-400);
-  --boreal-extended-teal-light: var(--boreal-color-engage-teal-teal-20);
-  --boreal-extended-teal-lighter: var(--boreal-color-engage-teal-teal-5);
-  --boreal-extended-teal-base: var(--boreal-color-engage-teal-teal-40);
-  --boreal-extended-teal-dark: var(--boreal-color-engage-teal-teal-70);
-  --boreal-extended-teal-darker: var(--boreal-color-engage-teal-teal-90);
-  --boreal-extended-purple-base: var(--boreal-color-engage-purple-purple-50);
-  --boreal-extended-purple-dark: var(--boreal-color-engage-purple-purple-70);
-  --boreal-extended-orange-base: var(--boreal-color-engage-orange-orange-40);
-  --boreal-extended-purple-light: var(--boreal-color-engage-purple-purple-20);
-  --boreal-extended-orange-darker: var(--boreal-color-engage-orange-orange-90);
+  --boreal-focus: var(--boreal-color-proximus-cobalt-cobalt-200);
+  --boreal-user-base: var(--boreal-color-proximus-cobalt-cobalt-50);
   --boreal-extended-orange-lighter: var(--boreal-color-engage-orange-orange-5);
-  --boreal-extended-orange-dark: var(--boreal-color-engage-orange-orange-70);
   --boreal-extended-orange-light: var(--boreal-color-engage-orange-orange-20);
+  --boreal-extended-orange-base: var(--boreal-color-engage-orange-orange-40);
+  --boreal-extended-orange-dark: var(--boreal-color-engage-orange-orange-70);
+  --boreal-extended-orange-darker: var(--boreal-color-engage-orange-orange-90);
+  --boreal-extended-onyx-lighter: var(--boreal-color-protect-onyx-onyx-100);
+  --boreal-extended-onyx-light: var(--boreal-color-protect-onyx-onyx-200);
+  --boreal-extended-onyx-base: var(--boreal-color-protect-onyx-onyx-500);
+  --boreal-extended-onyx-dark: var(--boreal-color-protect-onyx-onyx-600);
+  --boreal-extended-onyx-darker: var(--boreal-color-protect-onyx-onyx-900);
   --boreal-extended-purple-lighter: var(--boreal-color-engage-purple-purple-5);
+  --boreal-extended-purple-light: var(--boreal-color-engage-purple-purple-20);
+  --boreal-extended-purple-base: var(--boreal-color-engage-purple-purple-50);
+  --boreal-extended-purple-dark: var(--boreal-color-engage-purple-purple-70);
   --boreal-extended-purple-darker: var(--boreal-color-engage-purple-purple-90);
+  --boreal-extended-rose-lighter: var(--boreal-color-engage-rose-rose-5);
+  --boreal-extended-rose-light: var(--boreal-color-engage-rose-rose-20);
+  --boreal-extended-rose-base: var(--boreal-color-engage-rose-rose-50);
+  --boreal-extended-rose-dark: var(--boreal-color-engage-rose-rose-70);
+  --boreal-extended-rose-darker: var(--boreal-color-engage-rose-rose-90);
+  --boreal-extended-teal-lighter: var(--boreal-color-engage-teal-teal-5);
+  --boreal-extended-teal-base: var(--boreal-color-engage-teal-teal-40);
+  --boreal-extended-teal-dark: var(--boreal-color-engage-teal-teal-70);
+  --boreal-extended-teal-light: var(--boreal-color-engage-teal-teal-20);
+  --boreal-extended-teal-darker: var(--boreal-color-engage-teal-teal-90);
   --boreal-extended-cyan-lighter: var(--boreal-color-engage-cyan-cyan-5);
   --boreal-extended-cyan-light: var(--boreal-color-engage-cyan-cyan-20);
   --boreal-extended-cyan-base: var(--boreal-color-engage-cyan-cyan-40);
   --boreal-extended-cyan-dark: var(--boreal-color-engage-cyan-cyan-70);
   --boreal-extended-cyan-darker: var(--boreal-color-engage-cyan-cyan-90);
-  --boreal-extended-lime-dark: var(--boreal-color-engage-lime-lime-70);
+  --boreal-extended-lime-lighter: var(--boreal-color-engage-lime-lime-5);
+  --boreal-extended-lime-light: var(--boreal-color-engage-lime-lime-20);
   --boreal-extended-lime-base: var(--boreal-color-engage-lime-lime-40);
+  --boreal-extended-lime-dark: var(--boreal-color-engage-lime-lime-70);
   --boreal-extended-lime-darker: var(--boreal-color-engage-lime-lime-90);
-  --boreal-extended-lime-light: var(--boreal-color-engage-lime-lime-20);
-  --boreal-extended-lime-lighter: var(--boreal-color-engage-lime-lime-5);
   --boreal-extended-cobalt-lighter: var(--boreal-color-protect-cobalt-cobalt-50);
   --boreal-extended-cobalt-light: var(--boreal-color-protect-cobalt-cobalt-100);
   --boreal-extended-cobalt-base: var(--boreal-color-protect-cobalt-cobalt-600);
   --boreal-extended-cobalt-dark: var(--boreal-color-protect-cobalt-cobalt-800);
   --boreal-extended-cobalt-darker: var(--boreal-color-protect-cobalt-cobalt-900);
-  --boreal-extended-onyx-lighter: var(--boreal-color-protect-onyx-onyx-100);
-  --boreal-extended-onyx-light: var(--boreal-color-protect-onyx-onyx-200);
-  --boreal-extended-onyx-base: var(--boreal-color-protect-onyx-onyx-500);
-  --boreal-extended-onyx-dark: var(--boreal-color-protect-onyx-onyx-600);
-  --boreal-extended-onyx-darker: var(--boreal-color-protect-onyx-onyx-900);
-  --boreal-extended-rose-lighter: var(--boreal-color-engage-rose-rose-5);
-  --boreal-extended-rose-light: var(--boreal-color-engage-rose-rose-20);
-  --boreal-extended-rose-base: var(--boreal-color-engage-rose-rose-50);
-  --boreal-extended-rose-dark: var(--boreal-color-engage-rose-rose-70);
-  --boreal-extended-rose-darker: var(--boreal-color-engage-rose-rose-90);
-  --boreal-neutral-deep: var(--boreal-color-proximus-onyx-onyx-600);
-  --boreal-information-lighter: var(--boreal-color-proximus-cobalt-cobalt-5);
-  --boreal-information-light: var(--boreal-color-proximus-cobalt-cobalt-200);
-  --boreal-success-lighter: var(--boreal-color-proximus-mint-mint-5);
-  --boreal-information-base: var(--boreal-color-proximus-cobalt-cobalt-500);
-  --boreal-neutral-contrast: var(--boreal-color-proximus-onyx-onyx-900);
-  --boreal-information-dark: var(--boreal-color-proximus-cobalt-cobalt-700);
-  --boreal-neutral-base: var(--boreal-color-proximus-onyx-onyx-400);
-  --boreal-warning-base: var(--boreal-color-proximus-amber-amber-400);
-  --boreal-neutral-ink: var(--boreal-color-proximus-onyx-onyx-700);
-  --boreal-warning-dark: var(--boreal-color-proximus-amber-amber-700);
-  --boreal-warning-darker: var(--boreal-color-proximus-amber-amber-900);
-  --boreal-warning-light: var(--boreal-color-proximus-amber-amber-200);
-  --boreal-focus: var(--boreal-color-proximus-cobalt-cobalt-200);
-  --boreal-success-light: var(--boreal-color-proximus-mint-mint-200);
-  --boreal-neutral-ligther: var(--boreal-color-proximus-neutral-neutral-200);
-  --boreal-success-base: var(--boreal-color-proximus-mint-mint-600);
-  --boreal-primary-dark: var(--boreal-color-proximus-cobalt-cobalt-700);
-  --boreal-danger-darker: var(--boreal-color-proximus-red-red-900);
-  --boreal-primary-darker: var(--boreal-color-proximus-cobalt-cobalt-900);
-  --boreal-danger-dark: var(--boreal-color-proximus-red-red-800);
-  --boreal-base-alt: var(--boreal-color-proximus-onyx-onyx-900);
-  --boreal-neutral-dark: var(--boreal-color-proximus-onyx-onyx-100);
-  --boreal-danger-lighter: var(--boreal-color-proximus-red-red-50);
-  --boreal-base-lighter: var(--boreal-color-proximus-neutral-neutral-300);
-  --boreal-danger-light: var(--boreal-color-proximus-red-red-200);
-  --boreal-accent-lighter: var(--boreal-color-proximus-mint-mint-5);
-  --boreal-success-dark: var(--boreal-color-proximus-mint-mint-700);
-  --boreal-neutral: var(--boreal-color-proximus-onyx-onyx-50);
-  --boreal-accent-darker: var(--boreal-color-proximus-mint-mint-900);
-  --boreal-neutral-paper: var(--boreal-color-proximus-onyx-onyx-200);
-  --boreal-warning-lighter: var(--boreal-color-proximus-amber-amber-50);
-  --boreal-success-darker: var(--boreal-color-proximus-mint-mint-900);
-  --boreal-primary-base: var(--boreal-color-proximus-cobalt-cobalt-500);
-  --boreal-information-darker: var(--boreal-color-proximus-cobalt-cobalt-900);
-  --boreal-neutral-darker: var(--boreal-color-proximus-onyx-onyx-500);
-  --boreal-neutral-light: var(--boreal-color-proximus-onyx-onyx-100);
-  --boreal-danger-base: var(--boreal-color-proximus-red-red-500);
-  --boreal-neutral-deeper: var(--boreal-color-proximus-onyx-onyx-800);
-  --boreal-base-light: var(--boreal-color-proximus-neutral-neutral-300);
-  --boreal-primary-light: var(--boreal-color-proximus-cobalt-cobalt-200);
-  --boreal-primary-lighter: var(--boreal-color-proximus-cobalt-cobalt-5);
-  --boreal-base-dark: var(--boreal-color-proximus-onyx-onyx-100);
-  --boreal-base-darker: var(--boreal-color-proximus-onyx-onyx-200);
-  --boreal-user-base: var(--boreal-color-proximus-cobalt-cobalt-5);
-  --boreal-bg-overlay: var(--boreal-neutral-contrast);
-  --boreal-bg-inverse: var(--boreal-white);
-  --boreal-bg-primary-darker: var(--boreal-primary-darker);
-  --boreal-bg-neutral: var(--boreal-neutral);
-  --boreal-bg-primary-base: var(--boreal-primary-base);
-  --boreal-bg-neutral-ink: var(--boreal-neutral-ink);
   --boreal-bg-primary-lighter: var(--boreal-primary-lighter);
   --boreal-bg-primary-light: var(--boreal-primary-light);
+  --boreal-bg-primary-base: var(--boreal-primary-base);
+  --boreal-bg-primary-darker: var(--boreal-primary-darker);
+  --boreal-bg-inverse: var(--boreal-white);
+  --boreal-bg-neutral: var(--boreal-neutral);
   --boreal-bg-neutral-light: var(--boreal-neutral-light);
   --boreal-bg-neutral-paper: var(--boreal-neutral-paper);
-  --boreal-bg-nuetral-dark: var(--boreal-neutral-dark);
+  --boreal-bg-neutral-dark: var(--boreal-neutral-dark);
   --boreal-bg-neutral-base: var(--boreal-neutral-base);
   --boreal-bg-neutral-darker: var(--boreal-neutral-darker);
   --boreal-bg-neutral-deep: var(--boreal-neutral-deep);
-  --boreal-text-success-base: var(--boreal-success-base);
-  --boreal-text-danger-base: var(--boreal-danger-base);
-  --boreal-text-information-base: var(--boreal-information-base);
-  --boreal-text-accent: var(--boreal-accent-base);
+  --boreal-bg-neutral-ink: var(--boreal-neutral-ink);
+  --boreal-bg-overlay: var(--boreal-neutral-contrast);
   --boreal-text-default: var(--boreal-neutral-ink);
   --boreal-text-default-light: var(--boreal-neutral-base);
-  --boreal-text-inverse: var(--boreal-white);
-  --boreal-text-warning-base: var(--boreal-warning-base);
+  --boreal-text-base: var(--boreal-base-alt);
+  --boreal-text-default-dark: var(--boreal-neutral-dark);
+  --boreal-text-default-darker: var(--boreal-neutral-darker);
+  --boreal-text-default-deep: var(--boreal-neutral-deep);
+  --boreal-text-default-ink: var(--boreal-neutral-ink);
   --boreal-text-disabled: var(--boreal-neutral-dark);
+  --boreal-text-accent: var(--boreal-accent-base);
+  --boreal-text-primary-dark: var(--boreal-primary-dark);
   --boreal-text-primary-base: var(--boreal-primary-base);
+  --boreal-text-primary-light: var(--boreal-primary-light);
   --boreal-text-danger-dark: var(--boreal-danger-dark);
-  --boreal-text-success-dark: var(--boreal-success-dark);
-  --boreal-text-information-dark: var(--boreal-information-darker);
-  --boreal-text-warning-light: var(--boreal-warning-light);
+  --boreal-text-danger-base: var(--boreal-danger-base);
   --boreal-text-danger-light: var(--boreal-danger-light);
+  --boreal-text-success-dark: var(--boreal-success-dark);
+  --boreal-text-success-base: var(--boreal-success-base);
   --boreal-text-success-light: var(--boreal-success-light);
+  --boreal-text-information-dark: var(--boreal-information-darker);
+  --boreal-text-information-base: var(--boreal-information-base);
   --boreal-text-information-light: var(--boreal-information-light);
   --boreal-text-warning-dark: var(--boreal-warning-darker);
-  --boreal-text-base: var(--boreal-base-alt);
-  --boreal-text-primary-light: var(--boreal-primary-light);
-  --boreal-text-primary-dark: var(--boreal-primary-dark);
-  --boreal-text-default-dark: var(--boreal-neutral-dark);
-  --boreal-text-default-darker: var(--boreal-neutral-darker);
-  --boreal-text-default-deep: var(--boreal-neutral-deep);
-  --boreal-text-default-ink: var(--boreal-neutral-ink);
+  --boreal-text-warning-base: var(--boreal-warning-base);
+  --boreal-text-warning-light: var(--boreal-warning-light);
+  --boreal-text-inverse: var(--boreal-white);
   --boreal-ui-default-base: var(--boreal-neutral);
-  --boreal-ui-inverse: var(--boreal-white);
+  --boreal-ui-default-lighter: var(--boreal-base-lighter);
+  --boreal-ui-default-light: var(--boreal-neutral-paper);
+  --boreal-ui-default-paper: var(--boreal-neutral-dark);
+  --boreal-ui-default-dark: var(--boreal-neutral-base);
+  --boreal-ui-default-darker: var(--boreal-neutral-darker);
+  --boreal-ui-default-deep: var(--boreal-neutral-deep);
+  --boreal-ui-default-ink: var(--boreal-neutral-ink);
+  --boreal-ui-primary-dark: var(--boreal-primary-dark);
+  --boreal-ui-primary-base: var(--boreal-primary-base);
+  --boreal-ui-primary-light: var(--boreal-primary-light);
+  --boreal-ui-primary-lighter: var(--boreal-primary-lighter);
   --boreal-ui-accent: var(--boreal-accent-base);
   --boreal-ui-black-light: var(--boreal-neutral-darker);
+  --boreal-ui-black: var(--boreal-neutral-contrast);
   --boreal-ui-base: var(--boreal-base-alt);
   --boreal-ui-base-light: var(--boreal-base-light);
-  --boreal-ui-disabled: var(--boreal-neutral-ligther);
-  --boreal-ui-info-light: var(--boreal-information-light);
-  --boreal-ui-success-light: var(--boreal-success-light);
+  --boreal-ui-base-lighter: var(--boreal-base-lighter);
+  --boreal-ui-success-dark: var(--boreal-success-dark);
   --boreal-ui-success-base: var(--boreal-success-base);
-  --boreal-ui-black: var(--boreal-neutral-contrast);
-  --boreal-ui-danger-light: var(--boreal-danger-light);
-  --boreal-ui-primary-lighter: var(--boreal-primary-lighter);
-  --boreal-ui-danger-base: var(--boreal-danger-base);
-  --boreal-ui-info-base: var(--boreal-information-base);
-  --boreal-ui-primary-base: var(--boreal-primary-base);
-  --boreal-ui-primary-light: var(--boreal-primary-light);
-  --boreal-ui-primary-dark: var(--boreal-primary-dark);
-  --boreal-ui-warning-base: var(--boreal-warning-base);
+  --boreal-ui-success-light: var(--boreal-success-light);
   --boreal-ui-success-lighter: var(--boreal-success-lighter);
+  --boreal-ui-danger-dark: var(--boreal-danger-dark);
+  --boreal-ui-danger-base: var(--boreal-danger-base);
+  --boreal-ui-danger-light: var(--boreal-danger-light);
   --boreal-ui-danger-lighter: var(--boreal-danger-lighter);
+  --boreal-ui-info-dark: var(--boreal-information-dark);
+  --boreal-ui-info-base: var(--boreal-information-base);
+  --boreal-ui-info-light: var(--boreal-information-light);
   --boreal-ui-info-lighter: var(--boreal-information-lighter);
+  --boreal-ui-warning-dark: var(--boreal-warning-dark);
+  --boreal-ui-warning-base: var(--boreal-warning-base);
   --boreal-ui-warning-light: var(--boreal-warning-light);
   --boreal-ui-warning-lighter: var(--boreal-warning-lighter);
-  --boreal-ui-base-lighter: var(--boreal-base-lighter);
-  --boreal-ui-default-lighter: var(--boreal-neutral-ligther);
-  --boreal-ui-success-dark: var(--boreal-success-dark);
-  --boreal-ui-danger-dark: var(--boreal-danger-dark);
-  --boreal-ui-info-dark: var(--boreal-information-dark);
-  --boreal-ui-warning-dark: var(--boreal-warning-dark);
-  --boreal-ui-default-light: var(--boreal-neutral-light);
-  --boreal-ui-default-paper: var(--boreal-neutral-paper);
-  --boreal-ui-default-dark: var(--boreal-neutral-dark);
-  --boreal-ui-default-darker: var(--boreal-neutral-darker);
-  --boreal-ui-default-deep: var(--boreal-neutral-deep);
-  --boreal-ui-default-ink: var(--boreal-neutral-ink);
-  --boreal-icon-info-dark: var(--boreal-information-darker);
+  --boreal-ui-disabled: var(--boreal-neutral-lighter);
+  --boreal-ui-inverse: var(--boreal-white);
+  --boreal-stroke-primary-dark: var(--boreal-primary-dark);
+  --boreal-stroke-primary-base: var(--boreal-primary-base);
+  --boreal-stroke-primary-light: var(--boreal-primary-light);
+  --boreal-stroke-default-lighter: var(--boreal-base-lighter);
+  --boreal-stroke-default-light: var(--boreal-base-light);
+  --boreal-stroke-default-dark: var(--boreal-base-dark);
+  --boreal-stroke-default-ink: var(--boreal-base-alt);
+  --boreal-stroke-accent: var(--boreal-accent-base);
+  --boreal-stroke-info-dark: var(--boreal-information-dark);
+  --boreal-stroke-info-base: var(--boreal-information-base);
+  --boreal-stroke-info-light: var(--boreal-information-light);
+  --boreal-stroke-warning-dark: var(--boreal-warning-dark);
+  --boreal-stroke-warning: var(--boreal-warning-base);
+  --boreal-stroke-warning-light: var(--boreal-warning-light);
+  --boreal-stroke-success-dark: var(--boreal-success-dark);
+  --boreal-stroke-success-base: var(--boreal-success-base);
+  --boreal-stroke-success-light: var(--boreal-success-light);
+  --boreal-stroke-danger-dark: var(--boreal-danger-dark);
+  --boreal-stroke-danger-base: var(--boreal-danger-base);
+  --boreal-stroke-danger-light: var(--boreal-danger-light);
+  --boreal-stroke-focus: var(--boreal-focus);
+  --boreal-stroke-inverse: var(--boreal-white);
+  --boreal-icon-primary-dark: var(--boreal-primary-dark);
+  --boreal-icon-primary-base: var(--boreal-primary-base);
+  --boreal-icon-primary-light: var(--boreal-primary-light);
+  --boreal-icon-accent-base: var(--boreal-accent-base);
   --boreal-icon-default-lighter: var(--boreal-neutral-paper);
   --boreal-icon-default-light: var(--boreal-neutral-dark);
   --boreal-icon-default-dark: var(--boreal-neutral-base);
-  --boreal-icon-success-base: var(--boreal-success-base);
-  --boreal-icon-inverse: var(--boreal-white);
-  --boreal-icon-warning-base: var(--boreal-warning-base);
-  --boreal-icon-accent-base: var(--boreal-accent-base);
-  --boreal-icon-danger-base: var(--boreal-danger-base);
-  --boreal-icon-base: var(--boreal-base-alt);
-  --boreal-icon-primary-base: var(--boreal-primary-base);
-  --boreal-icon-success-dark: var(--boreal-success-dark);
-  --boreal-icon-warning-dark: var(--boreal-warning-darker);
-  --boreal-icon-danger-dark: var(--boreal-danger-dark);
+  --boreal-icon-default-ink: var(--boreal-neutral-ink);
+  --boreal-icon-info-dark: var(--boreal-information-darker);
   --boreal-icon-info-base: var(--boreal-information-base);
   --boreal-icon-info-light: var(--boreal-information-light);
+  --boreal-icon-success-dark: var(--boreal-success-dark);
+  --boreal-icon-success-base: var(--boreal-success-base);
   --boreal-icon-success-light: var(--boreal-success-light);
+  --boreal-icon-warning-dark: var(--boreal-warning-darker);
+  --boreal-icon-warning-base: var(--boreal-warning-base);
   --boreal-icon-warning-light: var(--boreal-warning-light);
+  --boreal-icon-danger-dark: var(--boreal-danger-dark);
+  --boreal-icon-danger-base: var(--boreal-danger-base);
   --boreal-icon-danger-light: var(--boreal-danger-light);
+  --boreal-icon-base: var(--boreal-base-alt);
+  --boreal-icon-inverse: var(--boreal-white);
   --boreal-icon-disabled: var(--boreal-neutral-dark);
-  --boreal-icon-primary-light: var(--boreal-primary-light);
-  --boreal-icon-primary-dark: var(--boreal-primary-dark);
   --boreal-icon-user: var(--boreal-user-base);
-  --boreal-icon-default-ink: var(--boreal-neutral-ink);
-  --boreal-alpha-black-50: #272a2f80;
+  --boreal-alpha-black-5: #272a2f0d;
+  --boreal-alpha-black-10: #272a2f1a;
   --boreal-alpha-black-25: #272a2f40;
-  --boreal-alpha-white-50: #ffffff80;
-  --boreal-alpha-white-25: #ffffff40;
+  --boreal-alpha-black-50: #272a2f80;
   --boreal-alpha-white-10: #ffffff1a;
+  --boreal-alpha-white-25: #ffffff40;
+  --boreal-alpha-white-50: #ffffff80;
+  --boreal-alpha-white-55: #ffffff8c;
   --boreal-alpha-white-75: #ffffffbf;
+  --boreal-alpha-white-80: #ffffffcc;
   --boreal-alpha-white-85: #ffffffd9;
   --boreal-alpha-white-90: #ffffffe6;
   --boreal-alpha-white-95: #ffffffe6;
-  --boreal-alpha-white-80: #ffffffcc;
-  --boreal-alpha-white-55: #ffffff8c;
-  --boreal-alpha-black-5: #272a2f0d;
-  --boreal-alpha-black-10: #272a2f1a;
-  --boreal-extended-tael-darker: var(--boreal-extended-teal-darker);
-  --boreal-stroke-warning: var(--boreal-warning-base);
-  --boreal-stroke-inverse: var(--boreal-white);
-  --boreal-stroke-info-base: var(--boreal-information-base);
-  --boreal-stroke-success-base: var(--boreal-success-base);
-  --boreal-stroke-default-dark: var(--boreal-base-dark);
-  --boreal-stroke-default-light: var(--boreal-base-light);
-  --boreal-stroke-default-ink: var(--boreal-base-alt);
-  --boreal-stroke-focus: var(--boreal-focus);
-  --boreal-stroke-danger-base: var(--boreal-danger-base);
-  --boreal-stroke-accent: var(--boreal-accent-base);
-  --boreal-stroke-primary-base: var(--boreal-primary-base);
-  --boreal-stroke-primary-light: var(--boreal-primary-light);
-  --boreal-stroke-primary-dark: var(--boreal-primary-dark);
-  --boreal-stroke-info-light: var(--boreal-information-light);
-  --boreal-stroke-info-dark: var(--boreal-information-dark);
-  --boreal-stroke-success-light: var(--boreal-success-light);
-  --boreal-stroke-success-dark: var(--boreal-success-dark);
-  --boreal-stroke-warning-light: var(--boreal-warning-light);
-  --boreal-stroke-warning-dark: var(--boreal-warning-dark);
-  --boreal-stroke-danger-light: var(--boreal-danger-light);
-  --boreal-stroke-danger-dark: var(--boreal-danger-dark);
-  --boreal-stroke-default-lighter: var(--boreal-base-lighter);
 }

package/dist/esm/BaseAttributes-DhSchGPI.js

@@ -0,0 +1,12 @@
+/**
+ * Generates a stable random ID for internal ARIA linkage.
+ * Used by components to wire labels, descriptions, and controls
+ * without exposing the ID as a public prop.
+ *
+ * @param prefix - Component-specific prefix for readability in DevTools.
+ */
+function createId(prefix = 'bds') {
+    return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+export { createId as c };

package/dist/esm/Keys-CzYQb3pP.js

@@ -0,0 +1,20 @@
+/**
+ * Default keyboard keys.
+ * Add more keys to the `KEYBOARD` object to add more keyboard shortcuts.
+ * This prevents key name typing errors and provides a centralized definition of the keys available for implementation.
+ * Can use this page to find the keycodes: https://keycode.info/
+ */
+const KEYBOARD = {
+    Enter: {
+        key: 'Enter'},
+    Escape: {
+        key: 'Escape'},
+    Space: {
+        key: ' '},
+    ArrowUp: {
+        key: 'ArrowUp'},
+    ArrowDown: {
+        key: 'ArrowDown'},
+};
+
+export { KEYBOARD as K };

package/dist/esm/bds-avatar.entry.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { a as inheritAriaAttributes } from './attributes-CaHOghy5.js';
+import { v as validatePropValue } from './validateProps-kGnB15Lz.js';
+
+const AVATAR_VARIANT = {
+    ICON: 'icon',
+    NAME: 'name',
+    FULL: 'full',
+};
+
+const bdsAvatarCss = () => `@charset "UTF-8";.bds-avatar{font-family:var(--boreal-typography-font-family-primary)}.bds-avatar__container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-xs)}.bds-avatar__circle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--boreal-layout-ml);height:var(--boreal-layout-ml);border-radius:var(--boreal-radius-full);background-color:var(--bds-avatar-background)}.bds-avatar__initials{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-xs);color:var(--bds-avatar-initials-color);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bds-avatar__name{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
+
+const BdsAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inheritedAttributes = {};
+        /** The full name used to generate initials or display as label **/
+        this.username = '';
+        /**
+         * Controls which avatar elements are displayed: icon (initials), name, or both.
+         * @default 'full'
+         */
+        this.variant = AVATAR_VARIANT.FULL;
+        /** Custom background color as hex code. If not provided, defaults to Boreal success color **/
+        this.background = '';
+        /** Custom text color as hex code. If not provided, defaults to white **/
+        this.initialsColor = '';
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
+    }
+    componentDidLoad() {
+        if (this.normalizedUsername.length <= 0 && this.variant !== AVATAR_VARIANT.ICON)
+            console.warn('[BorealDS Avatar] Missing required `username` prop. The avatar relies on it to display initials or name.');
+    }
+    checkPropValues() {
+        validatePropValue(Object.values(AVATAR_VARIANT), AVATAR_VARIANT.FULL, this.el, 'variant');
+    }
+    get normalizedUsername() {
+        return this.username.trim();
+    }
+    /**
+     * Utility function to extract initials from the username.
+     * Takes the first letter of the first and last name.
+     * Examples: "John Doe" -> "JD", "John" -> "J", "" -> ""
+     *
+     * @param name - The full name to extract initials from
+     * @returns The initials (up to 2 characters)
+     */
+    extractInitials(name = '') {
+        if (name.length === 0)
+            return '';
+        const nameParts = name
+            .trim()
+            .split(/\s+/)
+            .filter(part => part.length > 0);
+        if (nameParts.length === 0)
+            return '';
+        if (nameParts.length === 1)
+            return nameParts[0].charAt(0).toUpperCase();
+        const firstLetter = nameParts[0].charAt(0).toUpperCase();
+        const lastLetter = nameParts[nameParts.length - 1].charAt(0).toUpperCase();
+        return `${firstLetter}${lastLetter}`;
+    }
+    getAvatarStyles() {
+        const customBackground = this.background || 'var(--boreal-ui-success-base)';
+        const customTextColor = this.initialsColor || 'var(--boreal-text-inverse)';
+        return {
+            ['--bds-avatar-background']: `${customBackground}`,
+            ['--bds-avatar-initials-color']: `${customTextColor}`,
+        };
+    }
+    render() {
+        const initials = this.extractInitials(this.normalizedUsername);
+        const avatarAriaLabel = this.normalizedUsername.length > 0 ? `User name: ${this.normalizedUsername}` : 'User name';
+        const showIcon = this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.ICON;
+        const showName = this.normalizedUsername && (this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.NAME);
+        return (h(Host, { key: '8c3cc5b02c02997a8aad688ae043522d07bc3239', class: "bds-avatar", role: "img", "aria-label": avatarAriaLabel, ...this.inheritedAttributes }, h("div", { key: '357ec2fbb0f4ad6c9b3fa54da78c55eab0a4f7f7', class: "bds-avatar__container" }, showIcon && (h("div", { key: '2dbc77e00bedf5e67f08337dad76eeca9fcffb28', class: "bds-avatar__circle", style: this.getAvatarStyles() }, h("span", { key: '6bbd987437cf03bc573363d86092349da5d12521', class: "bds-avatar__initials" }, initials))), showName && h("span", { key: '05e0480670c5ba15b8518325910a661aefb32da8', class: "bds-avatar__name" }, this.normalizedUsername))));
+    }
+    get el() { return getElement(this); }
+};
+BdsAvatar.style = bdsAvatarCss();
+
+export { BdsAvatar as bds_avatar };

package/dist/esm/bds-badge.entry.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { S as STATUS_VARIANT } from './states-Bfazyxqi.js';
+import { v as validatePropValue } from './validateProps-kGnB15Lz.js';
+
+const BADGE_VARIANT = {
+    ...STATUS_VARIANT,
+    DEFAULT: 'default',
+};
+
+const bdsBadgeCss = () => `@charset "UTF-8";.bds-badge{color:var(--boreal-text-default-ink);text-align:center;font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-xs);font-style:normal;font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-xs);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;min-height:var(--boreal-spacing-ml);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-2xs);-ms-flex-pack:center;justify-content:center;gap:var(--boreal-spacing-3xs);border-radius:var(--boreal-radius-xs)}.bds-badge--default{color:var(--boreal-text-default-ink);background-color:var(--boreal-ui-base-light)}.bds-badge--default>[slot=icon]{display:contents;color:var(--boreal-icon-base)}.bds-badge--info{color:var(--boreal-text-information-dark);background-color:var(--boreal-ui-info-light)}.bds-badge--info>[slot=icon]{display:contents;color:var(--boreal-icon-info-dark)}.bds-badge--success{color:var(--boreal-text-success-dark);background-color:var(--boreal-ui-success-light)}.bds-badge--success>[slot=icon]{display:contents;color:var(--boreal-icon-success-dark)}.bds-badge--warning{color:var(--boreal-text-warning-dark);background-color:var(--boreal-ui-warning-light)}.bds-badge--warning>[slot=icon]{display:contents;color:var(--boreal-icon-warning-dark)}.bds-badge--danger{color:var(--boreal-text-danger-dark);background-color:var(--boreal-ui-danger-light)}.bds-badge--danger>[slot=icon]{display:contents;color:var(--boreal-icon-danger-dark)}.bds-badge--disabled{opacity:0.5;pointer-events:none}`;
+
+const BdsBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'. */
+        this.variant = BADGE_VARIANT.DEFAULT;
+        /** Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false. */
+        this.disabled = false;
+    }
+    /** Validates the `variant` prop against allowed values and resets to the default if invalid. */
+    checkPropValues() {
+        validatePropValue(Object.values(BADGE_VARIANT), BADGE_VARIANT.DEFAULT, this.el, 'variant');
+    }
+    /** Runs prop validation before the component is first rendered. */
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    /** Builds the BEM class map applied to the host element based on the current prop values. */
+    get badgeClasses() {
+        return {
+            'bds-badge': true,
+            [`bds-badge--${this.variant}`]: true,
+            'bds-badge--disabled': this.disabled,
+        };
+    }
+    render() {
+        return (h(Host, { key: 'fd04d8986fd170056769871a07f838c3cf200108', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '0186c80b8fbce04a7c96949ca39ecf0319abf352', name: "icon" }), h("slot", { key: 'd79b91a4c5b93280c977dce033e0e05fad2c7524' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "variant": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsBadge.style = bdsBadgeCss();
+
+export { BdsBadge as bds_badge };

package/dist/esm/bds-banner.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-D4EFsvs1.js';
-import { S as STATUS_VARIANT } from './states-BhTPNsBb.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { S as STATUS_VARIANT } from './states-Bfazyxqi.js';
 import { i as inheritAttributes, a as inheritAriaAttributes } from './attributes-CaHOghy5.js';
 
-const bdsBannerCss = () => `@charset "UTF-8";.bds-banner{position:relative;display:-ms-flexbox;display:flex;border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-info-base);border-radius:var(--boreal-radius-xs);border-left:0;font-family:var(--boreal-typography-font-family-primary);height:100%;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.bds-banner__vertical-line{width:var(--boreal-spacing-2xs);border-top-left-radius:var(--boreal-radius-xs);border-bottom-left-radius:var(--boreal-radius-xs);background-color:var(--boreal-stroke-info-base)}.bds-banner__container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%;gap:var(--boreal-spacing-xs);padding:var(--boreal-spacing-s)}.bds-banner__content{width:100%}.bds-banner__title{font-weight:var(--boreal-typography-font-weight-semibold);font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md)}.bds-banner__body{padding-top:var(--boreal-spacing-2xs);font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-sm)}.bds-banner__actions{padding-top:var(--boreal-spacing-s);min-height:0px}.bds-banner__actions:empty{display:none}.bds-banner__status-icon{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);margin-top:var(--boreal-spacing-3xs)}.bds-banner__close-icon{background:none;border:none;-ms-flex-item-align:start;align-self:start;font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-neutral-base);cursor:pointer}.bds-banner--info{border-color:var(--boreal-stroke-info-base);background-color:var(--boreal-ui-info-lighter)}.bds-banner--info .bds-banner__vertical-line{background-color:var(--boreal-stroke-info-base)}.bds-banner--info .bds-banner__status-icon{color:var(--boreal-stroke-info-base)}.bds-banner--success{border-color:var(--boreal-stroke-success-base);background-color:var(--boreal-ui-success-lighter)}.bds-banner--success .bds-banner__vertical-line{background-color:var(--boreal-stroke-success-base)}.bds-banner--success .bds-banner__status-icon{color:var(--boreal-stroke-success-base)}.bds-banner--warning{border-color:var(--boreal-stroke-warning);background-color:var(--boreal-ui-warning-lighter)}.bds-banner--warning .bds-banner__vertical-line{background-color:var(--boreal-stroke-warning)}.bds-banner--warning .bds-banner__status-icon{color:var(--boreal-stroke-warning)}.bds-banner--danger{border-color:var(--boreal-stroke-danger-base);background-color:var(--boreal-ui-danger-lighter)}.bds-banner--danger .bds-banner__vertical-line{background-color:var(--boreal-stroke-danger-base)}.bds-banner--danger .bds-banner__status-icon{color:var(--boreal-stroke-danger-base)}.bds-banner--closing{opacity:0;height:0}.bds-banner--hidden{display:none}`;
+const bdsBannerCss = () => `@charset "UTF-8";.bds-banner{position:relative;display:-ms-flexbox;display:flex;border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-info-base);border-radius:var(--boreal-radius-xs);border-left:0;font-family:var(--boreal-typography-font-family-primary);height:100%;-webkit-transition:opacity 0.3s ease-out;transition:opacity 0.3s ease-out}.bds-banner__vertical-line{width:var(--boreal-spacing-2xs);border-top-left-radius:var(--boreal-radius-xs);border-bottom-left-radius:var(--boreal-radius-xs);background-color:var(--boreal-stroke-info-base)}.bds-banner__container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%;gap:var(--boreal-spacing-xs);padding:var(--boreal-spacing-s)}.bds-banner__content{width:100%}.bds-banner__title{font-weight:var(--boreal-typography-font-weight-semibold);font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md)}.bds-banner__body{padding-top:var(--boreal-spacing-2xs);font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-sm)}.bds-banner__actions{padding-top:var(--boreal-spacing-s);min-height:0px}.bds-banner__actions:empty{display:none}.bds-banner__status-icon{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);margin-top:var(--boreal-spacing-3xs)}.bds-banner__close-icon{background:none;border:none;-ms-flex-item-align:start;align-self:start;font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-neutral-base);cursor:pointer}.bds-banner--info{border-color:var(--boreal-stroke-info-base);background-color:var(--boreal-ui-info-lighter)}.bds-banner--info .bds-banner__vertical-line{background-color:var(--boreal-stroke-info-base)}.bds-banner--info .bds-banner__status-icon{color:var(--boreal-stroke-info-base)}.bds-banner--success{border-color:var(--boreal-stroke-success-base);background-color:var(--boreal-ui-success-lighter)}.bds-banner--success .bds-banner__vertical-line{background-color:var(--boreal-stroke-success-base)}.bds-banner--success .bds-banner__status-icon{color:var(--boreal-stroke-success-base)}.bds-banner--warning{border-color:var(--boreal-stroke-warning);background-color:var(--boreal-ui-warning-lighter)}.bds-banner--warning .bds-banner__vertical-line{background-color:var(--boreal-stroke-warning)}.bds-banner--warning .bds-banner__status-icon{color:var(--boreal-stroke-warning)}.bds-banner--danger{border-color:var(--boreal-stroke-danger-base);background-color:var(--boreal-ui-danger-lighter)}.bds-banner--danger .bds-banner__vertical-line{background-color:var(--boreal-stroke-danger-base)}.bds-banner--danger .bds-banner__status-icon{color:var(--boreal-stroke-danger-base)}.bds-banner--closing{opacity:0}.bds-banner--hidden{display:none}`;
 
 const BdsBanner = class {
     constructor(hostRef) {
@@ -49,7 +49,14 @@ const BdsBanner = class {
     /**
      * Programmatic method to close the banner and emit the `bdsClose` event
      */
-    async closeBanner() {
+    async open() {
+        if (!this.isOpen)
+            this.isOpen = true;
+    }
+    /**
+     * Programmatic method to close the banner and emit the `bdsClose` event
+     */
+    async close() {
         this.handleCloseBanner();
     }
     handleCloseBanner(e) {
@@ -100,7 +107,7 @@ const BdsBanner = class {
         const closeIcon = this.renderCloseIcon();
         const classes = this.getStyles();
         const iconName = this.getIconName();
-        return (h(Host, { key: 'e53736fa4860cbbade794fdeae7f962b46de83cf', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: 'd2019d19a74602b73283cb8296b3acbdab1c5fa0' }, h("div", { key: 'f640c10fc372d8828a150b65751c757674fe2262', class: "bds-banner__vertical-line" }), h("div", { key: 'b08ac47616e7abde824329f8c713537eef58dd75', class: "bds-banner__container" }, h("div", { key: '2d168d2426ae68ee40547045ede9b780407034da', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: 'db079b36701222dd04f93030699264400714d6a6', "aria-hidden": "true", class: iconName })), h("div", { key: 'bf3425ec9ddaa61ddd42543dd9e469365f59b812', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: 'b4b270a4007a3326570667736d05d2dbfacdec73', class: "bds-banner__title" }, h("slot", { key: 'cf18b1b2ef02370ae6266188143de16156a98b18', name: "title" })), h("div", { key: '5008494eb66789884751de0259f4310cc43071ea', class: "bds-banner__body" }, h("slot", { key: '54d9b0af54ca113b894cde911287dee26619c5fd' })), h("div", { key: '748b00f58364df57f2ae26cc99d58bf291c1255f', class: "bds-banner__actions" }, h("slot", { key: '10a0b7fa7219c0da1578b05016e563a9068935ce', name: "actions" }))), this.closable && closeIcon)))));
+        return (h(Host, { key: '1a07d4c50cb16abf16a6202fc0a6453028030c94', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '2fa91a3e46f6660cb80302bc56619c107f3cf1a9' }, h("div", { key: '406c8ce24b6c8d9467f83baea3c521ef823b7ff6', class: "bds-banner__vertical-line" }), h("div", { key: '1a2c84c6480397e179a212056e0d9896a4ffcd5c', class: "bds-banner__container" }, h("div", { key: 'c3a259dae39176720f74fb4961b01166956f8e5c', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '6d24dc0d611b85a0c9f524f29948552607fc124f', "aria-hidden": "true", class: iconName })), h("div", { key: '6c4af02b7d783417cd016c81214ae4ae9a9040ff', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '74d4b78b0e6a058c48d2681b0d49742266f6653d', class: "bds-banner__title" }, h("slot", { key: '65baf563140619dd68ba6da5b1a2e61acfae61e6', name: "title" })), h("div", { key: 'a24a1af35cf217bcdadff0a9c2d3bbef8d21e232', class: "bds-banner__body" }, h("slot", { key: '5ea6dd31fbcf8eb9fd06426a2e98e36c537857b1' })), h("div", { key: '41cc79e73c212e381f8bfca997d62710f94e6ba4', class: "bds-banner__actions" }, h("slot", { key: '0266cc63e42d35a7fcbb836dfe7d11c47f192321', name: "actions" }))), this.closable && closeIcon)))));
     }
     get el() { return getElement(this); }
 };