npm - @beeq/core - Versions diffs - 1.8.0-beta.4 → 1.8.0-beta.6 - Mend

@beeq/core 1.8.0-beta.4 → 1.8.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (359) hide show

package/dist/esm/bq-notification.entry.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
 import { d as debounce } from './debounce-3e72f418.js';
 import { v as validatePropValue } from './props-3bf7f546.js';
 import { b as hasSlotContent } from './slot-58bfedb5.js';
@@ -12,7 +11,7 @@ import './isNil-2290f64e.js';
 const NOTIFICATION_TYPE = ['error', 'info', 'neutral', 'success', 'warning'];
-const bqNotificationCss = ".transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bq-notification,.shadow-\\[shadow\\:--bq-notification--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.relative{position:relative}.block{display:block}.flex{display:flex}.hidden{display:none}.items-start{align-items:flex-start}.gap-xs{gap:var(--bq-spacing-xs)}.rounded-\\[--bq-notification--border-radius\\]{border-radius:var(--bq-notification--border-radius)}.rounded-s{border-radius:var(--bq-radius--s)}.border-0{border-width:0}.bg-\\[--bq-notification--background\\]{background-color:var(--bq-notification--background)}.text-\\[color\\:--bq-notification--icon-color-error\\]{color:var(--bq-notification--icon-color-error)}.text-\\[color\\:--bq-notification--icon-color-info\\]{color:var(--bq-notification--icon-color-info)}.text-\\[color\\:--bq-notification--icon-color-neutral\\]{color:var(--bq-notification--icon-color-neutral)}.text-\\[color\\:--bq-notification--icon-color-success\\]{color:var(--bq-notification--icon-color-success)}.text-\\[color\\:--bq-notification--icon-color-warning\\]{color:var(--bq-notification--icon-color-warning)}.shadow-\\[shadow\\:--bq-notification--box-shadow\\]{--tw-shadow:var(--bq-notification--box-shadow);--tw-shadow-colored:var(--bq-notification--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bs-fit{block-size:fit-content}.min-is-\\[--bq-notification--min-width\\]{min-inline-size:var(--bq-notification--min-width)}.p-b-0{padding-block:0}.p-b-\\[--bq-notification--padding\\]{padding-block:var(--bq-notification--padding)}.p-i-0{padding-inline:0}.p-i-\\[--bq-notification--padding\\]{padding-inline:var(--bq-notification--padding)}.m-bs-m{margin-block-start:var(--bq-spacing-m)}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-notification--background:var(--bq-ui--primary);--bq-notification--box-shadow:var(--bq-box-shadow--l);--bq-notification--border-color:transparent;--bq-notification--border-radius:var(--bq-radius--s);--bq-notification--border-style:none;--bq-notification--border-width:unset;--bq-notification--content-footer-gap:var(--bq-spacing-m);--bq-notification--title-body-gap:var(--bq-spacing-s);--bq-notification--icon-color-error:var(--bq-icon--danger);--bq-notification--icon-color-info:var(--bq-icon--brand);--bq-notification--icon-color-neutral:var(--bq-icon--primary);--bq-notification--icon-color-success:var(--bq-icon--success);--bq-notification--icon-color-warning:var(--bq-icon--warning);--bq-notification--padding:var(--bq-spacing-m);--bq-notification--min-width:320px;display:block}:host(.is-hidden){display:none}.bq-notification{--tw-shadow:var(--bq-notification--box-shadow);--tw-shadow-colored:var(--bq-notification--box-shadow);background-color:var(--bq-notification--background);border-radius:var(--bq-notification--border-radius);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;min-inline-size:var(--bq-notification--min-width);padding-block:var(--bq-notification--padding);padding-inline:var(--bq-notification--padding);position:relative;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.notification--icon.color-error{color:var(--bq-notification--icon-color-error)}.notification--icon.color-info{color:var(--bq-notification--icon-color-info)}.notification--icon.color-neutral{color:var(--bq-notification--icon-color-neutral)}.notification--icon.color-success{color:var(--bq-notification--icon-color-success)}.notification--icon.color-warning{color:var(--bq-notification--icon-color-warning)}.notification--close::part(button){block-size:fit-content;border-radius:var(--bq-radius--s);border-width:0;padding-block:0;padding-inline:0}[part=footer] ::slotted(*){align-items:flex-start;display:flex;gap:var(--bq-spacing-xs)}[part=body] ::slotted(*),[part=footer] ::slotted(*){display:block;margin-block-start:var(--bq-spacing-m)}.-translate-y-xs,.sm\\:translate-x-0,.sm\\:translate-x-s,.sm\\:translate-y-0,.transform,.translate-y-0,.translate-y-xs{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}.static{position:static}.absolute{position:absolute}.me-xs{margin-inline-end:var(--bq-spacing-xs)}.\\!hidden{display:none!important}.-translate-y-xs{--tw-translate-y:calc(var(--bq-spacing-xs)*-1)}.-translate-y-xs,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.translate-y-xs{--tw-translate-y:var(--bq-spacing-xs)}.transform,.translate-y-xs{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-\\[--bq-notification--content-footer-gap\\]{gap:var(--bq-notification--content-footer-gap)}.gap-\\[--bq-notification--title-body-gap\\]{gap:var(--bq-notification--title-body-gap)}.text-left{text-align:left}.align-top{vertical-align:top}.text-s{font-size:var(--bq-font-size--s)}.font-semibold{font-weight:var(--bq-font-weight--semibold)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.inset-ie-5{inset-inline-end:1.25rem}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:640px){.sm\\:translate-x-0{--tw-translate-x:0px}.sm\\:translate-x-0,.sm\\:translate-x-s{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\\:translate-x-s{--tw-translate-x:var(--bq-spacing-s)}.sm\\:translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}.\\[\\&\\:\\:part\\(label\\)\\]\\:inline-flex::part(label){display:inline-flex}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.text-\\[color\\:--bq-icon--color\\]{color:var(--bq-icon--color)}.bs-\\[--bq-icon--size\\]{block-size:var(--bq-icon--size)}.is-\\[--bq-icon--size\\]{inline-size:var(--bq-icon--size)}";
+const bqNotificationCss = ".transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bq-notification,.shadow-\\[shadow\\:--bq-notification--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.relative{position:relative}.block{display:block}.flex{display:flex}.hidden{display:none}.items-start{align-items:flex-start}.gap-xs{gap:var(--bq-spacing-xs)}.rounded-\\[--bq-notification--border-radius\\]{border-radius:var(--bq-notification--border-radius)}.rounded-s{border-radius:var(--bq-radius--s)}.border-0{border-width:0}.bg-\\[--bq-notification--background\\]{background-color:var(--bq-notification--background)}.text-\\[color\\:--bq-notification--icon-color-error\\]{color:var(--bq-notification--icon-color-error)}.text-\\[color\\:--bq-notification--icon-color-info\\]{color:var(--bq-notification--icon-color-info)}.text-\\[color\\:--bq-notification--icon-color-neutral\\]{color:var(--bq-notification--icon-color-neutral)}.text-\\[color\\:--bq-notification--icon-color-success\\]{color:var(--bq-notification--icon-color-success)}.text-\\[color\\:--bq-notification--icon-color-warning\\]{color:var(--bq-notification--icon-color-warning)}.shadow-\\[shadow\\:--bq-notification--box-shadow\\]{--tw-shadow:var(--bq-notification--box-shadow);--tw-shadow-colored:var(--bq-notification--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bs-fit{block-size:fit-content}.min-is-\\[--bq-notification--min-width\\]{min-inline-size:var(--bq-notification--min-width)}.p-b-0{padding-block:0}.p-b-\\[--bq-notification--padding\\]{padding-block:var(--bq-notification--padding)}.p-i-0{padding-inline:0}.p-i-\\[--bq-notification--padding\\]{padding-inline:var(--bq-notification--padding)}.m-bs-m{margin-block-start:var(--bq-spacing-m)}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-notification--background:var(--bq-ui--primary);--bq-notification--box-shadow:var(--bq-box-shadow--l);--bq-notification--border-color:transparent;--bq-notification--border-radius:var(--bq-radius--s);--bq-notification--border-style:none;--bq-notification--border-width:unset;--bq-notification--content-footer-gap:var(--bq-spacing-m);--bq-notification--title-body-gap:var(--bq-spacing-s);--bq-notification--icon-color-error:var(--bq-icon--danger);--bq-notification--icon-color-info:var(--bq-icon--brand);--bq-notification--icon-color-neutral:var(--bq-icon--primary);--bq-notification--icon-color-success:var(--bq-icon--success);--bq-notification--icon-color-warning:var(--bq-icon--warning);--bq-notification--padding:var(--bq-spacing-m);--bq-notification--min-width:320px;display:block}:host(.is-hidden){display:none}.bq-notification{--tw-shadow:var(--bq-notification--box-shadow);--tw-shadow-colored:var(--bq-notification--box-shadow);background-color:var(--bq-notification--background);border-radius:var(--bq-notification--border-radius);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);display:flex;min-inline-size:var(--bq-notification--min-width);padding-block:var(--bq-notification--padding);padding-inline:var(--bq-notification--padding);position:relative;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.notification--icon.color-error{color:var(--bq-notification--icon-color-error)}.notification--icon.color-info{color:var(--bq-notification--icon-color-info)}.notification--icon.color-neutral{color:var(--bq-notification--icon-color-neutral)}.notification--icon.color-success{color:var(--bq-notification--icon-color-success)}.notification--icon.color-warning{color:var(--bq-notification--icon-color-warning)}.notification--close::part(button){block-size:fit-content;border-radius:var(--bq-radius--s);border-width:0;padding-block:0;padding-inline:0}[part=footer] ::slotted(*){align-items:flex-start;display:flex;gap:var(--bq-spacing-xs)}[part=body] ::slotted(*),[part=footer] ::slotted(*){display:block;margin-block-start:var(--bq-spacing-m)}.-translate-y-xs,.sm\\:translate-x-0,.sm\\:translate-x-s,.sm\\:translate-y-0,.transform,.translate-y-0,.translate-y-xs{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}.static{position:static}.absolute{position:absolute}.me-xs{margin-inline-end:var(--bq-spacing-xs)}.\\!hidden{display:none!important}.-translate-y-xs{--tw-translate-y:calc(var(--bq-spacing-xs)*-1)}.-translate-y-xs,.translate-y-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y:0px}.translate-y-xs{--tw-translate-y:var(--bq-spacing-xs)}.transform,.translate-y-xs{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-\\[--bq-notification--content-footer-gap\\]{gap:var(--bq-notification--content-footer-gap)}.gap-\\[--bq-notification--title-body-gap\\]{gap:var(--bq-notification--title-body-gap)}.text-left{text-align:left}.align-top{vertical-align:top}.text-s{font-size:var(--bq-font-size--s)}.font-semibold{font-weight:var(--bq-font-weight--semibold)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.opacity-0{opacity:0}.opacity-100{opacity:1}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-100{transition-duration:.1s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.inset-ie-5{inset-inline-end:1.25rem}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:640px){.sm\\:translate-x-0{--tw-translate-x:0px}.sm\\:translate-x-0,.sm\\:translate-x-s{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\\:translate-x-s{--tw-translate-x:var(--bq-spacing-s)}.sm\\:translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}.\\[\\&\\:\\:part\\(label\\)\\]\\:inline-flex::part(label){display:inline-flex}.text-\\[color\\:--bq-icon--color\\]{color:var(--bq-icon--color)}.bs-\\[--bq-icon--size\\]{block-size:var(--bq-icon--size)}.is-\\[--bq-icon--size\\]{inline-size:var(--bq-icon--size)}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}";
 const BqNotificationStyle0 = bqNotificationCss;
 const NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';
@@ -25,7 +24,7 @@ const BqNotification = class {
         this.bqAfterClose = createEvent(this, "bqAfterClose", 7);
         this.hasContent = false;
         this.hasFooter = false;
-        this.notificationPortal = document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`);
+        this.notificationPortal = typeof window !== 'undefined' ? document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`) : null;
         this.autoDismiss = undefined;
         this.border = 's';
         this.disableClose = undefined;
