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

package/dist/collection/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/collection/mixins/anchored.mixin.js

@@ -2,8 +2,7 @@ import { PositioningEngine } from "../services/floating/positioning.service";
 import { floatingMixin } from "./floating.mixin";
 import { Logger } from "../services/logger/Logger";
 import { autoUpdate } from "@floating-ui/dom";
-import { KEYBOARD } from "../utils/constants/common/Keys";
-import { EVENTS } from "../utils/constants/common/Events";
+import { EVENTS, KEYBOARD } from "../utils/constants/index";
 /**
  * Positioning and trigger mixin for anchor-based floating elements.
  *
@@ -79,6 +78,9 @@ import { EVENTS } from "../utils/constants/common/Events";
  */
 export const anchoredMixin = (Base) => {
     class Anchored extends floatingMixin(Base) {
+        constructor() {
+            super();
+        }
         /**
          * Default positioning options.
          * Override this getter in the component to customize placement,
@@ -87,6 +89,9 @@ export const anchoredMixin = (Base) => {
         get options() {
             return { placement: 'bottom', offset: 8, strategy: 'fixed' };
         }
+        get hooks() {
+            return {};
+        }
         /**
          * Shows the floating element using the Popover API
          * and starts position auto-update relative to `triggerSlot`.
@@ -109,12 +114,22 @@ export const anchoredMixin = (Base) => {
          * @returns `false` if `triggerSlot` is not set, otherwise delegates to super
          */
         onBeforeShow(target) {
-            if (this.triggerSlot === null) {
+            if (this.triggerSlot === null || this.triggerSlot === undefined) {
                 this.logger.error('AnchoredMixin.show', 'triggerSlot is required');
                 return false;
             }
             return super.onBeforeShow(target);
         }
+        /**
+         * Hides the focus from the floating element.
+         * This is necessary to prevent the focus from being trapped inside the floating element.
+         */
+        hideFocus() {
+            const focusedInside = this.floatingContent?.contains(document.activeElement);
+            if (focusedInside) {
+                document.activeElement?.blur();
+            }
+        }
         /**
          * Hides the floating element using the Popover API
          * and stops position auto-update.
@@ -123,6 +138,7 @@ export const anchoredMixin = (Base) => {
          */
         hideElement() {
             this.stopAutoUpdate();
+            this.hideFocus();
             this.floatingContent?.hidePopover();
             this.isVisible = false;
         }
@@ -196,7 +212,10 @@ export const anchoredMixin = (Base) => {
                 void this.updatePosition(triggerElement, floatingElement, options, onPositionUpdate);
             };
             sync(); // run once immediately
-            this.cleanupAutoUpdate = autoUpdate(triggerElement, floatingElement, sync);
+            this.cleanupAutoUpdate = autoUpdate(triggerElement, floatingElement, sync, {
+                elementResize: true,
+                layoutShift: true,
+            });
         }
         /**
          * Stops automatic position synchronization and clears the cleanup reference.
@@ -240,6 +259,26 @@ export const anchoredMixin = (Base) => {
             }
             this.stopAutoUpdate();
         }
+        subscribeToTrigger(trigger) {
+            if (this.hooks.subscribeToTrigger !== undefined)
+                this.hooks.subscribeToTrigger(trigger);
+        }
+        onBeforeLoad() {
+            const parent = this.el.parentElement;
+            if (parent === null)
+                return;
+            const trigger = parent.querySelector('[bds-tooltip], [bds-popover]') ||
+                parent.closest('.bds-button, .bds-input, .bds-select') ||
+                parent;
+            if (trigger.isConnected) {
+                this.triggerSlot = trigger;
+                this.subscribeToTrigger(trigger);
+            }
+        }
+        componentDidLoad() {
+            this.onBeforeLoad();
+            this.hooks.onBeforeLoad?.(this.el);
+        }
         /**
          * Initializes the positioning engine, logger, and binds lifecycle methods
          * so they can be safely passed as event listener callbacks.
@@ -267,6 +306,7 @@ export const anchoredMixin = (Base) => {
             this.stopAutoUpdate();
             this.hide();
         }
+        static get elementRef() { return "el"; }
     }
     return Anchored;
 };

package/dist/collection/mixins/backdrop.mixin.js

@@ -0,0 +1,162 @@
+import { floatingMixin } from "./floating.mixin";
+export const backdropMixin = (Base) => {
+    /**
+     * Backdrop mixin class that extends floatingMixin to provide backdrop functionality for dialogs.
+     * Handles showing/hiding dialogs, backdrop clicks, escape key handling, and scroll locking.
+     *
+     * @example
+     * ```typescript
+     * import { Component, Mixin, h } from '@stencil/core';
+     * import { backdropMixin } from './backdrop.mixin';
+     * import { BackdropHooks } from '@/services/floating/interfaces/Backdrop';
+     *
+     * @Component({ tag: 'my-dialog' })
+     * export class MyDialog extends Mixin(backdropMixin) {
+     *
+     *   // Optional: Override hooks for custom behavior
+     *   get hooks(): BackdropHooks {
+     *     return {
+     *       onAfterShow: () => console.log('Dialog shown'),
+     *       onBeforeClose: () => console.log('Dialog closing'),
+     *       onAfterHide: () => console.log('Dialog hidden'),
+     *     };
+     *   }
+     *
+     *   render() {
+     *     return (
+     *       <dialog
+     *         ref={(el) => (this.dialogElement = el)}
+     *         onClick={(e) => this.handleBackdropClick(e)}
+     *         onKeyDown={(e) => this.handleKeydown(e)}
+     *       >
+     *         <div>Dialog content</div>
+     *       </dialog>
+     *     );
+     *   }
+     * }
+     * ```
+     */
+    class Backdrop extends floatingMixin(Base) {
+        constructor() {
+            super(...arguments);
+            /**
+             * Indicates whether the dialog is currently in the process of closing.
+             */
+            this.isClosing = false;
+        }
+        /**
+         * Override in component to provide custom hooks.
+         * @returns {BackdropHooks} The custom hooks object.
+         */
+        get hooks() {
+            return {};
+        }
+        /**
+         * Shows the dialog element by calling showModal and setting isVisible to true.
+         * Overrides floating mixin showElement()
+         */
+        showElement() {
+            this.dialogElement.showModal();
+            this.isVisible = true;
+        }
+        /**
+         * Hides the dialog element by calling close and setting isVisible to false, and resets isClosing.
+         * Overrides floating mixin hideElement()
+         */
+        hideElement() {
+            this.dialogElement.close();
+            this.isVisible = false;
+            this.isClosing = false;
+        }
+        /**
+         * Closes the dialog element, preventing multiple close attempts and calling hooks if available.
+         * * If the onBEforeClose() hook is passed, the implementation SHOULD call the hide() function.
+         */
+        closeElement() {
+            if (this.preventClose)
+                return;
+            if (this.isClosing)
+                return;
+            this.isClosing = true;
+            if (this.hooks.onBeforeClose !== undefined)
+                this.onBeforeClose(this.dialogElement);
+            else
+                this.hide();
+        }
+        /**
+         * Toggles the visibility of the dialog: closes if visible, shows if hidden.
+         */
+        toggle() {
+            this.isVisible ? this.closeElement() : this.show();
+        }
+        /**
+         * Overrides the hooks inherited from floating mixin.
+         * Hook called after the dialog is shown. Locks the scroll and calls custom hooks.
+         * @param target The target HTMLElement
+         */
+        onAfterShow(target) {
+            this.previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            this.hooks.onAfterShow?.(target);
+        }
+        /**
+         * Hook called after the dialog is hidden. Restores the previous overflow style and calls custom hooks.
+         * @param target The target HTMLElement
+         */
+        onAfterHide(target) {
+            document.body.style.overflow = this.previousOverflow ?? '';
+            this.hooks.onAfterHide?.(target);
+        }
+        /**
+         * A lifecycle hook that is invoked just before the dialog begins to close.
+         * This provides an opportunity to perform custom actions, such as triggering closing animations,
+         * before the dialog is actually hidden from view.
+         * * If the onBeforeClose() hook is passed, the implementation SHOULD call the hide() function.
+         * @param target The target HTMLElement, typically the dialog element.
+         */
+        onBeforeClose(target) {
+            this.hooks.onBeforeClose?.(target);
+        }
+        /**
+         * Handle backdrop click to close the dialog.
+         * @param e Mouse Event at click
+         */
+        handleBackdropClick(e) {
+            if (!this.backdropClose)
+                return;
+            if (e.target === this.dialogElement) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                this.closeElement();
+            }
+        }
+        /**
+         * Handle Escape keydown to close the dialog.
+         * @param ev KeyboardEvent
+         */
+        handleKeydown(ev) {
+            if (ev.key === 'Escape') {
+                ev.preventDefault();
+                ev.stopImmediatePropagation();
+            }
+            if (!this.escapeClose || ev.repeat || ev.key !== 'Escape')
+                return;
+            this.closeElement();
+        }
+        /**
+         * Adds a transition class to the dialog element.
+         * Cleanup and closing logic must be handled by the caller.
+         */
+        addTransitionAnimation(animationClassName) {
+            this.dialogElement.classList.add(animationClassName);
+        }
+        /**
+         * Removes a transition class to the dialog element.
+         * Calling must be handled by the caller.
+         */
+        removeTransitionAnimation(animationClassName) {
+            this.dialogElement.classList.remove(animationClassName);
+        }
+    }
+    return Backdrop;
+};