@@ -79,7 +78,7 @@ const BqNotification = class {
     // =====================================
     connectedCallback() {
         const { notificationPortal } = this;
-        if (!notificationPortal && typeof document !== 'undefined') {
+        if (!notificationPortal && typeof window !== 'undefined') {
             this.notificationPortal = Object.assign(document.createElement('div'), {
                 className: NOTIFICATION_PORTAL_SELECTOR,
             });
@@ -183,11 +182,11 @@ const BqNotification = class {
         const style = {
             ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),
         };
-        return (h(Host, { key: '635a7cacceb2d9611a4b07a950686add7e1d6dfa', style: style, class: { 'is-hidden': !this.open }, "aria-hidden": !this.open ? 'true' : 'false', hidden: !this.open ? 'true' : 'false', role: "alert" }, h("div", { key: 'e58a5c744e18a45e2dfecbbe66a24e1c354ed402', class: "bq-notification", "data-transition-enter": "transform transition ease-out duration-300", "data-transition-enter-start": "translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s", "data-transition-enter-end": "translate-y-0 opacity-100 sm:translate-x-0", "data-transition-leave": "transform transition ease-in duration-100", "data-transition-leave-start": "translate-y-0 opacity-100 sm:translate-x-0", "data-transition-leave-end": "-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s", ref: (div) => (this.notificationElem = div), part: "wrapper" }, !this.disableClose && (h("bq-button", { key: '9c6420dcc9429bb2fb2799fe9f4ebddee4e01901', class: "notification--close absolute inset-ie-5 [&::part(label)]:inline-flex", appearance: "text", size: "small", onClick: () => this.hide(), part: "btn-close" }, h("slot", { key: '861b72cfeceb7e0bc6fce67ce6a23838e7979031', name: "btn-close" }, h("bq-icon", { key: 'fde9f6eb4189dca4045ba9263c72ee867ae7d6d0', name: "x" })))), h("div", { key: 'd866ddeb7d7c74ba33b41e5377ab8902340a6c58', class: {
+        return (h(Host, { key: '411d19d1f08119b6c7fe7853e49195a5b9e12cd9', style: style, class: { 'is-hidden': !this.open }, "aria-hidden": !this.open ? 'true' : 'false', hidden: !this.open ? 'true' : 'false', role: "alert" }, h("div", { key: '45f9cd844fde4725a766bd9af611b1ba37f92acd', class: "bq-notification", "data-transition-enter": "transform transition ease-out duration-300", "data-transition-enter-start": "translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s", "data-transition-enter-end": "translate-y-0 opacity-100 sm:translate-x-0", "data-transition-leave": "transform transition ease-in duration-100", "data-transition-leave-start": "translate-y-0 opacity-100 sm:translate-x-0", "data-transition-leave-end": "-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s", ref: (div) => (this.notificationElem = div), part: "wrapper" }, !this.disableClose && (h("bq-button", { key: '9f4115b99545244551ee758430e4bb5d7f72a81b', class: "notification--close absolute inset-ie-5 [&::part(label)]:inline-flex", appearance: "text", size: "small", onClick: () => this.hide(), part: "btn-close" }, h("slot", { key: '5472deffc786ecbd62374f7fd28968bceac2aa5b', name: "btn-close" }, h("bq-icon", { key: '33e3ca7621c377aae89fe1c09692568d3caeca11', name: "x" })))), h("div", { key: '8139860988d2ff313310a13757eefee3e76c23d9', class: {
                 '!hidden': this.hideIcon,
                 [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)
                 'notification--icon me-xs flex text-left align-top': true,
-            }, part: "icon-outline" }, h("slot", { key: 'da8c411b03acbe06c44af477a4123b32c645c870', name: "icon" }, h("bq-icon", { key: '09d42073f6496fe8d179526301bac1ff167b81e2', name: this.iconName, part: "icon", exportparts: "base,svg" }))), h("div", { key: '3593124d9e0c874841a8456b3c0ce26e78fefe67', class: "flex flex-col items-start gap-[--bq-notification--content-footer-gap]", part: "main" }, h("div", { key: 'bf70e73d5a73645d670b7e8c65d99323ea325cd3', class: "flex flex-col gap-[--bq-notification--title-body-gap]", part: "content" }, h("div", { key: 'f7866f62899d5e467af450f4e4b054004948dddb', class: "title-font font-semibold leading-regular", part: "title" }, h("slot", { key: 'b40316a74af238c6dd3e865a72a40f44b34bceb4' })), h("div", { key: 'd21bdc707eb85ba9f2a388e40f4c74369a0d6fa6', class: { 'text-s leading-regular': true, '!hidden': !this.hasContent }, ref: (div) => (this.bodyElem = div), part: "body" }, h("slot", { key: '756744bb4587ec9b2b2f8d810e2d030ab98153fb', name: "body", onSlotchange: this.handleContentSlotChange }))), h("div", { key: '24a5390de7f160ef98a184a5e7db50080be91e10', class: { 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }, ref: (div) => (this.footerElem = div), part: "footer" }, h("slot", { key: '0f4a35ca8a0db64372d8f9eb4c73bddcfba32d54', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
+            }, part: "icon-outline" }, h("slot", { key: '46a501d0ef1f7fa1440cac3eac05d51e19c25336', name: "icon" }, h("bq-icon", { key: '6306ef09bff157ef4eca5ee45259d4a17c9da89e', name: this.iconName, part: "icon", exportparts: "base,svg" }))), h("div", { key: '39b62fdb9df69307eb913707a9cc585415064709', class: "flex flex-col items-start gap-[--bq-notification--content-footer-gap]", part: "main" }, h("div", { key: 'c3a061358db3859536429a5c7cce781575bc0740', class: "flex flex-col gap-[--bq-notification--title-body-gap]", part: "content" }, h("div", { key: 'd7bc9f7ccd2e3c66b2ff48f6d8fd1a0687a34570', class: "title-font font-semibold leading-regular", part: "title" }, h("slot", { key: '04f8365658aafe57aa8bc67231560addbddd6eab' })), h("div", { key: '13c7e30888fae485aa127dd2d0cbcddf9a1ef3f4', class: { 'text-s leading-regular': true, '!hidden': !this.hasContent }, ref: (div) => (this.bodyElem = div), part: "body" }, h("slot", { key: '39d07bf713348590855059a0b44efe0d66ee9222', name: "body", onSlotchange: this.handleContentSlotChange }))), h("div", { key: 'dadf3b1c035aa1b2061ab22d0badf8a90a843923', class: { 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }, ref: (div) => (this.footerElem = div), part: "footer" }, h("slot", { key: '4e3075f3f32633d8af9a41468bd1c3972f709404', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
     }
     static get watchers() { return {
         "autoDismiss": ["handleTimeout"],

package/dist/esm/bq-notification.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-notification.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/notification/bq-notification.types.ts","../../packages/beeq/src/components/notification/scss/bq-notification.scss?tag=bq-notification&encapsulation=shadow","../../packages/beeq/src/components/notification/bq-notification.tsx"],"sourcesContent":["export const NOTIFICATION_TYPE = ['error', 'info', 'neutral', 'success', 'warning'] as const;\nexport type TNotificationType = (typeof NOTIFICATION_TYPE)[number];\n\nexport const NOTIFICATION_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TNotificationBorderRadius = (typeof NOTIFICATION_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- /\n/ Notification styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-notification.variables';\n\n:host {\n @apply block;\n}\n\n:host(.is-hidden) {\n @apply hidden;\n}\n\n.bq-notification {\n @apply relative flex transition-all min-is-[--bq-notification--min-width] p-b-[--bq-notification--padding] p-i-[--bq-notification--padding];\n @apply rounded-[--bq-notification--border-radius] bg-[--bq-notification--background] shadow-[shadow:--bq-notification--box-shadow];\n}\n\n/\n Set the notification icon color based on the type value selected\n /\n.notification--icon.color {\n &-error {\n @apply text-[color:--bq-notification--icon-color-error];\n }\n\n &-info {\n @apply text-[color:--bq-notification--icon-color-info];\n }\n\n &-neutral {\n @apply text-[color:--bq-notification--icon-color-neutral];\n }\n\n &-success {\n @apply text-[color:--bq-notification--icon-color-success];\n }\n\n &-warning {\n @apply text-[color:--bq-notification--icon-color-warning];\n }\n}\n\n/\n Tweak the close bq-button styles so it remain small without extra padding\n /\n.notification--close::part(button) {\n @apply rounded-s border-0 bs-fit p-b-0 p-i-0;\n}\n\n/\n Here we guarantee that if the footer actions are wrapped in a div container from the consumer side,\n * the styles get applied to the that wrapping container directly\n /\n[part='footer'] ::slotted() {\n @apply flex items-start gap-xs;\n}\n\n[part='body'],\n[part='footer'] {\n ::slotted() {\n @apply block m-bs-m;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { NOTIFICATION_TYPE, TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { debounce, enter, hasSlotContent, leave, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';\n\n/\n @part base - The `<div>` container of the predefined bq-icon component.\n * @part body - The container `<div>` that wraps the notification description content\n * @part btn-close - The `bq-button` used to close the notification\n * @part content - The container `<div>` that wraps all the notification content (title, description, footer)\n * @part footer - The container `<div>` that wraps the notification footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the notification type\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the notification main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component.\n * @part title - The container `<div>` that wraps the notification title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @slot - The notification title content\n * @slot body - The notification description content\n * @slot footer - The notification footer content\n * @slot icon - The icon to be displayed in the notification\n * @slot btn-close - The close button of the notification\n /\n\n@Component({\n tag: 'bq-notification',\n styleUrl: './scss/bq-notification.scss',\n shadow: true,\n})\nexport class BqNotification {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n private bodyElem: HTMLDivElement;\n private footerElem: HTMLDivElement;\n private notificationElem: HTMLDivElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqNotificationElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasContent = false;\n @State() private hasFooter = false;\n @State() private notificationPortal = document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`);\n\n // Public Property API\n // ========================\n\n /* If true, the notification will automatically hide after the specified amount of time /\n @Prop({ reflect: true }) autoDismiss: boolean;\n\n /* The corder radius of the notification component /\n @Prop({ reflect: true }) border: TNotificationBorderRadius = 's';\n\n /* If true, the close button at the top right of the notification won't be shown /\n @Prop({ reflect: true }) disableClose: boolean;\n\n /* If true, the notification icon won't be shown /\n @Prop({ reflect: true }) hideIcon: boolean;\n\n /* If true, the notification will be shown /\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /* The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"` /\n @Prop({ reflect: true }) time: number = 3000;\n\n /* Type of Notification /\n @Prop({ reflect: true }) type: TNotificationType = 'info';\n\n // Prop lifecycle events\n // =======================\n @Watch('autoDismiss')\n @Watch('time')\n handleTimeout() {\n this.autoDismissDebounce?.cancel();\n if (!this.autoDismiss) return;\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n if (this.open) this.autoDismissDebounce();\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (!(this.autoDismiss && this.open)) return;\n this.autoDismissDebounce();\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(NOTIFICATION_TYPE, 'info', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the notification is hidden /\n @Event() bqHide!: EventEmitter;\n\n /* Callback handler to be called when the notification is shown /\n @Event() bqShow!: EventEmitter;\n\n /* Callback handler to be called after the notification has been opened /\n @Event() bqAfterOpen!: EventEmitter;\n\n /* Callback handler to be called after the notification has been closed /\n @Event() bqAfterClose!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n const { notificationPortal } = this;\n if (!notificationPortal && typeof document !== 'undefined') {\n this.notificationPortal = Object.assign(document.createElement('div'), {\n className: NOTIFICATION_PORTAL_SELECTOR,\n });\n }\n }\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeout();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqAfterClose')\n afterNotificationClose() {\n try {\n const { notificationPortal } = this;\n notificationPortal.removeChild(this.el);\n // Remove the notification portal from the DOM when there are no more notifications\n if (notificationPortal.querySelector(this.el.tagName.toLowerCase()) === null) {\n notificationPortal.remove();\n }\n } catch (error) {\n /\n Skip DOMException error since it could be possible that\n * in some situations the notification portal is missing\n /\n if (error instanceof DOMException) return;\n throw error;\n }\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /* Method to be called to hide the notification component /\n @Method()\n async hide(): Promise<void> {\n await this.handleHide();\n }\n\n /* Method to be called to show the notification component /\n @Method()\n async show(): Promise<void> {\n await this.handleShow();\n }\n\n /* This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically /\n @Method()\n async toast() {\n const { notificationPortal } = this;\n if (notificationPortal?.parentElement === null) {\n document.body.append(notificationPortal);\n }\n\n notificationPortal?.appendChild(this.el);\n requestAnimationFrame(() => {\n this.show();\n });\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleHide = async () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n await leave(this.notificationElem);\n this.open = false;\n this.handleTransitionEnd();\n }\n };\n\n private handleShow = async () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = true;\n await enter(this.notificationElem);\n this.handleTransitionEnd();\n }\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterOpen.emit();\n return;\n }\n\n this.bqAfterClose.emit();\n };\n\n private handleContentSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem);\n };\n\n private handleFooterSlotChange = () => {\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private get iconName(): string {\n const typeMap = {\n error: 'x-circle',\n success: 'check-circle',\n warning: 'warning-circle',\n };\n\n return typeMap[this.type] \|\| 'info';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n style={style}\n class={{ 'is-hidden': !this.open }}\n aria-hidden={!this.open ? 'true' : 'false'}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n >\n <div\n class=\"bq-notification\"\n data-transition-enter=\"transform transition ease-out duration-300\"\n data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-leave=\"transform transition ease-in duration-100\"\n data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n ref={(div) => (this.notificationElem = div)}\n part=\"wrapper\"\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n class=\"notification--close absolute inset-ie-5 [&::part(label)]:inline-flex\"\n appearance=\"text\"\n size=\"small\"\n onClick={() => this.hide()}\n part=\"btn-close\"\n >\n <slot name=\"btn-close\">\n <bq-icon name=\"x\" />\n </slot>\n </bq-button>\n )}\n {/ ICON /}\n <div\n class={{\n '!hidden': this.hideIcon,\n [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)\n 'notification--icon me-xs flex text-left align-top': true,\n }}\n part=\"icon-outline\"\n >\n <slot name=\"icon\">\n <bq-icon name={this.iconName} part=\"icon\" exportparts=\"base,svg\" />\n </slot>\n </div>\n {/ MAIN /}\n <div class=\"flex flex-col items-start gap-[--bq-notification--content-footer-gap]\" part=\"main\">\n <div class=\"flex flex-col gap-[--bq-notification--title-body-gap]\" part=\"content\">\n {/ TITLE /}\n <div class=\"title-font font-semibold leading-regular\" part=\"title\">\n <slot />\n </div>\n {/ BODY /}\n <div\n class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n ref={(div) => (this.bodyElem = div)}\n part=\"body\"\n >\n <slot name=\"body\" onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n ref={(div) => (this.footerElem = div)}\n part=\"footer\"\n >\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-notification.entry.js","mappings":";;;;;;;;;;;AAAO,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAU;;ACA5F,MAAM,iBAAiB,GAAG,4rzBAA4rzB,CAAC;AACvtzB,6BAAe,iBAAiB;;ACIhC,MAAM,4BAA4B,GAAG,wBAAwB,CAAC;MA2BjD,cAAc;;;;;;;0BAkBK,KAAK;yBACN,KAAK;kCAEhC,OAAO,MAAM,KAAK,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,4BAA4B,EAAE,CAAC,GAAG,IAAI;;sBAStC,GAAG;;;;oBAYxB,IAAI;oBAGO,MAAM;;;;IAzCjD,mBAAmB,CAAkB;IACrC,QAAQ,CAAiB;IACzB,UAAU,CAAiB;IAC3B,gBAAgB,CAAiB;;;;IA4CzC,aAAa;QACX,IAAI,CAAC,mBAAmB,EAAE,MAAM,EAAE,CAAC;QACnC,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,IAAI,CAAC,mBAAmB,GAAG,QAAQ,CAAC;YAClC,IAAI,CAAC,IAAI,EAAE,CAAC;SACb,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;;QAEd,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3C;IAGD,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,MAAM,EAAE,CAAC;QAEnC,IAAI,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC;YAAE,OAAO;QAC7C,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAGD,eAAe;QACb,iBAAiB,CAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;KAC/D;;;;;IAOQ,MAAM,CAAgB;;IAGtB,MAAM,CAAgB;;IAGtB,WAAW,CAAgB;;IAG3B,YAAY,CAAgB;;;;IAMrC,iBAAiB;QACf,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACpC,IAAI,CAAC,kBAAkB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACxD,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;gBACrE,SAAS,EAAE,4BAA4B;aACxC,CAAC,CAAC;SACJ;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;;;IAMD,sBAAsB;QACpB,IAAI;YACF,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;YACpC,kBAAkB,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;YAExC,IAAI,kBAAkB,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,IAAI,EAAE;gBAC5E,kBAAkB,CAAC,MAAM,EAAE,CAAC;aAC7B;SACF;QAAC,OAAO,KAAK,EAAE;;;;;YAKd,IAAI,KAAK,YAAY,YAAY;gBAAE,OAAO;YAC1C,MAAM,KAAK,CAAC;SACb;KACF;;;;;;;;IAWD,MAAM,IAAI;QACR,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;KACzB;;IAID,MAAM,IAAI;QACR,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;KACzB;;IAID,MAAM,KAAK;QACT,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAI,CAAC;QACpC,IAAI,kBAAkB,EAAE,aAAa,KAAK,IAAI,EAAE;YAC9C,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;SAC1C;QAED,kBAAkB,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACzC,qBAAqB,CAAC;YACpB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb,CAAC,CAAC;KACJ;;;;;IAOO,UAAU,GAAG;QACnB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrC,IAAI,CAAC,EAAE,CAAC,gBAAgB,EAAE;YACxB,MAAM,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACnC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;KACF,CAAC;IAEM,UAAU,GAAG;QACnB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACrC,IAAI,CAAC,EAAE,CAAC,gBAAgB,EAAE;YACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,MAAM,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACnC,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;KACF,CAAC;IAEM,mBAAmB,GAAG;QAC5B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACxB,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B,CAAC;IAEM,uBAAuB,GAAG;QAChC,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjD,CAAC;IAEM,sBAAsB,GAAG;QAC/B,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;KAC5D,CAAC;IAEF,IAAY,QAAQ;QAClB,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,gBAAgB;SAC1B,CAAC;QAEF,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC;KACrC;;;;IAMD,MAAM;QACJ,MAAM,KAAK,GAAG;YACZ,IAAI,IAAI,CAAC,MAAM,IAAI,EAAE,kCAAkC,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAC/F,CAAC;QAEF,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,iBACrB,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EAC1C,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,EACrC,IAAI,EAAC,OAAO,IAEZ,4DACE,KAAK,EAAC,iBAAiB,2BACD,4CAA4C,iCACtC,4DAA4D,+BAC9D,4CAA4C,2BAChD,2CAA2C,iCACrC,4CAA4C,+BAC9C,6DAA6D,EACvF,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC,EAC3C,IAAI,EAAC,SAAS,IAGb,CAAC,IAAI,CAAC,YAAY,KACjB,kEACE,KAAK,EAAC,sEAAsE,EAC5E,UAAU,EAAC,MAAM,EACjB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC1B,IAAI,EAAC,WAAW,IAEhB,6DAAM,IAAI,EAAC,WAAW,IACpB,gEAAS,IAAI,EAAC,GAAG,GAAG,CACf,CACG,CACb,EAED,4DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI,CAAC,QAAQ;gBACxB,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBAC5B,mDAAmD,EAAE,IAAI;aAC1D,EACD,IAAI,EAAC,cAAc,IAEnB,6DAAM,IAAI,EAAC,MAAM,IACf,gEAAS,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,UAAU,GAAG,CAC9D,CACH,EAEN,4DAAK,KAAK,EAAC,uEAAuE,EAAC,IAAI,EAAC,MAAM,IAC5F,4DAAK,KAAK,EAAC,uDAAuD,EAAC,IAAI,EAAC,SAAS,IAE/E,4DAAK,KAAK,EAAC,0CAA0C,EAAC,IAAI,EAAC,OAAO,IAChE,8DAAQ,CACJ,EAEN,4DACE,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EACtE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,IAAI,EAAC,MAAM,IAEX,6DAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAC5D,CACF,EAEN,4DACE,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACtE,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,EACrC,IAAI,EAAC,QAAQ,IAEb,6DAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,sBAAsB,GAAI,CAC7D,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;","names":[],"sources":["../../packages/beeq/src/components/notification/bq-notification.types.ts","../../packages/beeq/src/components/notification/scss/bq-notification.scss?tag=bq-notification&encapsulation=shadow","../../packages/beeq/src/components/notification/bq-notification.tsx"],"sourcesContent":["export const NOTIFICATION_TYPE = ['error', 'info', 'neutral', 'success', 'warning'] as const;\nexport type TNotificationType = (typeof NOTIFICATION_TYPE)[number];\n\nexport const NOTIFICATION_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TNotificationBorderRadius = (typeof NOTIFICATION_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- /\n/ Notification styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-notification.variables';\n\n:host {\n @apply block;\n}\n\n:host(.is-hidden) {\n @apply hidden;\n}\n\n.bq-notification {\n @apply relative flex transition-all min-is-[--bq-notification--min-width] p-b-[--bq-notification--padding] p-i-[--bq-notification--padding];\n @apply rounded-[--bq-notification--border-radius] bg-[--bq-notification--background] shadow-[shadow:--bq-notification--box-shadow];\n}\n\n/\n Set the notification icon color based on the type value selected\n /\n.notification--icon.color {\n &-error {\n @apply text-[color:--bq-notification--icon-color-error];\n }\n\n &-info {\n @apply text-[color:--bq-notification--icon-color-info];\n }\n\n &-neutral {\n @apply text-[color:--bq-notification--icon-color-neutral];\n }\n\n &-success {\n @apply text-[color:--bq-notification--icon-color-success];\n }\n\n &-warning {\n @apply text-[color:--bq-notification--icon-color-warning];\n }\n}\n\n/\n Tweak the close bq-button styles so it remain small without extra padding\n /\n.notification--close::part(button) {\n @apply rounded-s border-0 bs-fit p-b-0 p-i-0;\n}\n\n/\n Here we guarantee that if the footer actions are wrapped in a div container from the consumer side,\n * the styles get applied to the that wrapping container directly\n /\n[part='footer'] ::slotted() {\n @apply flex items-start gap-xs;\n}\n\n[part='body'],\n[part='footer'] {\n ::slotted() {\n @apply block m-bs-m;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { NOTIFICATION_TYPE, TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { debounce, enter, hasSlotContent, leave, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';\n\n/\n @part base - The `<div>` container of the predefined bq-icon component.\n * @part body - The container `<div>` that wraps the notification description content\n * @part btn-close - The `bq-button` used to close the notification\n * @part content - The container `<div>` that wraps all the notification content (title, description, footer)\n * @part footer - The container `<div>` that wraps the notification footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the notification type\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the notification main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component.\n * @part title - The container `<div>` that wraps the notification title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n \n @slot - The notification title content\n * @slot body - The notification description content\n * @slot footer - The notification footer content\n * @slot icon - The icon to be displayed in the notification\n * @slot btn-close - The close button of the notification\n /\n\n@Component({\n tag: 'bq-notification',\n styleUrl: './scss/bq-notification.scss',\n shadow: true,\n})\nexport class BqNotification {\n // Own Properties\n // ====================\n\n private autoDismissDebounce: TDebounce<void>;\n private bodyElem: HTMLDivElement;\n private footerElem: HTMLDivElement;\n private notificationElem: HTMLDivElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqNotificationElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasContent = false;\n @State() private hasFooter = false;\n @State() private notificationPortal =\n typeof window !== 'undefined' ? document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`) : null;\n\n // Public Property API\n // ========================\n\n /* If true, the notification will automatically hide after the specified amount of time /\n @Prop({ reflect: true }) autoDismiss: boolean;\n\n /* The corder radius of the notification component /\n @Prop({ reflect: true }) border: TNotificationBorderRadius = 's';\n\n /* If true, the close button at the top right of the notification won't be shown /\n @Prop({ reflect: true }) disableClose: boolean;\n\n /* If true, the notification icon won't be shown /\n @Prop({ reflect: true }) hideIcon: boolean;\n\n /* If true, the notification will be shown /\n @Prop({ reflect: true, mutable: true }) open: boolean;\n\n /* The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"` /\n @Prop({ reflect: true }) time: number = 3000;\n\n /* Type of Notification /\n @Prop({ reflect: true }) type: TNotificationType = 'info';\n\n // Prop lifecycle events\n // =======================\n @Watch('autoDismiss')\n @Watch('time')\n handleTimeout() {\n this.autoDismissDebounce?.cancel();\n if (!this.autoDismiss) return;\n\n this.autoDismissDebounce = debounce(() => {\n this.hide();\n }, this.time);\n // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n if (this.open) this.autoDismissDebounce();\n }\n\n @Watch('open')\n handleOpenChange() {\n this.autoDismissDebounce?.cancel();\n\n if (!(this.autoDismiss && this.open)) return;\n this.autoDismissDebounce();\n }\n\n @Watch('type')\n checkPropValues() {\n validatePropValue(NOTIFICATION_TYPE, 'info', this.el, 'type');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the notification is hidden /\n @Event() bqHide!: EventEmitter;\n\n /* Callback handler to be called when the notification is shown /\n @Event() bqShow!: EventEmitter;\n\n /* Callback handler to be called after the notification has been opened /\n @Event() bqAfterOpen!: EventEmitter;\n\n /* Callback handler to be called after the notification has been closed /\n @Event() bqAfterClose!: EventEmitter;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n connectedCallback() {\n const { notificationPortal } = this;\n if (!notificationPortal && typeof window !== 'undefined') {\n this.notificationPortal = Object.assign(document.createElement('div'), {\n className: NOTIFICATION_PORTAL_SELECTOR,\n });\n }\n }\n\n componentWillLoad() {\n this.checkPropValues();\n this.handleTimeout();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqAfterClose')\n afterNotificationClose() {\n try {\n const { notificationPortal } = this;\n notificationPortal.removeChild(this.el);\n // Remove the notification portal from the DOM when there are no more notifications\n if (notificationPortal.querySelector(this.el.tagName.toLowerCase()) === null) {\n notificationPortal.remove();\n }\n } catch (error) {\n /\n Skip DOMException error since it could be possible that\n * in some situations the notification portal is missing\n /\n if (error instanceof DOMException) return;\n throw error;\n }\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /* Method to be called to hide the notification component /\n @Method()\n async hide(): Promise<void> {\n await this.handleHide();\n }\n\n /* Method to be called to show the notification component /\n @Method()\n async show(): Promise<void> {\n await this.handleShow();\n }\n\n /* This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically /\n @Method()\n async toast() {\n const { notificationPortal } = this;\n if (notificationPortal?.parentElement === null) {\n document.body.append(notificationPortal);\n }\n\n notificationPortal?.appendChild(this.el);\n requestAnimationFrame(() => {\n this.show();\n });\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleHide = async () => {\n const ev = this.bqHide.emit(this.el);\n if (!ev.defaultPrevented) {\n await leave(this.notificationElem);\n this.open = false;\n this.handleTransitionEnd();\n }\n };\n\n private handleShow = async () => {\n const ev = this.bqShow.emit(this.el);\n if (!ev.defaultPrevented) {\n this.open = true;\n await enter(this.notificationElem);\n this.handleTransitionEnd();\n }\n };\n\n private handleTransitionEnd = () => {\n if (this.open) {\n this.bqAfterOpen.emit();\n return;\n }\n\n this.bqAfterClose.emit();\n };\n\n private handleContentSlotChange = () => {\n this.hasContent = hasSlotContent(this.bodyElem);\n };\n\n private handleFooterSlotChange = () => {\n this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n };\n\n private get iconName(): string {\n const typeMap = {\n error: 'x-circle',\n success: 'check-circle',\n warning: 'warning-circle',\n };\n\n return typeMap[this.type] \|\| 'info';\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),\n };\n\n return (\n <Host\n style={style}\n class={{ 'is-hidden': !this.open }}\n aria-hidden={!this.open ? 'true' : 'false'}\n hidden={!this.open ? 'true' : 'false'}\n role=\"alert\"\n >\n <div\n class=\"bq-notification\"\n data-transition-enter=\"transform transition ease-out duration-300\"\n data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-leave=\"transform transition ease-in duration-100\"\n data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n ref={(div) => (this.notificationElem = div)}\n part=\"wrapper\"\n >\n {/ CLOSE BUTTON /}\n {!this.disableClose && (\n <bq-button\n class=\"notification--close absolute inset-ie-5 [&::part(label)]:inline-flex\"\n appearance=\"text\"\n size=\"small\"\n onClick={() => this.hide()}\n part=\"btn-close\"\n >\n <slot name=\"btn-close\">\n <bq-icon name=\"x\" />\n </slot>\n </bq-button>\n )}\n {/ ICON /}\n <div\n class={{\n '!hidden': this.hideIcon,\n [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)\n 'notification--icon me-xs flex text-left align-top': true,\n }}\n part=\"icon-outline\"\n >\n <slot name=\"icon\">\n <bq-icon name={this.iconName} part=\"icon\" exportparts=\"base,svg\" />\n </slot>\n </div>\n {/ MAIN /}\n <div class=\"flex flex-col items-start gap-[--bq-notification--content-footer-gap]\" part=\"main\">\n <div class=\"flex flex-col gap-[--bq-notification--title-body-gap]\" part=\"content\">\n {/ TITLE /}\n <div class=\"title-font font-semibold leading-regular\" part=\"title\">\n <slot />\n </div>\n {/ BODY /}\n <div\n class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n ref={(div) => (this.bodyElem = div)}\n part=\"body\"\n >\n <slot name=\"body\" onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n {/ FOOTER */}\n <div\n class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n ref={(div) => (this.footerElem = div)}\n part=\"footer\"\n >\n <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/bq-option-list_2.entry.js CHANGED Viewed

@@ -3,10 +3,9 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
 import { i as isEventTargetChildOfElement } from './event-9ce1db79.js';
 import { i as isHTMLElement } from './isHTMLElement-0271eefe.js';
-import { g as getColorCSSVariable } from './cssVariables-23e3ca0d.js';
+import { g as getColorCSSVariable } from './cssVariables-000c23ad.js';
 import { v as validatePropValue } from './props-3bf7f546.js';
 import { b as hasSlotContent } from './slot-58bfedb5.js';

package/dist/esm/bq-option-list_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-option-list.bq-tag.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/option-list/scss/bq-option-list.scss?tag=bq-option-list&encapsulation=shadow","../../packages/beeq/src/components/option-list/bq-option-list.tsx","../../packages/beeq/src/components/tag/bq-tag.types.ts","../../packages/beeq/src/components/tag/helper/index.ts","../../packages/beeq/src/components/tag/scss/bq-tag.scss?tag=bq-tag&encapsulation=shadow","../../packages/beeq/src/components/tag/bq-tag.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Option list styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-option-list.variables';\n\n:host {\n @apply block;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport { isEventTargetChildOfElement, isHTMLElement } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper.\n /\n@Component({\n tag: 'bq-option-list',\n styleUrl: './scss/bq-option-list.scss',\n shadow: true,\n})\nexport class BqOptionList {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqOptionListElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n // Prop lifecycle events\n // =======================\n\n /* Aria label for the list. /\n @Prop({ reflect: true }) ariaLabel: string = 'Options';\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when `bq-option` is selected (on click/enter press). /\n @Event() bqSelect: EventEmitter<{ value: string; item: HTMLBqOptionElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.el.setAttribute('role', 'listbox');\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n @Listen('bqEnter', { passive: true })\n onBqSelect(event: CustomEvent<HTMLElement>) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-option') \|\| !isEventTargetChildOfElement(event, this.el)) return;\n\n this.bqSelect.emit({ item, value: item.value });\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]\" part=\"base\">\n <slot />\n </div>\n );\n }\n}\n","export const TAG_SIZE = ['xsmall', 'small', 'medium'] as const;\nexport type TTagSize = (typeof TAG_SIZE)[number];\n\nexport const TAG_COLOR = ['error', 'gray', 'info', 'success', 'warning'] as const;\nexport type TTagColor = (typeof TAG_COLOR)[number];\n\nexport const TAG_VARIANT = ['outline', 'filled'] as const;\nexport type TTagVariant = (typeof TAG_VARIANT)[number];\n\nexport const TAG_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TTagBorderRadius = (typeof TAG_BORDER_RADIUS)[number];\n","import { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagColor, TTagSize, TTagVariant } from '../bq-tag.types';\n\n/\n Function to determine the icon size based on the provided tag size.\n \n @param {TTagSize} size - The size of the tag.\n * @returns {number} The corresponding icon size. If the provided size does not match any predefined sizes, the function returns the size for 'medium'.\n /\nexport const iconSize = (size: TTagSize): number => {\n const xsmall = TAG_SIZE[0];\n const small = TAG_SIZE[1];\n const medium = TAG_SIZE[2];\n\n const SIZE = {\n [xsmall]: 16,\n [small]: 20,\n [medium]: 24,\n };\n\n return SIZE[size] \|\| SIZE[medium];\n};\n\n/\n Function to determine the tag text color scheme for a given tag type.\n \n @param {TTagType} color - The color of the tag.\n * @returns {Object} An object containing the color scheme for the given tag type. If the provided type does not match any predefined types, the function returns the color scheme for 'default'.\n /\nexport const textColor = (color: TTagColor): Partial<{ [K in TTagVariant]: string }> => {\n const typeError = TAG_COLOR[0];\n const typeGray = TAG_COLOR[1];\n const typeInfo = TAG_COLOR[2];\n const typeSuccess = TAG_COLOR[3];\n const typeWarning = TAG_COLOR[4];\n\n const variantOutline = TAG_VARIANT[0];\n const variantFilled = TAG_VARIANT[1];\n\n const COLORS = {\n [typeError]: {\n [variantOutline]: 'text--danger',\n [variantFilled]: 'text--alt',\n },\n [typeGray]: {\n [variantOutline]: 'text--primary',\n [variantFilled]: 'text--alt',\n },\n [typeInfo]: {\n [variantOutline]: 'text--brand',\n [variantFilled]: 'text--alt',\n },\n [typeSuccess]: {\n [variantOutline]: 'text--success',\n [variantFilled]: 'text--alt',\n },\n [typeWarning]: {\n [variantOutline]: 'text--warning',\n [variantFilled]: 'text--alt',\n },\n };\n\n return COLORS[color];\n};\n","/ -------------------------------------------------------------------------- /\n/ Tag styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-tag.variables';\n\n:host {\n @apply relative inline-block;\n}\n\n:host([removable][hidden]) {\n @apply hidden;\n}\n\n.bq-tag {\n @apply box-border inline-flex select-none flex-row items-center justify-center bg-[--bq-tag--background-color];\n @apply gap-[--bq-tag--medium-gap] font-medium leading-regular text-text-primary p-b-[--bq-tag--medium-padding-y] p-i-[--bq-tag--medium-padding-x];\n @apply rounded-[--bq-tag--border-radius] border-[length:--bq-tag--border-width] border-[color:--bq-tag--border-color];\n @apply transition-colors duration-300 ease-in-out;\n\n border-style: var(--bq-tag--border-style);\n}\n\n/ ---------------------------------- Size ---------------------------------- /\n\n.bq-tag__xsmall,\n.bq-tag__small {\n @apply gap-[--bq-tag--small-gap] p-b-[--bq-tag--small-padding-y] p-i-[--bq-tag--small-padding-x];\n\n / Apply predefined border radius only if the border property have NO VALUE /\n &:not(.has-border) {\n @apply rounded-[--bq-tag--small-border-radius];\n }\n}\n\n/ --------------------------------- Action --------------------------------- /\n\n.bq-tag__default.is-clickable {\n @apply cursor-pointer;\n // Focus\n @apply focus-visible:focus;\n // Hover\n @apply hover:enabled:bg-[color-mix(in_srgb,_var(--bq-tag--background-color),_white_20%)];\n // Active/Selected\n @apply [&.active]:text-[--bq-text--alt] [&.active]:[--bq-tag--background-color:--bq-ui--brand];\n // Disabled\n @apply disabled:cursor-not-allowed disabled:border-none disabled:opacity-60;\n}\n\n/ ------------------------------ Color styles ------------------------------ /\n\n.bq-tag__error {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--danger] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--danger-alt] text-[color:--bq-text--danger] [--bq-tag--border-color:--bq-stroke--danger];\n }\n}\n\n.bq-tag__gray {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--tertiary] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--primary] text-[color:--bq-text--primary] [--bq-tag--border-color:--bq-stroke--tertiary];\n }\n}\n\n.bq-tag__info {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--brand] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--brand-alt] text-[color:--bq-text--brand] [--bq-tag--border-color:--bq-stroke--brand];\n }\n}\n\n.bq-tag__success {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--success] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--success-alt] text-[color:--bq-text--success] [--bq-tag--border-color:--bq-tag--border-success];\n }\n}\n\n.bq-tag__warning {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--warning] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply border-[color:--bq-stroke--warning] bg-[color:--bq-ui--warning-alt] text-[color:--bq-text--warning];\n }\n}\n\n/ ------------------------------ Close button ------------------------------ /\n\n.bq-tag__close::part(button) {\n @apply pointer-events-none border-0 bs-fit p-b-0 p-i-0;\n}\n\n/ --------------- Apply the right size to the bq-icon prefix --------------- /\n\n.bq-tag__prefix ::slotted(bq-icon) {\n --bq-icon--size: var(--bq-tag--icon-prefix-size) !important;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';\nimport { iconSize, textColor } from './helper';\nimport { getColorCSSVariable, hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/\n @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.\n * @part prefix - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n * @part text - The `<div>` element containing the text of the tag component.\n * @part btn-close - The close button element to remove the tag component.\n /\n@Component({\n tag: 'bq-tag',\n styleUrl: './scss/bq-tag.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqTag {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqTagElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n\n // Public Property API\n // ========================\n\n /* The corner radius of the Tag (will override size's predefined border) /\n @Prop({ reflect: true }) border: TTagBorderRadius;\n\n /* If true, the Tag can be clickable /\n @Prop({ reflect: true }) clickable: boolean = false;\n\n /* The color style of the Tag /\n @Prop({ reflect: true }) color: TTagColor;\n\n /* If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed) /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* If true, the Tag component will hidden (only if removable = `true`) /\n @Prop({ reflect: true, mutable: true }) hidden: boolean;\n\n /* If true, the Tag component can be removed /\n @Prop({ reflect: true }) removable: boolean = false;\n\n /* If true, the Tag is selected (only if clickable = `true`) /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /* The size of the Tag component /\n @Prop({ reflect: true }) size: TTagSize = 'medium';\n\n /* The variant of Tag to apply on top of the variant /\n @Prop({ reflect: true }) variant: TTagVariant = 'filled';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('variant')\n checkPropValues() {\n validatePropValue(TAG_SIZE, 'medium', this.el, 'size');\n validatePropValue(TAG_VARIANT, 'filled', this.el, 'variant');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the tag is close/hidden /\n @Event() bqClose: EventEmitter;\n\n /* Callback handler to be called when the tag is not open/shown /\n @Event() bqOpen: EventEmitter;\n\n /* Handler to be called when tag loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqTagElement>;\n\n /* Handler to be called when tag is clicked /\n @Event() bqClick: EventEmitter<HTMLBqTagElement>;\n\n /* Handler to be called when tag is focused /\n @Event() bqFocus: EventEmitter<HTMLBqTagElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /* Method to be called to remove the tag component /\n @Method()\n async hide(): Promise<void> {\n this.handleHide();\n }\n\n /* Method to be called to show the tag component */\n @Method()\n async show(): Promise<void> {\n this.handleShow();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleHide = () => {\n if (!this.isRemovable) return;\n\n const ev = this.bqClose.emit(this.el);\n if (!ev.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n private handleShow = () => {\n if (!this.isRemovable) return;\n\n const ev = this.bqOpen.emit(this.el);\n if (!ev.defaultPrevented) {\n this.hidden = false;\n }\n };\n\n private handleClick = () => {\n // If the tag is not clickable or the tag is disabled, we don't want to handle the click\n if (!this.isClickable \|\| this.disabled) return;\n\n // Emit a click event on the element\n const ev = this.bqClick.emit(this.el);\n // If the event was not prevented, toggle the clickable state\n if (!ev.defaultPrevented) {\n this.selected = !this.selected;\n }\n };\n\n private handleBlur = () => {\n if (!this.isClickable) return;\n\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n if (!this.isClickable) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n };\n\n private get isClickable(): boolean {\n return this.clickable && !this.color && !this.hasCustomColor && !this.removable;\n }\n\n private get isRemovable(): boolean {\n return this.removable && !this.isClickable;\n }\n\n private get isHidden(): boolean {\n return this.isRemovable && this.hidden;\n }\n\n private get hasCustomColor(): boolean {\n return this.color !== undefined ? !TAG_COLOR.includes(this.color) : false;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n '--bq-tag--icon-prefix-size': `${iconSize(this.size)}px`,\n ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),\n ...(this.color && { '--bq-tag--background-color': getColorCSSVariable(this.color) ?? this.color }),\n ...(this.hasCustomColor && { '--bq-text--primary': `var(--bq-text--alt)` }),\n };\n\n return (\n <Host style={style} aria-hidden={this.isHidden ? 'true' : 'false'} hidden={this.isHidden ? 'true' : 'false'}>\n <button\n class={{\n [`bq-tag bq-tag__${this.size}`]: true,\n [`bq-tag__${this.color \|\| 'default'} bq-tag__${this.variant}`]: !this.hasCustomColor,\n 'is-clickable': this.isClickable,\n 'is-removable': this.removable,\n // Active/Selected state when clickable\n active: this.isClickable && this.selected,\n // Fixed border radius\n 'has-border': !!this.border,\n }}\n disabled={this.disabled}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n tabindex={this.isClickable ? 0 : -1}\n part=\"wrapper\"\n >\n <span\n class={{ 'bq-tag__prefix inline-flex': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <div\n class={{\n 'text-xs': this.size === 'xsmall',\n 'text-s': this.size === 'small',\n 'text-m': this.size === 'medium',\n }}\n part=\"text\"\n >\n <slot />\n </div>\n {this.isRemovable && !this.disabled && (\n <bq-button class=\"bq-tag__close\" appearance=\"text\" size=\"small\" onClick={this.handleHide} part=\"btn-close\">\n <bq-icon\n size={iconSize(this.size)}\n name=\"x-circle\"\n color={this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary'}\n />\n </bq-button>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-option-list.bq-tag.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/option-list/scss/bq-option-list.scss?tag=bq-option-list&encapsulation=shadow","../../packages/beeq/src/components/option-list/bq-option-list.tsx","../../packages/beeq/src/components/tag/bq-tag.types.ts","../../packages/beeq/src/components/tag/helper/index.ts","../../packages/beeq/src/components/tag/scss/bq-tag.scss?tag=bq-tag&encapsulation=shadow","../../packages/beeq/src/components/tag/bq-tag.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Option list styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-option-list.variables';\n\n:host {\n @apply block;\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';\n\nimport { isEventTargetChildOfElement, isHTMLElement } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper.\n /\n@Component({\n tag: 'bq-option-list',\n styleUrl: './scss/bq-option-list.scss',\n shadow: true,\n})\nexport class BqOptionList {\n // Own Properties\n // ====================\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqOptionListElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n // Public Property API\n // ========================\n\n // Prop lifecycle events\n // =======================\n\n /* Aria label for the list. /\n @Prop({ reflect: true }) ariaLabel: string = 'Options';\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when `bq-option` is selected (on click/enter press). /\n @Event() bqSelect: EventEmitter<{ value: string; item: HTMLBqOptionElement }>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentDidLoad() {\n this.el.setAttribute('role', 'listbox');\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { passive: true })\n @Listen('bqEnter', { passive: true })\n onBqSelect(event: CustomEvent<HTMLElement>) {\n const { target: item } = event;\n if (!isHTMLElement(item, 'bq-option') \|\| !isEventTargetChildOfElement(event, this.el)) return;\n\n this.bqSelect.emit({ item, value: item.value });\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <div class=\"bq-option__list flex flex-col gap-y-[--bq-option-group--gapY-list]\" part=\"base\">\n <slot />\n </div>\n );\n }\n}\n","export const TAG_SIZE = ['xsmall', 'small', 'medium'] as const;\nexport type TTagSize = (typeof TAG_SIZE)[number];\n\nexport const TAG_COLOR = ['error', 'gray', 'info', 'success', 'warning'] as const;\nexport type TTagColor = (typeof TAG_COLOR)[number];\n\nexport const TAG_VARIANT = ['outline', 'filled'] as const;\nexport type TTagVariant = (typeof TAG_VARIANT)[number];\n\nexport const TAG_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TTagBorderRadius = (typeof TAG_BORDER_RADIUS)[number];\n","import { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagColor, TTagSize, TTagVariant } from '../bq-tag.types';\n\n/\n Function to determine the icon size based on the provided tag size.\n \n @param {TTagSize} size - The size of the tag.\n * @returns {number} The corresponding icon size. If the provided size does not match any predefined sizes, the function returns the size for 'medium'.\n /\nexport const iconSize = (size: TTagSize): number => {\n const xsmall = TAG_SIZE[0];\n const small = TAG_SIZE[1];\n const medium = TAG_SIZE[2];\n\n const SIZE = {\n [xsmall]: 16,\n [small]: 20,\n [medium]: 24,\n };\n\n return SIZE[size] \|\| SIZE[medium];\n};\n\n/\n Function to determine the tag text color scheme for a given tag type.\n \n @param {TTagType} color - The color of the tag.\n * @returns {Object} An object containing the color scheme for the given tag type. If the provided type does not match any predefined types, the function returns the color scheme for 'default'.\n /\nexport const textColor = (color: TTagColor): Partial<{ [K in TTagVariant]: string }> => {\n const typeError = TAG_COLOR[0];\n const typeGray = TAG_COLOR[1];\n const typeInfo = TAG_COLOR[2];\n const typeSuccess = TAG_COLOR[3];\n const typeWarning = TAG_COLOR[4];\n\n const variantOutline = TAG_VARIANT[0];\n const variantFilled = TAG_VARIANT[1];\n\n const COLORS = {\n [typeError]: {\n [variantOutline]: 'text--danger',\n [variantFilled]: 'text--alt',\n },\n [typeGray]: {\n [variantOutline]: 'text--primary',\n [variantFilled]: 'text--alt',\n },\n [typeInfo]: {\n [variantOutline]: 'text--brand',\n [variantFilled]: 'text--alt',\n },\n [typeSuccess]: {\n [variantOutline]: 'text--success',\n [variantFilled]: 'text--alt',\n },\n [typeWarning]: {\n [variantOutline]: 'text--warning',\n [variantFilled]: 'text--alt',\n },\n };\n\n return COLORS[color];\n};\n","/ -------------------------------------------------------------------------- /\n/ Tag styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-tag.variables';\n\n:host {\n @apply relative inline-block;\n}\n\n:host([removable][hidden]) {\n @apply hidden;\n}\n\n.bq-tag {\n @apply box-border inline-flex select-none flex-row items-center justify-center bg-[--bq-tag--background-color];\n @apply gap-[--bq-tag--medium-gap] font-medium leading-regular text-text-primary p-b-[--bq-tag--medium-padding-y] p-i-[--bq-tag--medium-padding-x];\n @apply rounded-[--bq-tag--border-radius] border-[length:--bq-tag--border-width] border-[color:--bq-tag--border-color];\n @apply transition-colors duration-300 ease-in-out;\n\n border-style: var(--bq-tag--border-style);\n}\n\n/ ---------------------------------- Size ---------------------------------- /\n\n.bq-tag__xsmall,\n.bq-tag__small {\n @apply gap-[--bq-tag--small-gap] p-b-[--bq-tag--small-padding-y] p-i-[--bq-tag--small-padding-x];\n\n / Apply predefined border radius only if the border property have NO VALUE /\n &:not(.has-border) {\n @apply rounded-[--bq-tag--small-border-radius];\n }\n}\n\n/ --------------------------------- Action --------------------------------- /\n\n.bq-tag__default.is-clickable {\n @apply cursor-pointer;\n // Focus\n @apply focus-visible:focus;\n // Hover\n @apply hover:enabled:bg-[color-mix(in_srgb,_var(--bq-tag--background-color),_white_20%)];\n // Active/Selected\n @apply [&.active]:text-[--bq-text--alt] [&.active]:[--bq-tag--background-color:--bq-ui--brand];\n // Disabled\n @apply disabled:cursor-not-allowed disabled:border-none disabled:opacity-60;\n}\n\n/ ------------------------------ Color styles ------------------------------ /\n\n.bq-tag__error {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--danger] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--danger-alt] text-[color:--bq-text--danger] [--bq-tag--border-color:--bq-stroke--danger];\n }\n}\n\n.bq-tag__gray {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--tertiary] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--primary] text-[color:--bq-text--primary] [--bq-tag--border-color:--bq-stroke--tertiary];\n }\n}\n\n.bq-tag__info {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--brand] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--brand-alt] text-[color:--bq-text--brand] [--bq-tag--border-color:--bq-stroke--brand];\n }\n}\n\n.bq-tag__success {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--success] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply bg-[color:--bq-ui--success-alt] text-[color:--bq-text--success] [--bq-tag--border-color:--bq-tag--border-success];\n }\n}\n\n.bq-tag__warning {\n &.bq-tag__filled {\n @apply bg-[color:--bq-ui--warning] text-[color:--bq-text--alt];\n }\n\n &.bq-tag__outline {\n @apply border-[color:--bq-stroke--warning] bg-[color:--bq-ui--warning-alt] text-[color:--bq-text--warning];\n }\n}\n\n/ ------------------------------ Close button ------------------------------ /\n\n.bq-tag__close::part(button) {\n @apply pointer-events-none border-0 bs-fit p-b-0 p-i-0;\n}\n\n/ --------------- Apply the right size to the bq-icon prefix --------------- /\n\n.bq-tag__prefix ::slotted(bq-icon) {\n --bq-icon--size: var(--bq-tag--icon-prefix-size) !important;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';\nimport { iconSize, textColor } from './helper';\nimport { getColorCSSVariable, hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/\n @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.\n * @part prefix - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n * @part text - The `<div>` element containing the text of the tag component.\n * @part btn-close - The close button element to remove the tag component.\n /\n@Component({\n tag: 'bq-tag',\n styleUrl: './scss/bq-tag.scss',\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqTag {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqTagElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() private hasPrefix = false;\n\n // Public Property API\n // ========================\n\n /* The corner radius of the Tag (will override size's predefined border) /\n @Prop({ reflect: true }) border: TTagBorderRadius;\n\n /* If true, the Tag can be clickable /\n @Prop({ reflect: true }) clickable: boolean = false;\n\n /* The color style of the Tag /\n @Prop({ reflect: true }) color: TTagColor;\n\n /* If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed) /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* If true, the Tag component will hidden (only if removable = `true`) /\n @Prop({ reflect: true, mutable: true }) hidden: boolean;\n\n /* If true, the Tag component can be removed /\n @Prop({ reflect: true }) removable: boolean = false;\n\n /* If true, the Tag is selected (only if clickable = `true`) /\n @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n /* The size of the Tag component /\n @Prop({ reflect: true }) size: TTagSize = 'medium';\n\n /* The variant of Tag to apply on top of the variant /\n @Prop({ reflect: true }) variant: TTagVariant = 'filled';\n\n // Prop lifecycle events\n // =======================\n\n @Watch('size')\n @Watch('variant')\n checkPropValues() {\n validatePropValue(TAG_SIZE, 'medium', this.el, 'size');\n validatePropValue(TAG_VARIANT, 'filled', this.el, 'variant');\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Callback handler to be called when the tag is close/hidden /\n @Event() bqClose: EventEmitter;\n\n /* Callback handler to be called when the tag is not open/shown /\n @Event() bqOpen: EventEmitter;\n\n /* Handler to be called when tag loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqTagElement>;\n\n /* Handler to be called when tag is clicked /\n @Event() bqClick: EventEmitter<HTMLBqTagElement>;\n\n /* Handler to be called when tag is focused /\n @Event() bqFocus: EventEmitter<HTMLBqTagElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.checkPropValues();\n }\n\n // Listeners\n // ==============\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n /* Method to be called to remove the tag component /\n @Method()\n async hide(): Promise<void> {\n this.handleHide();\n }\n\n /* Method to be called to show the tag component */\n @Method()\n async show(): Promise<void> {\n this.handleShow();\n }\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private handleHide = () => {\n if (!this.isRemovable) return;\n\n const ev = this.bqClose.emit(this.el);\n if (!ev.defaultPrevented) {\n this.hidden = true;\n }\n };\n\n private handleShow = () => {\n if (!this.isRemovable) return;\n\n const ev = this.bqOpen.emit(this.el);\n if (!ev.defaultPrevented) {\n this.hidden = false;\n }\n };\n\n private handleClick = () => {\n // If the tag is not clickable or the tag is disabled, we don't want to handle the click\n if (!this.isClickable \|\| this.disabled) return;\n\n // Emit a click event on the element\n const ev = this.bqClick.emit(this.el);\n // If the event was not prevented, toggle the clickable state\n if (!ev.defaultPrevented) {\n this.selected = !this.selected;\n }\n };\n\n private handleBlur = () => {\n if (!this.isClickable) return;\n\n this.bqBlur.emit(this.el);\n };\n\n private handleFocus = () => {\n if (!this.isClickable) return;\n\n this.bqFocus.emit(this.el);\n };\n\n private handleSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n };\n\n private get isClickable(): boolean {\n return this.clickable && !this.color && !this.hasCustomColor && !this.removable;\n }\n\n private get isRemovable(): boolean {\n return this.removable && !this.isClickable;\n }\n\n private get isHidden(): boolean {\n return this.isRemovable && this.hidden;\n }\n\n private get hasCustomColor(): boolean {\n return this.color !== undefined ? !TAG_COLOR.includes(this.color) : false;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n const style = {\n '--bq-tag--icon-prefix-size': `${iconSize(this.size)}px`,\n ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),\n ...(this.color && { '--bq-tag--background-color': getColorCSSVariable(this.color) ?? this.color }),\n ...(this.hasCustomColor && { '--bq-text--primary': `var(--bq-text--alt)` }),\n };\n\n return (\n <Host style={style} aria-hidden={this.isHidden ? 'true' : 'false'} hidden={this.isHidden ? 'true' : 'false'}>\n <button\n class={{\n [`bq-tag bq-tag__${this.size}`]: true,\n [`bq-tag__${this.color \|\| 'default'} bq-tag__${this.variant}`]: !this.hasCustomColor,\n 'is-clickable': this.isClickable,\n 'is-removable': this.removable,\n // Active/Selected state when clickable\n active: this.isClickable && this.selected,\n // Fixed border radius\n 'has-border': !!this.border,\n }}\n disabled={this.disabled}\n onBlur={this.handleBlur}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n tabindex={this.isClickable ? 0 : -1}\n part=\"wrapper\"\n >\n <span\n class={{ 'bq-tag__prefix inline-flex': true, '!hidden': !this.hasPrefix }}\n ref={(spanElem) => (this.prefixElem = spanElem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n </span>\n <div\n class={{\n 'text-xs': this.size === 'xsmall',\n 'text-s': this.size === 'small',\n 'text-m': this.size === 'medium',\n }}\n part=\"text\"\n >\n <slot />\n </div>\n {this.isRemovable && !this.disabled && (\n <bq-button class=\"bq-tag__close\" appearance=\"text\" size=\"small\" onClick={this.handleHide} part=\"btn-close\">\n <bq-icon\n size={iconSize(this.size)}\n name=\"x-circle\"\n color={this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary'}\n />\n </bq-button>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/bq-option.entry.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
 import { b as hasSlotContent } from './slot-58bfedb5.js';
 const bqOptionCss = ".transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.bq-option,.shadow-\\[shadow\\:--bq-option--box-shadow\\]{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.hidden{display:none}.flex-auto{flex:1 1 auto}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.rounded-\\[--bq-option--border-radius\\]{border-radius:var(--bq-option--border-radius)}.border-\\[length\\:--bq-option--border-width\\]{border-width:var(--bq-option--border-width)}.border-\\[color\\:--bq-option--border-color\\]{border-color:var(--bq-option--border-color)}.bg-\\[--bq-option--background\\]{background-color:var(--bq-option--background)}.pe-\\[--bq-option--padding-end\\]{padding-inline-end:var(--bq-option--padding-end)}.pe-\\[--bq-option-label--padding-end\\]{padding-inline-end:var(--bq-option-label--padding-end)}.ps-\\[--bq-option--padding-start\\]{padding-inline-start:var(--bq-option--padding-start)}.ps-\\[--bq-option-label--padding-start\\]{padding-inline-start:var(--bq-option-label--padding-start)}.text-\\[length\\:--bq-option--font-size\\]{font-size:var(--bq-option--font-size)}.shadow-\\[shadow\\:--bq-option--box-shadow\\]{--tw-shadow:var(--bq-option--box-shadow);--tw-shadow-colored:var(--bq-option--box-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150{transition-duration:.15s}.p-b-\\[--bq-option--paddingY\\]{padding-block:var(--bq-option--paddingY)}.p-i-\\[--bq-option--paddingY\\]{padding-inline:var(--bq-option--paddingY)}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--bq-option--background:var(--bq-ui--primary);--bq-option--font-size:var(--bq-font-size--m);--bq-option--border-color:transparent;--bq-option--border-style:none;--bq-option--border-width:0;--bq-option--border-radius:var(--bq-radius--s);--bq-option--box-shadow:none;--bq-option--gap-start:var(--bq-spacing-s);--bq-option--gap-end:var(--bq-spacing-s);--bq-option--paddingY:var(--bq-spacing-xs);--bq-option--padding-start:var(--bq-spacing-s);--bq-option--padding-end:var(--bq-spacing-s);display:block}:host([hidden]){display:none}.bq-option{--tw-shadow:var(--bq-option--box-shadow);--tw-shadow-colored:var(--bq-option--box-shadow);align-items:center;background-color:var(--bq-option--background);border-color:var(--bq-option--border-color);border-radius:var(--bq-option--border-radius);border-style:var(--bq-option--border-style);border-width:var(--bq-option--border-width);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);cursor:pointer;display:flex;font-size:var(--bq-option--font-size);inline-size:100%;padding-block:var(--bq-option--paddingY);padding-inline-end:var(--bq-option--padding-end);padding-inline-start:var(--bq-option--padding-start);padding-inline:var(--bq-option--paddingY);transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-option:focus-visible:not(.disabled){outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-option:hover:not(.disabled){background-color:color-mix(in srgb,var(--bq-ui--secondary),var(--bq-hover) 20%)}.bq-option.active:not(.disabled){background-color:var(--bq-ui--brand-alt);color:var(--bq-text--brand)}.bq-option.disabled{cursor:not-allowed;opacity:.6}.bq-option__label{display:inline-block;flex:1 1 auto;overflow:hidden;padding-inline-end:var(--bq-option-label--padding-end);padding-inline-start:var(--bq-option-label--padding-start);text-overflow:ellipsis;white-space:nowrap}.\\[\\&\\:not\\(\\.disabled\\)\\]\\:focus-visible\\:focus:focus-visible:not(.disabled){outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.\\[\\&\\.active\\:not\\(\\.disabled\\)\\]\\:bg-ui-brand-alt.active:not(.disabled){background-color:var(--bq-ui--brand-alt)}.\\[\\&\\.disabled\\]\\:cursor-not-allowed.disabled{cursor:not-allowed}.static{position:static}.me-\\[--bq-option--gap-start\\]{margin-inline-end:var(--bq-option--gap-start)}.ml-auto{margin-left:auto}.ms-\\[--bq-option--gap-end\\]{margin-inline-start:var(--bq-option--gap-end)}.\\!hidden{display:none!important}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}";

package/dist/esm/bq-option.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"bq-option.entry.js","mappings":"~~;;;;;;;;~~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","names":[],"sources":["../../packages/beeq/src/components/option/scss/bq-option.scss?tag=bq-option&encapsulation=shadow","../../packages/beeq/src/components/option/bq-option.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Option styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-option.variables';\n\n:host {\n @apply block;\n}\n\n:host([hidden]) {\n @apply hidden;\n}\n\n.bq-option {\n @apply flex cursor-pointer items-center text-[length:--bq-option--font-size] is-full;\n @apply pe-[--bq-option--padding-end] ps-[--bq-option--padding-start] p-b-[--bq-option--paddingY] p-i-[--bq-option--paddingY];\n @apply rounded-[--bq-option--border-radius] bg-[--bq-option--background] shadow-[shadow:--bq-option--box-shadow];\n @apply border-[length:--bq-option--border-width] border-[color:--bq-option--border-color];\n // Transition\n @apply transition-colors duration-150 ease-in-out;\n // Focus\n @apply [&:not(.disabled)]:focus-visible:focus;\n // Hover\n @apply [&:not(.disabled)]:hover:bg-hover-ui-secondary;\n // Active\n @apply [&.active:not(.disabled)]:bg-ui-brand-alt [&.active:not(.disabled)]:text-text-brand;\n // Disabled\n @apply [&.disabled]:cursor-not-allowed [&.disabled]:opacity-60;\n\n border-style: var(--bq-option--border-style);\n}\n\n.bq-option__label {\n @apply inline-block flex-auto overflow-hidden text-ellipsis whitespace-nowrap;\n @apply pe-[--bq-option-label--padding-end] ps-[--bq-option-label--padding-start];\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper.\n * @part label - The `span` element in which the label text is displayed.\n * @part prefix - The `span` element in which the prefix is displayed (generally `bq-icon`).\n * @part suffix - The `span` element in which the suffix is displayed (generally `bq-icon`).\n /\n@Component({\n tag: 'bq-option',\n styleUrl: './scss/bq-option.scss',\n shadow: true,\n})\nexport class BqOption {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n private suffixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqOptionElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasPrefix: boolean = false;\n @State() hasSuffix: boolean = false;\n\n // Public Property API\n // ========================\n\n /* If true, the option is hidden. /\n @Prop({ reflect: true }) hidden: boolean = false;\n\n /* If true, the option is disabled. /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* A string representing the value of the option. Can be used to identify the item /\n @Prop({ reflect: true }) value?: string;\n\n /* If true, the option is selected and active. /\n @Prop({ reflect: true }) selected: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when item loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called when item is focused /\n @Event() bqFocus: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called when item is clicked /\n @Event() bqClick: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called on enter key press */\n @Event() bqEnter: EventEmitter<HTMLBqOptionElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n // Listeners\n // ==============\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Enter') return;\n this.bqEnter.emit(this.el);\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private onBlur = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqBlur.emit(this.el);\n };\n\n private onFocus = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqFocus.emit(this.el);\n };\n\n private onClick = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqClick.emit(this.el);\n };\n\n private onSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n };\n\n private handleSuffixSlotChange = () => {\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private get isDisabledOrHidden() {\n return this.disabled \|\| this.hidden;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host\n aria-disabled={this.isDisabledOrHidden ? 'true' : 'false'}\n aria-hidden={this.hidden ? 'true' : 'false'}\n aria-selected={this.selected ? 'true' : 'false'}\n role=\"option\"\n >\n <div\n class={{\n 'bq-option': true,\n disabled: this.disabled,\n active: !this.disabled && this.selected,\n }}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onClick={this.onClick}\n tabindex={this.isDisabledOrHidden ? '-1' : '0'}\n role=\"button\"\n part=\"base\"\n >\n <span\n class={{\n 'bq-option__prefix me-[--bq-option--gap-start] flex items-center': true,\n '!hidden': !this.hasPrefix,\n }}\n ref={(elem) => (this.prefixElem = elem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.onSlotChange} />\n </span>\n <span class=\"bq-option__label\" part=\"label\">\n <slot />\n </span>\n <span\n class={{\n 'bq-option__suffix ml-auto ms-[--bq-option--gap-end] flex items-center': true,\n '!hidden': !this.hasSuffix,\n }}\n ref={(elem) => (this.suffixElem = elem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"bq-option.entry.js","mappings":"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","names":[],"sources":["../../packages/beeq/src/components/option/scss/bq-option.scss?tag=bq-option&encapsulation=shadow","../../packages/beeq/src/components/option/bq-option.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- /\n/ Option styles /\n/ -------------------------------------------------------------------------- /\n\n@import './bq-option.variables';\n\n:host {\n @apply block;\n}\n\n:host([hidden]) {\n @apply hidden;\n}\n\n.bq-option {\n @apply flex cursor-pointer items-center text-[length:--bq-option--font-size] is-full;\n @apply pe-[--bq-option--padding-end] ps-[--bq-option--padding-start] p-b-[--bq-option--paddingY] p-i-[--bq-option--paddingY];\n @apply rounded-[--bq-option--border-radius] bg-[--bq-option--background] shadow-[shadow:--bq-option--box-shadow];\n @apply border-[length:--bq-option--border-width] border-[color:--bq-option--border-color];\n // Transition\n @apply transition-colors duration-150 ease-in-out;\n // Focus\n @apply [&:not(.disabled)]:focus-visible:focus;\n // Hover\n @apply [&:not(.disabled)]:hover:bg-hover-ui-secondary;\n // Active\n @apply [&.active:not(.disabled)]:bg-ui-brand-alt [&.active:not(.disabled)]:text-text-brand;\n // Disabled\n @apply [&.disabled]:cursor-not-allowed [&.disabled]:opacity-60;\n\n border-style: var(--bq-option--border-style);\n}\n\n.bq-option__label {\n @apply inline-block flex-auto overflow-hidden text-ellipsis whitespace-nowrap;\n @apply pe-[--bq-option-label--padding-end] ps-[--bq-option-label--padding-start];\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core';\n\nimport { hasSlotContent } from '../../shared/utils';\n\n/\n @part base - The component's internal wrapper.\n * @part label - The `span` element in which the label text is displayed.\n * @part prefix - The `span` element in which the prefix is displayed (generally `bq-icon`).\n * @part suffix - The `span` element in which the suffix is displayed (generally `bq-icon`).\n /\n@Component({\n tag: 'bq-option',\n styleUrl: './scss/bq-option.scss',\n shadow: true,\n})\nexport class BqOption {\n // Own Properties\n // ====================\n\n private prefixElem: HTMLElement;\n private suffixElem: HTMLElement;\n\n // Reference to host HTML element\n // ===================================\n\n @Element() el!: HTMLBqOptionElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() hasPrefix: boolean = false;\n @State() hasSuffix: boolean = false;\n\n // Public Property API\n // ========================\n\n /* If true, the option is hidden. /\n @Prop({ reflect: true }) hidden: boolean = false;\n\n /* If true, the option is disabled. /\n @Prop({ reflect: true }) disabled?: boolean = false;\n\n /* A string representing the value of the option. Can be used to identify the item /\n @Prop({ reflect: true }) value?: string;\n\n /* If true, the option is selected and active. /\n @Prop({ reflect: true }) selected: boolean = false;\n\n // Prop lifecycle events\n // =======================\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when item loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called when item is focused /\n @Event() bqFocus: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called when item is clicked /\n @Event() bqClick: EventEmitter<HTMLBqOptionElement>;\n\n /* Handler to be called on enter key press */\n @Event() bqEnter: EventEmitter<HTMLBqOptionElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n // Listeners\n // ==============\n\n @Listen('keydown')\n onKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Enter') return;\n this.bqEnter.emit(this.el);\n }\n\n // Public methods API\n // These methods are exposed on the host element.\n // Always use two lines.\n // Public Methods must be async.\n // Requires JSDocs for public API documentation.\n // ===============================================\n\n // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n private onBlur = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqBlur.emit(this.el);\n };\n\n private onFocus = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqFocus.emit(this.el);\n };\n\n private onClick = (event: Event) => {\n if (this.isDisabledOrHidden) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n this.bqClick.emit(this.el);\n };\n\n private onSlotChange = () => {\n this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n };\n\n private handleSuffixSlotChange = () => {\n this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n };\n\n private get isDisabledOrHidden() {\n return this.disabled \|\| this.hidden;\n }\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host\n aria-disabled={this.isDisabledOrHidden ? 'true' : 'false'}\n aria-hidden={this.hidden ? 'true' : 'false'}\n aria-selected={this.selected ? 'true' : 'false'}\n role=\"option\"\n >\n <div\n class={{\n 'bq-option': true,\n disabled: this.disabled,\n active: !this.disabled && this.selected,\n }}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onClick={this.onClick}\n tabindex={this.isDisabledOrHidden ? '-1' : '0'}\n role=\"button\"\n part=\"base\"\n >\n <span\n class={{\n 'bq-option__prefix me-[--bq-option--gap-start] flex items-center': true,\n '!hidden': !this.hasPrefix,\n }}\n ref={(elem) => (this.prefixElem = elem)}\n part=\"prefix\"\n >\n <slot name=\"prefix\" onSlotchange={this.onSlotChange} />\n </span>\n <span class=\"bq-option__label\" part=\"label\">\n <slot />\n </span>\n <span\n class={{\n 'bq-option__suffix ml-auto ms-[--bq-option--gap-end] flex items-center': true,\n '!hidden': !this.hasSuffix,\n }}\n ref={(elem) => (this.suffixElem = elem)}\n part=\"suffix\"\n >\n <slot name=\"suffix\" onSlotchange={this.handleSuffixSlotChange} />\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/bq-page-title.entry.js CHANGED Viewed

@@ -3,7 +3,6 @@
  * © https://beeq.design - Apache 2 License.
  */
 import { r as registerInstance, g as getElement, h } from './index-033f1efb.js';
-import './assetsPath-e2f1ceb9.js';
 import { b as hasSlotContent } from './slot-58bfedb5.js';
 const bqPageTitleCss = ".transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}::backdrop,:root{--bq-blue-100:#e7f0fd;--bq-blue-200:#d0e2fb;--bq-blue-300:#a1c5f7;--bq-blue-400:#73a8f3;--bq-blue-500:#448bef;--bq-blue-600:#156eeb;--bq-blue-700:#1158bc;--bq-blue-800:#0d428d;--bq-blue-900:#082c5e;--bq-blue-1000:#04162f;--bq-corai-100:#fff2f2;--bq-corai-200:#ffe6e6;--bq-corai-300:#ffccce;--bq-corai-400:#ffb3b5;--bq-corai-500:#ff999d;--bq-corai-600:#ff8084;--bq-corai-700:#cc666a;--bq-corai-800:#994d4f;--bq-corai-900:#663335;--bq-corai-1000:#331a1a;--bq-cyan-100:#e8f7fb;--bq-cyan-200:#d2f0f8;--bq-cyan-300:#a5e1f1;--bq-cyan-400:#78d1e9;--bq-cyan-500:#4bc2e2;--bq-cyan-600:#1eb3db;--bq-cyan-700:#188faf;--bq-cyan-800:#126b83;--bq-cyan-900:#0c4858;--bq-cyan-1000:#06242c;--bq-gold-100:#fbf4ec;--bq-gold-200:#f7e9da;--bq-gold-300:#f0d3b6;--bq-gold-400:#e8bc91;--bq-gold-500:#e1a66d;--bq-gold-600:#d99048;--bq-gold-700:#ae733a;--bq-gold-800:#82562b;--bq-gold-900:#573a1d;--bq-gold-1000:#2b1d0e;--bq-green-100:#e8f8ef;--bq-green-200:#d2f1e0;--bq-green-300:#a5e3c1;--bq-green-400:#78d5a1;--bq-green-500:#4bc782;--bq-green-600:#1eb963;--bq-green-700:#18944f;--bq-green-800:#126f3b;--bq-green-900:#0c4a28;--bq-green-1000:#062514;--bq-grey-100:#f1f2f4;--bq-grey-200:#e7e8eb;--bq-grey-300:#caccd2;--bq-grey-400:#a6aab3;--bq-grey-50:#f6f6f8;--bq-grey-500:#898e99;--bq-grey-600:#646a77;--bq-grey-700:#3f4350;--bq-grey-800:#2a2c35;--bq-grey-900:#1c1d23;--bq-grey-950:#15161a;--bq-grey-1000:#0d0e11;--bq-indigo-100:#edecfc;--bq-indigo-200:#dcdafa;--bq-indigo-300:#b9b5f5;--bq-indigo-400:#9590ef;--bq-indigo-500:#726bea;--bq-indigo-600:#4f46e5;--bq-indigo-700:#3f38b7;--bq-indigo-800:#2f2a89;--bq-indigo-900:#201c5c;--bq-indigo-1000:#100e2e;--bq-iris-100:#e9f0ff;--bq-iris-200:#d6e0ff;--bq-iris-300:#b2c0fe;--bq-iris-400:#8691f8;--bq-iris-500:#6061ee;--bq-iris-600:#4f46e5;--bq-iris-700:#413abd;--bq-iris-800:#332e95;--bq-iris-900:#26216d;--bq-iris-1000:#181545;--bq-lime-100:#f5fae8;--bq-lime-200:#ecf6d2;--bq-lime-300:#d9eda5;--bq-lime-400:#c5e379;--bq-lime-500:#b2da4c;--bq-lime-600:#9fd11f;--bq-lime-700:#7fa719;--bq-lime-800:#5f7d13;--bq-lime-900:#40540c;--bq-lime-1000:#202a06;--bq-magenta-100:#fce7f4;--bq-magenta-200:#f9cfea;--bq-magenta-300:#f39fd6;--bq-magenta-400:#ee6fbf;--bq-magenta-500:#e83fab;--bq-magenta-600:#de1395;--bq-magenta-700:#b20f77;--bq-magenta-800:#850c59;--bq-magenta-900:#58083c;--bq-magenta-1000:#2c041e;--bq-neutral-white:#fbfbfc;--bq-neutral-black:#060708;--bq-orange-100:#fbf0e9;--bq-orange-200:#f8e1d4;--bq-orange-300:#f1c2a8;--bq-orange-400:#eaa47d;--bq-orange-500:#e38551;--bq-orange-600:#dc6726;--bq-orange-700:#b0521e;--bq-orange-800:#843e17;--bq-orange-900:#58290f;--bq-orange-1000:#2c1508;--bq-purple-100:#efebf8;--bq-purple-200:#e0d7f2;--bq-purple-300:#c1afe5;--bq-purple-400:#a388d8;--bq-purple-500:#8460cb;--bq-purple-600:#6538be;--bq-purple-700:#512d98;--bq-purple-800:#3d2272;--bq-purple-900:#28164c;--bq-purple-1000:#140b26;--bq-red-100:#fce7ea;--bq-red-200:#f9d1d5;--bq-red-300:#f3a2ac;--bq-red-400:#ed7482;--bq-red-500:#e74559;--bq-red-600:#e1172f;--bq-red-700:#b41226;--bq-red-800:#870e1c;--bq-red-900:#5a0913;--bq-red-1000:#2d0509;--bq-sky-100:#eff4fb;--bq-sky-200:#dfeaf8;--bq-sky-300:#bfd5f1;--bq-sky-400:#9ec1e9;--bq-sky-500:#7eace2;--bq-sky-600:#5e97db;--bq-sky-700:#4b79af;--bq-sky-800:#385b83;--bq-sky-900:#263c58;--bq-sky-1000:#131e2c;--bq-teal-100:#e5f7f5;--bq-teal-200:#ccf0eb;--bq-teal-300:#99e1d8;--bq-teal-400:#66d2c4;--bq-teal-500:#33c3b1;--bq-teal-600:#00b49d;--bq-teal-700:#00907e;--bq-teal-800:#006c5e;--bq-teal-900:#00483f;--bq-teal-1000:#00241f;--bq-volcano-100:#feede7;--bq-volcano-200:#fddbd1;--bq-volcano-300:#fbb8a3;--bq-volcano-400:#fa9474;--bq-volcano-500:#f87146;--bq-volcano-600:#f64d18;--bq-volcano-700:#c53e13;--bq-volcano-800:#942e0e;--bq-volcano-900:#621f0a;--bq-volcano-1000:#310f05;--bq-yellow-100:#fefbe7;--bq-yellow-200:#fcf6d0;--bq-yellow-300:#faeea0;--bq-yellow-400:#f7e571;--bq-yellow-500:#f5dd41;--bq-yellow-600:#f2d412;--bq-yellow-700:#c2aa0e;--bq-yellow-800:#917f0b;--bq-yellow-900:#615507;--bq-yellow-1000:#302a04;--bq-endava-grey-50:#f7f7f8;--bq-endava-grey-100:#e4e6e7;--bq-endava-grey-200:#b5babe;--bq-endava-grey-300:#949ca1;--bq-endava-grey-400:#737d84;--bq-endava-grey-500:#525f67;--bq-endava-grey-600:#30404b;--bq-endava-grey-700:#2b3942;--bq-endava-grey-800:#263139;--bq-endava-grey-900:#192b37;--bq-endava-grey-950:#151b1e;--bq-endava-grey-1000:#0f1316;--bq-endava-neutral-white:#fafbfb;--bq-endava-neutral-black:#060708;--bq-endava-orange-100:#fef3f1;--bq-endava-orange-200:#fbd6d1;--bq-endava-orange-300:#fab7af;--bq-endava-orange-400:#fa988b;--bq-endava-orange-500:#fc7866;--bq-endava-orange-600:#ff5640;--bq-endava-orange-700:#ce4a39;--bq-endava-orange-800:#a03d30;--bq-endava-orange-900:#722e25;--bq-endava-orange-1000:#471e19}*,:after,:before{box-sizing:border-box}*{font:inherit;margin:0}ol[role=list],ul[role=list]{list-style-type:none}html{font-size:var(--bq-font-size--m)}html:focus-within{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bq-background--primary);color:var(--bq-text--primary);font-family:var(--bq-font-family);line-height:var(--bq-font-line-height--regular);min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto;transition-duration:.01ms!important}}:root{--bq-white:#fff;--bq-black:#060708;--bq-neutral-50:var(--bq-grey-50);--bq-neutral-100:var(--bq-grey-100);--bq-neutral-200:var(--bq-grey-200);--bq-neutral-300:var(--bq-grey-300);--bq-neutral-400:var(--bq-grey-400);--bq-neutral-500:var(--bq-grey-500);--bq-neutral-600:var(--bq-grey-600);--bq-neutral-700:var(--bq-grey-700);--bq-neutral-800:var(--bq-grey-800);--bq-neutral-900:var(--bq-grey-900);--bq-neutral-950:var(--bq-grey-950);--bq-neutral-1000:var(--bq-grey-1000);--bq-brand-light:var(--bq-iris-100);--bq-brand:var(--bq-iris-600);--bq-brand-dark:var(--bq-iris-1000);--bq-accent-light:var(--bq-purple-100);--bq-accent:var(--bq-purple-600);--bq-accent-dark:var(--bq-purple-1000);--bq-success-light:var(--bq-teal-100);--bq-success:var(--bq-teal-600);--bq-success-dark:var(--bq-teal-1000);--bq-danger-light:var(--bq-red-100);--bq-danger:var(--bq-red-600);--bq-danger-dark:var(--bq-red-1000);--bq-warning-light:var(--bq-gold-100);--bq-warning:var(--bq-gold-600);--bq-warning-dark:var(--bq-gold-1000);--bq-info-light:var(--bq-iris-100);--bq-info:var(--bq-iris-600);--bq-info-dark:var(--bq-iris-1000);--bq-focus:var(--bq-iris-600);--bq-data-01:var(--bq-brand);--bq-data-02:var(--bq-purple-600);--bq-data-03:var(--bq-magenta-600);--bq-data-04:var(--bq-cyan-600);--bq-data-05:var(--bq-teal-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-yellow-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-blue-600);--bq-data-10:var(--bq-grey-600);--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white);--bq-radius--none:0;--bq-radius--xs2:0.125rem;--bq-radius--xs:0.25rem;--bq-radius--s:0.5rem;--bq-radius--m:0.75rem;--bq-radius--l:1.5rem;--bq-radius--full:9999px;--bq-box-shadow--xs:0 2px 0 rgba(0,0,0,.016);--bq-box-shadow--s:0 8px 24px rgba(0,0,0,.04);--bq-box-shadow--m:0 10px 48px -16px rgba(0,0,0,.12);--bq-box-shadow--l:0 20px 58px -16px rgba(0,0,0,.16);--bq-font-family:\"Outfit\",sans-serif;--bq-font-size--xs:0.75rem;--bq-font-size--s:0.875rem;--bq-font-size--m:1rem;--bq-font-size--l:1.125rem;--bq-font-size--xl:1.5rem;--bq-font-size--xxl:2rem;--bq-font-size--xxl2:2.5rem;--bq-font-size--xxl3:3rem;--bq-font-size--xxl4:3.5rem;--bq-font-size--xxl5:4rem;--bq-font-weight--thin:100;--bq-font-weight--light:300;--bq-font-weight--regular:400;--bq-font-weight--medium:500;--bq-font-weight--semibold:600;--bq-font-weight--bold:700;--bq-font-line-height--small:1.2;--bq-font-line-height--regular:1.5;--bq-font-line-height--large:1.5;--bq-spacing-xs3:0.125rem;--bq-spacing-xs2:0.25rem;--bq-spacing-xs:0.5rem;--bq-spacing-s:0.75rem;--bq-spacing-m:1rem;--bq-spacing-l:1.5rem;--bq-spacing-xl:2rem;--bq-spacing-xxl:2.5rem;--bq-spacing-xxl2:3.5rem;--bq-spacing-xxl3:4rem;--bq-spacing-xxl4:4.5rem;--bq-stroke-s:1px;--bq-stroke-m:2px;--bq-stroke-l:3px}.beeq.light,.light,:root,[bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--alt:var(--bq-white);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-light);--bq-hover:#bcbfc5;--bq-active:#444546}.beeq.dark,.dark,[bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-950);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-brand);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-brand);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-brand);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-brand);--bq-ui--info-alt:var(--bq-brand-dark);--bq-hover:#444546;--bq-active:#1f2026}.endava,[bq-theme=endava]{--bq-font-family:\"Poppins\",sans-serif;--bq-white:#fafbfb;--bq-black:#030406;--bq-neutral-50:var(--bq-endava-grey-50);--bq-neutral-100:var(--bq-endava-grey-100);--bq-neutral-200:var(--bq-endava-grey-200);--bq-neutral-300:var(--bq-endava-grey-300);--bq-neutral-400:var(--bq-endava-grey-400);--bq-neutral-500:var(--bq-endava-grey-500);--bq-neutral-600:var(--bq-endava-grey-600);--bq-neutral-700:var(--bq-endava-grey-700);--bq-neutral-800:var(--bq-endava-grey-800);--bq-neutral-900:var(--bq-endava-grey-900);--bq-neutral-950:var(--bq-endava-grey-950);--bq-neutral-1000:var(--bq-endava-grey-1000);--bq-brand-light:var(--bq-endava-orange-100);--bq-brand:var(--bq-endava-orange-600);--bq-brand-dark:var(--bq-endava-orange-1000);--bq-accent-light:var(--bq-endava-orange-100);--bq-accent:var(--bq-endava-orange-600);--bq-accent-dark:var(--bq-endava-orange-1000);--bq-success-light:var(--bq-green-100);--bq-success:var(--bq-green-600);--bq-success-dark:var(--bq-green-1000);--bq-danger-light:var(--bq-corai-100);--bq-danger:var(--bq-corai-600);--bq-danger-dark:var(--bq-corai-1000);--bq-warning-light:var(--bq-yellow-100);--bq-warning:var(--bq-yellow-600);--bq-warning-dark:var(--bq-yellow-1000);--bq-info-light:var(--bq-blue-100);--bq-info:var(--bq-blue-600);--bq-info-dark:var(--bq-blue-1000);--bq-focus:var(--bq-endava-orange-600);--bq-data-01:var(--bq-brand);--bq-data-02:#af0cd8;--bq-data-03:#0ca8d8;--bq-data-04:var(--bq-teal-600);--bq-data-05:var(--bq-yellow-600);--bq-data-06:var(--bq-orange-600);--bq-data-07:var(--bq-blue-600);--bq-data-08:var(--bq-red-600);--bq-data-09:var(--bq-purple-600);--bq-data-10:#394b56;--bq-data-11:var(--bq-black);--bq-data-12:var(--bq-white)}.endava.light,[bq-theme=endava][bq-mode=light]{--bq-background--primary:var(--bq-white);--bq-background--secondary:var(--bq-neutral-100);--bq-background--tertiary:var(--bq-neutral-200);--bq-background--alt:var(--bq-neutral-300);--bq-background--inverse:var(--bq-neutral-900);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-800);--bq-icon--secondary:var(--bq-neutral-600);--bq-icon--inverse:var(--bq-neutral-50);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-200);--bq-stroke--secondary:var(--bq-neutral-600);--bq-stroke--tertiary:var(--bq-neutral-900);--bq-stroke--inverse:var(--bq-white);--bq-stroke--brand:var(--bq-brand);--bq-stroke--alt:var(--bq-neutral-50);--bq-stroke--brand-alt:var(--bq-brand-light);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-800);--bq-text--secondary:var(--bq-neutral-600);--bq-text--inverse:var(--bq-neutral-50);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-white);--bq-ui--secondary:var(--bq-neutral-200);--bq-ui--tertiary:var(--bq-neutral-500);--bq-ui--inverse:var(--bq-neutral-900);--bq-ui--alt:var(--bq-neutral-50);--bq-ui--brand-alt:var(--bq-brand-light);--bq-ui--brand:var(--bq-brand);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-light);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-light);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-light);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-light);--bq-hover:#444546;--bq-active:#1f2026}.endava.dark,[bq-theme=endava][bq-mode=dark]{--bq-background--primary:var(--bq-neutral-1000);--bq-background--secondary:var(--bq-neutral-900);--bq-background--tertiary:var(--bq-neutral-800);--bq-background--alt:var(--bq-neutral-700);--bq-background--inverse:var(--bq-neutral-600);--bq-background--brand:var(--bq-brand);--bq-background--overlay:var(--bq-neutral-900);--bq-icon--primary:var(--bq-neutral-100);--bq-icon--secondary:var(--bq-neutral-400);--bq-icon--inverse:var(--bq-neutral-800);--bq-icon--brand:var(--bq-brand);--bq-icon--alt:var(--bq-white);--bq-icon--info:var(--bq-info);--bq-icon--success:var(--bq-success);--bq-icon--warning:var(--bq-warning);--bq-icon--danger:var(--bq-danger);--bq-stroke--primary:var(--bq-neutral-900);--bq-stroke--secondary:var(--bq-neutral-700);--bq-stroke--tertiary:var(--bq-neutral-400);--bq-stroke--inverse:var(--bq-neutral-950);--bq-stroke--brand:var(--bq-brand);--bq-stroke--brand-alt:var(--bq-brand-dark);--bq-stroke--alt:var(--bq-neutral-1000);--bq-stroke--success:var(--bq-success);--bq-stroke--warning:var(--bq-warning);--bq-stroke--danger:var(--bq-danger);--bq-stroke--info:var(--bq-info);--bq-text--primary:var(--bq-neutral-100);--bq-text--secondary:var(--bq-neutral-400);--bq-text--inverse:var(--bq-neutral-800);--bq-text--brand:var(--bq-brand);--bq-text--alt:var(--bq-neutral-white);--bq-text--info:var(--bq-info);--bq-text--success:var(--bq-success);--bq-text--warning:var(--bq-warning);--bq-text--danger:var(--bq-danger);--bq-ui--primary:var(--bq-neutral-900);--bq-ui--secondary:var(--bq-neutral-800);--bq-ui--tertiary:var(--bq-neutral-700);--bq-ui--inverse:var(--bq-neutral-100);--bq-ui--brand:var(--bq-brand);--bq-ui--brand-alt:var(--bq-brand-dark);--bq-ui--alt:var(--bq-neutral-950);--bq-ui--success:var(--bq-success);--bq-ui--success-alt:var(--bq-success-dark);--bq-ui--warning:var(--bq-warning);--bq-ui--warning-alt:var(--bq-warning-dark);--bq-ui--danger:var(--bq-danger);--bq-ui--danger-alt:var(--bq-danger-dark);--bq-ui--info:var(--bq-info);--bq-ui--info-alt:var(--bq-info-dark);--bq-hover:#444546;--bq-active:#1f2026}.block{display:block}@-webkit-keyframes fade-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}@-webkit-keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes slide-in{0%{-webkit-transform:translateY(10px);transform:translateY(10px)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:host{--paddingY:var(--bq-spacing-xl);--subtitle-borderBlockEnd:1px solid var(--bq-stroke--primary);--subtitle-fontWeight:var(--bq-font-weight--medium);--subtitle-textColor:var(--bq-text--secondary);--subtitle-textSize:var(--bq-font-size--l);--title-fontWeight:var(--bq-font-weight--bold);--title-lineHeight:var(--bq-font-line-height--regular);--title-textColor:var(--bq-text--primary);--title-textSize:var(--bq-font-size--xxl);display:block}.static{position:static}.flex{display:flex}.\\!hidden{display:none!important}.hidden{display:none}.flex-grow{flex-grow:1}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-xs{gap:var(--bq-spacing-xs)}.text-\\[length\\:--subtitle-textSize\\]{font-size:var(--subtitle-textSize)}.text-\\[length\\:--title-textSize\\]{font-size:var(--title-textSize)}.font-\\[--subtitle-fontWeight\\]{font-weight:var(--subtitle-fontWeight)}.font-\\[--title-fontWeight\\]{font-weight:var(--title-fontWeight)}.leading-\\[--title-lineHeight\\]{line-height:var(--title-lineHeight)}.text-\\[color\\:--subtitle-textColor\\]{color:var(--subtitle-textColor)}.text-\\[color\\:--title-textColor\\]{color:var(--title-textColor)}.p-b-\\[--paddingY\\]{padding-block:var(--paddingY)}.p-b-xs2{padding-block:var(--bq-spacing-xs2)}.p-i-xs2{padding-inline:var(--bq-spacing-xs2)}.\\[border-block-end\\:--subtitle-borderBlockEnd\\]{border-block-end:var(--subtitle-borderBlockEnd)}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}";