npm - @beeq/core - Versions diffs - 1.12.14-beta.0 → 1.13.0 - Mend

@beeq/core 1.12.14-beta.0 → 1.13.0

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 (545) hide show

package/dist/collection/components/radio/scss/bq-radio.css CHANGED Viewed

	@@ -1 +1 @@
1	- .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{text-size-adjust:none;font-family:var(--bq-font-family);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);line-height:var(--bq-font-line-height--regular);min-height:100vb;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}}:where(: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:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[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-100);--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}.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-950);--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}:where(.endava),:where([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,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[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-100);--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-950);--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}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.relative{position:relative}.box-border{box-sizing:border-box}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-full{border-radius:var(--bq-radius--full)}.rounded-s{border-radius:var(--bq-radius--s)}.border-\[length\:--bq-radio--border-width\]{border-width:var(--bq-radio--border-width)}.border-solid{border-style:solid}.border-icon-brand{border-color:var(--bq-icon--brand)}.bg-ui-brand{background-color:var(--bq-ui--brand)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-primary{color:var(--bq-text--primary)}.opacity-60{opacity:.6}.transition-\[background-color\]{transition-duration:.15s;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\[color\2c background-color\2c border-color\2c box-shadow\]{transition-duration:.15s;transition-property:color,background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.bg-hover-ui-primary{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.border-hover-icon-brand{border-color:color-mix(in srgb,var(--bq-icon--brand),var(--bq-hover) 20%)}.border-hover-icon-primary{border-color:color-mix(in srgb,var(--bq-icon--primary),var(--bq-hover) 20%)}.bs-\[--bq-radio--size\]{block-size:var(--bq-radio--size)}.bs-full{block-size:100%}.is-\[--bq-radio--size\]{inline-size:var(--bq-radio--size)}.is-full{inline-size:100%}.p-b-\[2px\]{padding-block:2px}.p-b-\[3px\]{padding-block:3px}.p-b-xs{padding-block:var(--bq-spacing-xs)}.p-i-\[2px\]{padding-inline:2px}.p-i-\[3px\]{padding-inline:3px}.p-i-xs{padding-inline:var(--bq-spacing-xs)}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}@-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-radio--size:24px;--bq-radio--border-width:var(--bq-stroke-m);display:inline-block}.bq-radio{align-items:center;border-radius:var(--bq-radius--s);box-sizing:border-box;cursor:pointer;display:inline-flex;gap:.5rem;justify-content:center;padding-block:var(--bq-spacing-xs);padding-inline:var(--bq-spacing-xs);transition-duration:.3s;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-radio.is-disabled{cursor:not-allowed;opacity:.6}.bq-radio.is-disabled.is-checked .bq-radio__circle{border-color:var(--bq-icon--brand)}.bq-radio.is-disabled.is-checked .bq-radio__checked{background-color:var(--bq-ui--brand)}.bq-radio.has-background:not(.is-disabled):hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-radio.is-checked:not(.is-disabled) .bq-radio__circle{border-color:var(--bq-icon--brand)}.bq-radio.is-checked:not(.is-disabled) .bq-radio__checked{background-color:var(--bq-ui--brand)}.bq-radio.is-checked:not(.is-disabled):hover .bq-radio__checked,.bq-radio.is-checked:not(.is-disabled):hover .bq-radio__circle,.bq-radio:not(.is-disabled):hover .bq-radio__circle{border-color:color-mix(in srgb,var(--bq-icon--brand),var(--bq-hover) 20%)}.bq-radio__input{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.bq-radio__input:focus-visible~.bq-radio__circle{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-radio__control{block-size:var(--bq-radio--size);inline-size:var(--bq-radio--size);padding-block:2px;padding-inline:2px}.bq-radio__circle,.bq-radio__control{align-items:center;border-radius:var(--bq-radius--full);box-sizing:border-box;display:flex;justify-content:center}.bq-radio__circle{block-size:100%;border-color:color-mix(in srgb,var(--bq-icon--primary),var(--bq-hover) 20%);border-style:solid;border-width:var(--bq-radio--border-width);inline-size:100%;padding-block:3px;padding-inline:3px;position:relative}.bq-radio__checked{block-size:100%;border-radius:var(--bq-radius--full);inline-size:100%}.bq-radio__label{color:var(--bq-text--primary);font-weight:var(--bq-font-weight--medium);line-height:var(--bq-font-line-height--regular)}.bq-radio__checked,.bq-radio__circle,.bq-radio__label{transition-duration:.3s;transition-property:color,background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.blur{--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.static{position:static}
1	+ .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{text-size-adjust:none;font-family:var(--bq-font-family);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);line-height:var(--bq-font-line-height--regular);min-height:100vb;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}}:where(: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:not([bq-mode]),.light,:root:not([bq-theme]):not([bq-mode]),:root[bq-theme=beeq]:not([bq-mode]),[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-100);--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}.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-950);--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}:where(.endava),:where([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,.endava:not([bq-mode]),[bq-theme=endava]:not([bq-mode]),[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-100);--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-950);--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}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.relative{position:relative}.box-border{box-sizing:border-box}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.rounded-full{border-radius:var(--bq-radius--full)}.rounded-s{border-radius:var(--bq-radius--s)}.border-\[length\:--bq-radio--border-width\]{border-width:var(--bq-radio--border-width)}.border-solid{border-style:solid}.border-icon-brand{border-color:var(--bq-icon--brand)}.bg-\[--bq-radio--background-color\]{background-color:var(--bq-radio--background-color)}.bg-ui-brand{background-color:var(--bq-ui--brand)}.font-medium{font-weight:var(--bq-font-weight--medium)}.leading-regular{line-height:var(--bq-font-line-height--regular)}.text-primary{color:var(--bq-text--primary)}.opacity-60{opacity:.6}.transition-\[background-color\]{transition-duration:.15s;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-\[color\2c background-color\2c border-color\2c box-shadow\]{transition-duration:.15s;transition-property:color,background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.bg-hover-ui-primary{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.border-hover-icon-brand{border-color:color-mix(in srgb,var(--bq-icon--brand),var(--bq-hover) 20%)}.border-hover-icon-primary{border-color:color-mix(in srgb,var(--bq-icon--primary),var(--bq-hover) 20%)}.bs-\[--bq-radio--size\]{block-size:var(--bq-radio--size)}.bs-full{block-size:100%}.is-\[--bq-radio--size\]{inline-size:var(--bq-radio--size)}.is-full{inline-size:100%}.p-b-\[2px\]{padding-block:2px}.p-b-\[3px\]{padding-block:3px}.p-b-xs{padding-block:var(--bq-spacing-xs)}.p-i-\[2px\]{padding-inline:2px}.p-i-\[3px\]{padding-inline:3px}.p-i-xs{padding-inline:var(--bq-spacing-xs)}.focus{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}@-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-radio--background-color:var(--bq-ui--primary);--bq-radio--border-width:var(--bq-stroke-m);--bq-radio--size:24px;display:inline-block}.bq-radio{align-items:center;border-radius:var(--bq-radius--s);box-sizing:border-box;cursor:pointer;display:inline-flex;gap:.5rem;justify-content:center;padding-block:var(--bq-spacing-xs);padding-inline:var(--bq-spacing-xs);transition-duration:.3s;transition-property:background-color;transition-timing-function:cubic-bezier(.4,0,.2,1)}.bq-radio.is-disabled{cursor:not-allowed;opacity:.6}.bq-radio.is-disabled.is-checked .bq-radio__circle{border-color:var(--bq-icon--brand)}.bq-radio.is-disabled.is-checked .bq-radio__checked{background-color:var(--bq-ui--brand)}.bq-radio.has-background:not(.is-disabled):hover{background-color:color-mix(in srgb,var(--bq-ui--primary),var(--bq-hover) 20%)}.bq-radio.is-checked:not(.is-disabled) .bq-radio__circle{border-color:var(--bq-icon--brand)}.bq-radio.is-checked:not(.is-disabled) .bq-radio__checked{background-color:var(--bq-ui--brand)}.bq-radio.is-checked:not(.is-disabled):hover .bq-radio__checked,.bq-radio.is-checked:not(.is-disabled):hover .bq-radio__circle,.bq-radio:not(.is-disabled):hover .bq-radio__circle{border-color:color-mix(in srgb,var(--bq-icon--brand),var(--bq-hover) 20%)}.bq-radio__input{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.bq-radio__input:focus-visible~.bq-radio__circle{outline:var(--bq-ring-width,2px) solid var(--bq-ring-color-focus,var(--bq-focus));outline-offset:var(--bq-ring-offset-width,1px)}.bq-radio__control{block-size:var(--bq-radio--size);inline-size:var(--bq-radio--size);padding-block:2px;padding-inline:2px}.bq-radio__circle,.bq-radio__control{align-items:center;border-radius:var(--bq-radius--full);box-sizing:border-box;display:flex;justify-content:center}.bq-radio__circle{background-color:var(--bq-radio--background-color);block-size:100%;border-color:color-mix(in srgb,var(--bq-icon--primary),var(--bq-hover) 20%);border-style:solid;border-width:var(--bq-radio--border-width);inline-size:100%;padding-block:3px;padding-inline:3px;position:relative}.bq-radio__checked{block-size:100%;border-radius:var(--bq-radius--full);inline-size:100%}.bq-radio__label{color:var(--bq-text--primary);font-weight:var(--bq-font-weight--medium);line-height:var(--bq-font-line-height--regular)}.bq-radio__checked,.bq-radio__circle,.bq-radio__label{transition-duration:.3s;transition-property:color,background-color,border-color,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.blur{--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.static{position:static}

package/dist/collection/components/radio-group/bq-radio-group.js CHANGED Viewed

@@ -153,8 +153,8 @@ export class BqRadioGroup {
     formResetCallback() {
         this.value = this.initialValue;
         this.internals.setFormValue(this.value ?? null);
-        this.updateFormValidity();
         this.updateCustomStates();
+        this.updateFormValidity();
     }
     // Listeners
     // ==============
@@ -241,18 +241,14 @@ export class BqRadioGroup {
             });
             return;
         }
-        // Find which radio should be focusable
-        let focusableRadio;
         // Priority 1: Currently checked radio
-        focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);
+        let focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);
         // Priority 2: Radio matching current value
-        if (!focusableRadio && this.value) {
-            focusableRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);
+        if (!isNil(this.value)) {
+            focusableRadio ??= this.cachedRadioElements.find((radio) => radio.value === this.value);
         }
         // Priority 3: First enabled radio (fallback)
-        if (!focusableRadio) {
-            focusableRadio = this.cachedRadioElements.find((radio) => !radio.disabled);
-        }
+        focusableRadio ??= this.cachedRadioElements.find((radio) => !radio.disabled);
         // Apply tabIndex to all radios
         this.cachedRadioElements.forEach((radio) => {
             radio.tabIndex = radio === focusableRadio ? 0 : -1;
@@ -353,7 +349,7 @@ export class BqRadioGroup {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (h(Host, { key: '324a831a19e6713db5b5f561d78571cb84e9b530', tabindex: this.tabIndex }, h("fieldset", { key: '41474f54b518587ecd897bbbddd8a96ba1e7ebed', "aria-controls": "bq-radiogroup", "aria-disabled": this.disabled, "aria-labelledby": "bq-radio-group__label", class: { 'bq-radio-group': true, 'has-fieldset': this.fieldset }, disabled: this.disabled, part: "base" }, h("legend", { key: 'f5c8834333aa3174418298e7240f16d9d5e85c70', part: "label" }, h("slot", { key: '8180b8c2a610af608092a5a37b3bb5b59ef32b76', id: "bq-radiogroup__label", name: "label" })), h("div", { key: 'dbad104bf6d984de4f9057e2d588dc1899705116', class: `bq-radio-group--${this.orientation}`, part: "group" }, h("slot", { key: '08ce09046a91f79a46e015bda8fc094291a66f4a', id: "bq-radiogroup", onSlotchange: this.handleSlotChange })))));
+        return (h(Host, { key: 'bdd2d1ebac746b834eeef6b01842b5b77b2ba2ce', tabindex: this.tabIndex }, h("fieldset", { key: '185fed234744906f7335e1b415e47fd6755fc54b', "aria-controls": "bq-radiogroup", "aria-disabled": this.disabled, "aria-labelledby": "bq-radio-group__label", class: { 'bq-radio-group': true, 'has-fieldset': this.fieldset }, disabled: this.disabled, part: "base" }, h("legend", { key: '242145ebde1fa2dd6123fdc4b507aee17d5c7bea', part: "label" }, h("slot", { key: '05de970d8fa4722ab9f5d40c29918a4ad49d0029', id: "bq-radiogroup__label", name: "label" })), h("div", { key: 'ed3388c950af9fffa1d8edb4e10d1fdfaa07fbcb', class: `bq-radio-group--${this.orientation}`, part: "group" }, h("slot", { key: '67e58e5ccd2f765f963681e281e2d4a8edd2dfd1', id: "bq-radiogroup", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bq-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-group/bq-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bq-radio-group.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/radio-group/bq-radio-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport {\n debounce,\n getNextElement,\n isDefined,\n isEventTargetChildOfElement,\n isNil,\n type TDebounce,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TRadioGroupOrientation } from './bq-radio-group.types';\nimport { RADIO_GROUP_ORIENTATION } from './bq-radio-group.types';\n\nconst KEY_MAP = {\n ArrowDown: 'forward',\n ArrowRight: 'forward',\n ArrowUp: 'backward',\n ArrowLeft: 'backward',\n} as const;\n\ntype Direction = (typeof KEY_MAP)[keyof typeof KEY_MAP];\n\n/*\n The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n \n @example How to use it\n * ```html\n * <bq-radio-group fieldset value=\"option1\">\n * <span slot=\"label\">radio group</span>\n * <bq-radio value=\"option1\">Radio option 1</bq-radio>\n * <bq-radio value=\"option2\">Radio option 2</bq-radio>\n * <bq-radio value=\"option3\">Radio option 3</bq-radio>\n * </bq-radio-group>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n \n @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {number} debounce-time - A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change\n * @attr {boolean} disabled - If `true` radio inputs are disabled\n * @attr {boolean} fieldset - If `true` displays fieldset\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {\"horizontal\" \| \"vertical\"} orientation - The display orientation of the radio inputs\n * @attr {boolean} required - If `true`, the radio group is required\n * @attr {string} required-validation-message - The native form validation message when the radio group is required\n * @attr {string} value - The display orientation of the radio inputs\n \n @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n \n @event bqChange - Handler to be called when the radio state changes\n \n @slot - The bq-radio items to group\n * @slot label - The label content of radio group\n \n @part base - The component's internal wrapper of the radio components.\n * @part label - The `<legend>` element that holds the text content.\n * @part group - The `<div>` element that holds the radio inputs.\n /\n@Component({\n tag: 'bq-radio-group',\n styleUrl: './scss/bq-radio-group.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqRadioGroup {\n // Own Properties\n // ====================\n\n private initialValue?: string;\n private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqRadioElement }>;\n private focusedBqRadio: HTMLBqRadioElement \| null = null;\n private readonly radioElementsSet = new Set<HTMLBqRadioElement>();\n private cachedRadioElements: HTMLBqRadioElement[] = [];\n\n // Reference to host HTML element\n // ===================================\n\n @AttachInternals() internals!: ElementInternals;\n @Element() el!: HTMLBqRadioGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() checkedRadio?: HTMLBqRadioElement;\n @State() tabIndex: '0' \| '-1' = '0';\n\n // Public Property API\n // ========================\n\n /* If true, all radio inputs in the group will display a background on hover /\n @Prop({ reflect: true }) backgroundOnHover = false;\n\n /* A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change /\n @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n /* If true radio inputs are disabled /\n @Prop({ reflect: true }) disabled = false;\n\n /* If true displays fieldset /\n @Prop({ reflect: true }) fieldset = false;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* The display orientation of the radio inputs /\n @Prop({ reflect: true, mutable: true }) orientation: TRadioGroupOrientation = 'vertical';\n\n /* If true, the radio group is required /\n @Prop({ reflect: true }) required = false;\n\n /* The native form validation message when the radio group is required /\n @Prop({ reflect: true }) requiredValidationMessage?: string;\n\n /* A string representing the value of the radio. /\n @Prop({ reflect: true, mutable: true }) value?: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('debounceTime')\n handleDebounceTimeChange() {\n const MIN_DEBOUNCE_TIME = 0;\n const normalizedDebounceTime = Math.max(MIN_DEBOUNCE_TIME, this.debounceTime);\n\n if (normalizedDebounceTime !== this.debounceTime) {\n this.debounceTime = normalizedDebounceTime;\n }\n\n this.debouncedBqChange?.cancel();\n this.debouncedBqChange = debounce((event: { value: string; target: HTMLBqRadioElement }): void => {\n this.bqChange?.emit(event);\n }, this.debounceTime);\n }\n\n @Watch('disabled')\n handleDisabledChange() {\n this.tabIndex = this.disabled ? '-1' : '0';\n this.updateRadioTabIndexes();\n }\n\n @Watch('backgroundOnHover')\n @Watch('disabled')\n @Watch('name')\n @Watch('required')\n handleGroupProperties() {\n this.updateRadioProperties();\n }\n\n @Watch('orientation')\n checkPropValues() {\n validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');\n }\n\n @Watch('required')\n handleRequiredChange() {\n this.updateFormValidity();\n }\n\n @Watch('value')\n handleValueChange() {\n this.updateRadioProperties();\n this.updateFormValidity();\n\n // Find and update the checked radio based on the new value\n const newCheckedRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);\n if (newCheckedRadio) {\n this.checkedRadio = newCheckedRadio;\n this.debouncedBqChange?.({ value: this.value, target: newCheckedRadio });\n } else {\n this.checkedRadio = undefined;\n }\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the radio state changes /\n @Event() bqChange: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n /* Handler to be called when the radio loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqRadioElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.handleDebounceTimeChange();\n this.internals.setFormValue(this.value ?? null);\n\n this.updateCustomStates();\n this.updateFormValidity();\n }\n\n disconnectedCallback() {\n this.debouncedBqChange?.cancel();\n }\n\n formAssociatedCallback() {\n this.internals.setFormValue(this.value ?? null);\n this.updateFormValidity();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n this.internals.setFormValue(this.value ?? null);\n this.updateFormValidity();\n this.updateCustomStates();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { capture: true })\n async onBqClick(event: CustomEvent<{ value: string; target: HTMLBqRadioElement }>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const { target, value } = event.detail;\n if (value === this.value) return;\n\n requestAnimationFrame(() => {\n if (event.defaultPrevented) return;\n this.updateRadioSelection(target);\n });\n }\n\n @Listen('bqKeyDown')\n onBqKeyDown(event: CustomEvent<{ key: string; target: HTMLBqRadioElement }>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const direction: Direction \| undefined = KEY_MAP[event.detail.key];\n if (!direction) return;\n\n this.focusRadioInputSibling(event.detail.target, direction);\n }\n\n @Listen('bqFocus', { capture: true })\n onBqFocus(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const shouldStopPropagation = isDefined(this.focusedBqRadio);\n this.focusedBqRadio = event.detail;\n\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n }\n\n @Listen('bqBlur', { capture: true })\n onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n // NOTE: if focusedBqRadio is nil that means the event occurred from this component\n if (isNil(this.focusedBqRadio)) return;\n\n event.stopPropagation();\n\n requestAnimationFrame(() => {\n if (this.focusedBqRadio !== event.detail) return;\n\n this.focusedBqRadio = null;\n this.bqBlur.emit(event.detail);\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 // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n /\n Initializes the radio elements set by querying the host element for `ds-radio` elements.\n * This is done to avoid re-querying the host element for radio elements on every change.\n /\n private initializeRadioElements = (): void => {\n this.radioElementsSet.clear();\n this.el.querySelectorAll('bq-radio').forEach((radio) => {\n this.radioElementsSet.add(radio);\n });\n // Caching the radio elements in an array for faster access and iteration\n this.cachedRadioElements = Array.from(this.radioElementsSet);\n // Set the tabIndex of the host element to -1 if there are no radio elements or the group is disabled, otherwise set it to 0\n this.tabIndex = this.cachedRadioElements.length === 0 \|\| this.disabled ? '-1' : '0';\n // Set initial tabIndex for all radios\n this.updateRadioTabIndexes();\n };\n\n /\n Sets tabIndex for all radio elements based on current state\n * Handles all scenarios: disabled state, checked radio, value matching, fallback to first\n /\n private updateRadioTabIndexes = (): void => {\n if (this.cachedRadioElements.length === 0) return;\n\n // If disabled, all radios get tabIndex -1\n if (this.disabled) {\n this.cachedRadioElements.forEach((radio) => {\n radio.tabIndex = -1;\n });\n return;\n }\n\n // Find which radio should be focusable\n let focusableRadio: HTMLBqRadioElement \| undefined;\n\n // Priority 1: Currently checked radio\n focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);\n\n // Priority 2: Radio matching current value\n if (!focusableRadio && this.value) {\n focusableRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);\n }\n\n // Priority 3: First enabled radio (fallback)\n if (!focusableRadio) {\n focusableRadio = this.cachedRadioElements.find((radio) => !radio.disabled);\n }\n\n // Apply tabIndex to all radios\n this.cachedRadioElements.forEach((radio) => {\n radio.tabIndex = radio === focusableRadio ? 0 : -1;\n });\n };\n\n /\n Updates the radio selection and focus.\n * @param target - The radio element to update.\n /\n private updateRadioSelection = (target: HTMLBqRadioElement): void => {\n // Only uncheck the previously checked radio if it's different\n if (this.checkedRadio && this.checkedRadio !== target) {\n this.checkedRadio.checked = false;\n this.checkedRadio.tabIndex = -1;\n }\n\n target.checked = true;\n target.tabIndex = 0;\n target.vFocus();\n\n this.checkedRadio = target;\n this.value = target.value;\n this.internals?.setFormValue(this.value ?? null);\n\n this.updateRadioTabIndexes();\n };\n\n /\n Synchronizes properties of child radio elements with the group's state.\n /\n private updateRadioProperties = (): void => {\n if (this.cachedRadioElements.length === 0) return;\n\n const { backgroundOnHover, disabled, name, required, value } = this;\n\n for (const radio of this.cachedRadioElements) {\n radio.backgroundOnHover = backgroundOnHover;\n radio.checked = value === radio.value;\n // This will allows us to force all radio elements to be disabled\n // while keeping the disabled state of the radio element if it was set individually by the user\n radio.forceDisabled = disabled;\n radio.name = name;\n radio.required = required;\n }\n };\n\n /\n Focuses the next/previous radio element in the group based on the current target.\n * Handles circular navigation and skips disabled elements.\n * @param currentTarget - The currently focused radio element\n * @param direction - The navigation direction ('forward' \| 'backward')\n /\n private focusRadioInputSibling = (currentTarget: HTMLBqRadioElement, direction: Direction): void => {\n // If there is none or only one radio element, there will be no sibling to focus\n if (this.cachedRadioElements.length <= 1) return;\n\n const currentIndex = this.cachedRadioElements.indexOf(currentTarget);\n // If the index of the radio element target is not found, it means that it's not part of the group\n if (currentIndex === -1) return;\n\n const nextElement = getNextElement(this.cachedRadioElements, currentIndex, direction);\n this.updateRadioSelection(nextElement);\n };\n\n private updateFormValidity = async (): Promise<void> => {\n const { internals, required, requiredValidationMessage, value } = this;\n // Clear the validity state\n internals?.states.clear();\n\n if (!required \|\| (required && !isNil(value))) {\n // If the radio group is not required or has a value, set the validity state to valid\n internals?.states.add('valid');\n internals?.setValidity({});\n return;\n }\n\n const firstRadio = this.cachedRadioElements[0];\n if (!firstRadio) return;\n // If the radio group is required and has no value, set the validity state to invalid\n internals?.states.add('invalid');\n // We need to pass the native input element to the setValidity method as anchor element\n internals?.setValidity(\n { valueMissing: true },\n requiredValidationMessage ?? 'Please select an option',\n await firstRadio.getNativeInput(),\n );\n };\n\n /\n Updates the custom states based on the component properties.\n * The custom states can be used to style the component based on the component properties.\n * The custom states are `disabled`, based on the component properties.\n */\n private updateCustomStates = (): void => {\n const states = new Set<string>();\n\n if (this.disabled) states.add('disabled');\n if (this.orientation) states.add(this.orientation);\n\n // Update states\n this.internals?.states.clear();\n states.forEach((state) => {\n this.internals?.states.add(state);\n });\n };\n\n private handleSlotChange = (): void => {\n this.initializeRadioElements();\n this.updateRadioProperties();\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host tabindex={this.tabIndex}>\n <fieldset\n aria-controls=\"bq-radiogroup\"\n aria-disabled={this.disabled}\n aria-labelledby=\"bq-radio-group__label\"\n class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }}\n disabled={this.disabled}\n part=\"base\"\n >\n <legend part=\"label\">\n <slot id=\"bq-radiogroup__label\" name=\"label\" />\n </legend>\n <div class={`bq-radio-group--${this.orientation}`} part=\"group\">\n <slot id=\"bq-radiogroup\" onSlotchange={this.handleSlotChange} />\n </div>\n </fieldset>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"bq-radio-group.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/radio-group/bq-radio-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhH,OAAO,EACL,QAAQ,EACR,cAAc,EACd,SAAS,EACT,2BAA2B,EAC3B,KAAK,EAEL,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,MAAM,OAAO,GAAG;IACd,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,UAAU;IACnB,SAAS,EAAE,UAAU;CACb,CAAC;AAIX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AASH,MAAM,OAAO,YAAY;IACvB,iBAAiB;IACjB,uBAAuB;IAEf,YAAY,CAAU;IACtB,iBAAiB,CAA2D;IAC5E,cAAc,GAA8B,IAAI,CAAC;IACxC,gBAAgB,GAAG,IAAI,GAAG,EAAsB,CAAC;IAC1D,mBAAmB,GAAyB,EAAE,CAAC;IAEvD,iCAAiC;IACjC,sCAAsC;IAEnB,SAAS,CAAoB;IACrC,EAAE,CAA2B;IAExC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAEjC,YAAY,CAAsB;IAClC,QAAQ,GAAe,GAAG,CAAC;IAEpC,sBAAsB;IACtB,2BAA2B;IAE3B,gFAAgF;IACvD,iBAAiB,GAAG,KAAK,CAAC;IAEnD,gIAAgI;IACxF,YAAY,GAAG,CAAC,CAAC;IAEzD,wCAAwC;IACf,QAAQ,GAAG,KAAK,CAAC;IAE1C,gCAAgC;IACP,QAAQ,GAAG,KAAK,CAAC;IAE1C,kGAAkG;IACzE,IAAI,CAAU;IAEvC,kDAAkD;IACV,WAAW,GAA2B,UAAU,CAAC;IAEzF,2CAA2C;IAClB,QAAQ,GAAG,KAAK,CAAC;IAE1C,0EAA0E;IACjD,yBAAyB,CAAU;IAE5D,oDAAoD;IACZ,KAAK,CAAU;IAEvD,wBAAwB;IACxB,0BAA0B;IAG1B,wBAAwB;QACtB,MAAM,iBAAiB,GAAG,CAAC,CAAC;QAC5B,MAAM,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAE9E,IAAI,sBAAsB,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;YACjD,IAAI,CAAC,YAAY,GAAG,sBAAsB,CAAC;QAC7C,CAAC;QAED,IAAI,CAAC,iBAAiB,EAAE,MAAM,EAAE,CAAC;QACjC,IAAI,CAAC,iBAAiB,GAAG,QAAQ,CAAC,CAAC,KAAoD,EAAQ,EAAE;YAC/F,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACxB,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;QAC3C,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAMD,qBAAqB;QACnB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAGD,eAAe;QACb,iBAAiB,CAAC,uBAAuB,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;IACjF,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAE1B,2DAA2D;QAC3D,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7F,IAAI,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,eAAe,CAAC;YACpC,IAAI,CAAC,iBAAiB,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;QAC3E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAChC,CAAC;IACH,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,wDAAwD;IAC/C,QAAQ,CAA8D;IAE/E,sDAAsD;IAC7C,MAAM,CAAmC;IAElD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QAEhD,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,iBAAiB,EAAE,MAAM,EAAE,CAAC;IACnC,CAAC;IAED,sBAAsB;QACpB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,YAAY;IACZ,iBAAiB;IAGjB,KAAK,CAAC,SAAS,CAAC,KAAiE;QAC/E,IAAI,CAAC,2BAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO;QAEzD,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QACvC,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;YAAE,OAAO;QAEjC,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,KAAK,CAAC,gBAAgB;gBAAE,OAAO;YACnC,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,WAAW,CAAC,KAA+D;QACzE,IAAI,CAAC,2BAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO;QAEzD,MAAM,SAAS,GAA0B,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC9D,CAAC;IAGD,SAAS,CAAC,KAAsC;QAC9C,IAAI,CAAC,2BAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO;QAEzD,MAAM,qBAAqB,GAAG,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC7D,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;QAEnC,IAAI,qBAAqB,EAAE,CAAC;YAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,QAAQ,CAAC,KAAsC;QAC7C,IAAI,CAAC,2BAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE,OAAO;QAEzD,mFAAmF;QACnF,IAAI,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC;YAAE,OAAO;QAEvC,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,CAAC,MAAM;gBAAE,OAAO;YAEjD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D;;;OAGG;IACK,uBAAuB,GAAG,GAAS,EAAE;QAC3C,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAC9B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACrD,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;QACH,yEAAyE;QACzE,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC7D,4HAA4H;QAC5H,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;QACpF,sCAAsC;QACtC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC,CAAC;IAEF;;;OAGG;IACK,qBAAqB,GAAG,GAAS,EAAE;QACzC,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAElD,0CAA0C;QAC1C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACzC,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;YACtB,CAAC,CAAC,CAAC;YACH,OAAO;QACT,CAAC;QAED,sCAAsC;QACtC,IAAI,cAAc,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAE7E,2CAA2C;QAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACvB,cAAc,KAAK,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1F,CAAC;QAED,6CAA6C;QAC7C,cAAc,KAAK,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAE7E,+BAA+B;QAC/B,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACzC,KAAK,CAAC,QAAQ,GAAG,KAAK,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF;;;OAGG;IACK,oBAAoB,GAAG,CAAC,MAA0B,EAAQ,EAAE;QAClE,8DAA8D;QAC9D,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE,CAAC;YACtD,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;YAClC,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QAClC,CAAC;QAED,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;QACpB,MAAM,CAAC,MAAM,EAAE,CAAC;QAEhB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;QAEjD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC,CAAC;IAEF;;OAEG;IACK,qBAAqB,GAAG,GAAS,EAAE;QACzC,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAElD,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEpE,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC7C,KAAK,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;YAC5C,KAAK,CAAC,OAAO,GAAG,KAAK,KAAK,KAAK,CAAC,KAAK,CAAC;YACtC,iEAAiE;YACjE,+FAA+F;YAC/F,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;YAC/B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;YAClB,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF;;;;;OAKG;IACK,sBAAsB,GAAG,CAAC,aAAiC,EAAE,SAAoB,EAAQ,EAAE;QACjG,gFAAgF;QAChF,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO;QAEjD,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QACrE,kGAAkG;QAClG,IAAI,YAAY,KAAK,CAAC,CAAC;YAAE,OAAO;QAEhC,MAAM,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,mBAAmB,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;QACtF,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC;IACzC,CAAC,CAAC;IAEM,kBAAkB,GAAG,KAAK,IAAmB,EAAE;QACrD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,yBAAyB,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QACvE,2BAA2B;QAC3B,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;QAE1B,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;YAC7C,qFAAqF;YACrF,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAC/B,SAAS,EAAE,WAAW,CAAC,EAAE,CAAC,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;QAC/C,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,qFAAqF;QACrF,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACjC,uFAAuF;QACvF,SAAS,EAAE,WAAW,CACpB,EAAE,YAAY,EAAE,IAAI,EAAE,EACtB,yBAAyB,IAAI,yBAAyB,EACtD,MAAM,UAAU,CAAC,cAAc,EAAE,CAClC,CAAC;IACJ,CAAC,CAAC;IAEF;;;;OAIG;IACK,kBAAkB,GAAG,GAAS,EAAE;QACtC,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;QAEjC,IAAI,IAAI,CAAC,QAAQ;YAAE,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,IAAI,CAAC,WAAW;YAAE,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEnD,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACvB,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,gBAAgB,GAAG,GAAS,EAAE;QACpC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC,CAAC;IAEF,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAC3B,kFACgB,eAAe,mBACd,IAAI,CAAC,QAAQ,qBACZ,uBAAuB,EACvC,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAE,EAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM;gBAEX,+DAAQ,IAAI,EAAC,OAAO;oBAClB,6DAAM,EAAE,EAAC,sBAAsB,EAAC,IAAI,EAAC,OAAO,GAAG,CACxC;gBACT,4DAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,OAAO;oBAC7D,6DAAM,EAAE,EAAC,eAAe,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5D,CACG,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, h, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport {\n debounce,\n getNextElement,\n isDefined,\n isEventTargetChildOfElement,\n isNil,\n type TDebounce,\n validatePropValue,\n} from '../../shared/utils';\nimport type { TRadioGroupOrientation } from './bq-radio-group.types';\nimport { RADIO_GROUP_ORIENTATION } from './bq-radio-group.types';\n\nconst KEY_MAP = {\n ArrowDown: 'forward',\n ArrowRight: 'forward',\n ArrowUp: 'backward',\n ArrowLeft: 'backward',\n} as const;\n\ntype Direction = (typeof KEY_MAP)[keyof typeof KEY_MAP];\n\n/*\n The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n \n @example How to use it\n * ```html\n * <bq-radio-group fieldset value=\"option1\">\n * <span slot=\"label\">radio group</span>\n * <bq-radio value=\"option1\">Radio option 1</bq-radio>\n * <bq-radio value=\"option2\">Radio option 2</bq-radio>\n * <bq-radio value=\"option3\">Radio option 3</bq-radio>\n * </bq-radio-group>\n * ```\n \n @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n \n @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {number} debounce-time - A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change\n * @attr {boolean} disabled - If `true` radio inputs are disabled\n * @attr {boolean} fieldset - If `true` displays fieldset\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {\"horizontal\" \| \"vertical\"} orientation - The display orientation of the radio inputs\n * @attr {boolean} required - If `true`, the radio group is required\n * @attr {string} required-validation-message - The native form validation message when the radio group is required\n * @attr {string} value - The display orientation of the radio inputs\n \n @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n \n @event bqChange - Handler to be called when the radio state changes\n \n @slot - The bq-radio items to group\n * @slot label - The label content of radio group\n \n @part base - The component's internal wrapper of the radio components.\n * @part label - The `<legend>` element that holds the text content.\n * @part group - The `<div>` element that holds the radio inputs.\n /\n@Component({\n tag: 'bq-radio-group',\n styleUrl: './scss/bq-radio-group.scss',\n formAssociated: true,\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class BqRadioGroup {\n // Own Properties\n // ====================\n\n private initialValue?: string;\n private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqRadioElement }>;\n private focusedBqRadio: HTMLBqRadioElement \| null = null;\n private readonly radioElementsSet = new Set<HTMLBqRadioElement>();\n private cachedRadioElements: HTMLBqRadioElement[] = [];\n\n // Reference to host HTML element\n // ===================================\n\n @AttachInternals() internals!: ElementInternals;\n @Element() el!: HTMLBqRadioGroupElement;\n\n // State() variables\n // Inlined decorator, alphabetical order\n // =======================================\n\n @State() checkedRadio?: HTMLBqRadioElement;\n @State() tabIndex: '0' \| '-1' = '0';\n\n // Public Property API\n // ========================\n\n /* If true, all radio inputs in the group will display a background on hover /\n @Prop({ reflect: true }) backgroundOnHover = false;\n\n /* A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change /\n @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n /* If true radio inputs are disabled /\n @Prop({ reflect: true }) disabled = false;\n\n /* If true displays fieldset /\n @Prop({ reflect: true }) fieldset = false;\n\n /* Name of the HTML input form control. Submitted with the form as part of a name/value pair. /\n @Prop({ reflect: true }) name!: string;\n\n /* The display orientation of the radio inputs /\n @Prop({ reflect: true, mutable: true }) orientation: TRadioGroupOrientation = 'vertical';\n\n /* If true, the radio group is required /\n @Prop({ reflect: true }) required = false;\n\n /* The native form validation message when the radio group is required /\n @Prop({ reflect: true }) requiredValidationMessage?: string;\n\n /* A string representing the value of the radio. /\n @Prop({ reflect: true, mutable: true }) value?: string;\n\n // Prop lifecycle events\n // =======================\n\n @Watch('debounceTime')\n handleDebounceTimeChange() {\n const MIN_DEBOUNCE_TIME = 0;\n const normalizedDebounceTime = Math.max(MIN_DEBOUNCE_TIME, this.debounceTime);\n\n if (normalizedDebounceTime !== this.debounceTime) {\n this.debounceTime = normalizedDebounceTime;\n }\n\n this.debouncedBqChange?.cancel();\n this.debouncedBqChange = debounce((event: { value: string; target: HTMLBqRadioElement }): void => {\n this.bqChange?.emit(event);\n }, this.debounceTime);\n }\n\n @Watch('disabled')\n handleDisabledChange() {\n this.tabIndex = this.disabled ? '-1' : '0';\n this.updateRadioTabIndexes();\n }\n\n @Watch('backgroundOnHover')\n @Watch('disabled')\n @Watch('name')\n @Watch('required')\n handleGroupProperties() {\n this.updateRadioProperties();\n }\n\n @Watch('orientation')\n checkPropValues() {\n validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');\n }\n\n @Watch('required')\n handleRequiredChange() {\n this.updateFormValidity();\n }\n\n @Watch('value')\n handleValueChange() {\n this.updateRadioProperties();\n this.updateFormValidity();\n\n // Find and update the checked radio based on the new value\n const newCheckedRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);\n if (newCheckedRadio) {\n this.checkedRadio = newCheckedRadio;\n this.debouncedBqChange?.({ value: this.value, target: newCheckedRadio });\n } else {\n this.checkedRadio = undefined;\n }\n }\n\n // Events section\n // Requires JSDocs for public API documentation\n // ==============================================\n\n /* Handler to be called when the radio state changes /\n @Event() bqChange: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n /* Handler to be called when the radio loses focus /\n @Event() bqBlur: EventEmitter<HTMLBqRadioElement>;\n\n // Component lifecycle events\n // Ordered by their natural call order\n // =====================================\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.handleDebounceTimeChange();\n this.internals.setFormValue(this.value ?? null);\n\n this.updateCustomStates();\n this.updateFormValidity();\n }\n\n disconnectedCallback() {\n this.debouncedBqChange?.cancel();\n }\n\n formAssociatedCallback() {\n this.internals.setFormValue(this.value ?? null);\n this.updateFormValidity();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n this.internals.setFormValue(this.value ?? null);\n this.updateCustomStates();\n this.updateFormValidity();\n }\n\n // Listeners\n // ==============\n\n @Listen('bqClick', { capture: true })\n async onBqClick(event: CustomEvent<{ value: string; target: HTMLBqRadioElement }>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const { target, value } = event.detail;\n if (value === this.value) return;\n\n requestAnimationFrame(() => {\n if (event.defaultPrevented) return;\n this.updateRadioSelection(target);\n });\n }\n\n @Listen('bqKeyDown')\n onBqKeyDown(event: CustomEvent<{ key: string; target: HTMLBqRadioElement }>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const direction: Direction \| undefined = KEY_MAP[event.detail.key];\n if (!direction) return;\n\n this.focusRadioInputSibling(event.detail.target, direction);\n }\n\n @Listen('bqFocus', { capture: true })\n onBqFocus(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n const shouldStopPropagation = isDefined(this.focusedBqRadio);\n this.focusedBqRadio = event.detail;\n\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n }\n\n @Listen('bqBlur', { capture: true })\n onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n if (!isEventTargetChildOfElement(event, this.el)) return;\n\n // NOTE: if focusedBqRadio is nil that means the event occurred from this component\n if (isNil(this.focusedBqRadio)) return;\n\n event.stopPropagation();\n\n requestAnimationFrame(() => {\n if (this.focusedBqRadio !== event.detail) return;\n\n this.focusedBqRadio = null;\n this.bqBlur.emit(event.detail);\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 // Local methods\n // Internal business logic.\n // These methods cannot be called from the host element.\n // =======================================================\n\n /\n Initializes the radio elements set by querying the host element for `ds-radio` elements.\n * This is done to avoid re-querying the host element for radio elements on every change.\n /\n private initializeRadioElements = (): void => {\n this.radioElementsSet.clear();\n this.el.querySelectorAll('bq-radio').forEach((radio) => {\n this.radioElementsSet.add(radio);\n });\n // Caching the radio elements in an array for faster access and iteration\n this.cachedRadioElements = Array.from(this.radioElementsSet);\n // Set the tabIndex of the host element to -1 if there are no radio elements or the group is disabled, otherwise set it to 0\n this.tabIndex = this.cachedRadioElements.length === 0 \|\| this.disabled ? '-1' : '0';\n // Set initial tabIndex for all radios\n this.updateRadioTabIndexes();\n };\n\n /\n Sets tabIndex for all radio elements based on current state\n * Handles all scenarios: disabled state, checked radio, value matching, fallback to first\n /\n private updateRadioTabIndexes = (): void => {\n if (this.cachedRadioElements.length === 0) return;\n\n // If disabled, all radios get tabIndex -1\n if (this.disabled) {\n this.cachedRadioElements.forEach((radio) => {\n radio.tabIndex = -1;\n });\n return;\n }\n\n // Priority 1: Currently checked radio\n let focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);\n\n // Priority 2: Radio matching current value\n if (!isNil(this.value)) {\n focusableRadio ??= this.cachedRadioElements.find((radio) => radio.value === this.value);\n }\n\n // Priority 3: First enabled radio (fallback)\n focusableRadio ??= this.cachedRadioElements.find((radio) => !radio.disabled);\n\n // Apply tabIndex to all radios\n this.cachedRadioElements.forEach((radio) => {\n radio.tabIndex = radio === focusableRadio ? 0 : -1;\n });\n };\n\n /\n Updates the radio selection and focus.\n * @param target - The radio element to update.\n /\n private updateRadioSelection = (target: HTMLBqRadioElement): void => {\n // Only uncheck the previously checked radio if it's different\n if (this.checkedRadio && this.checkedRadio !== target) {\n this.checkedRadio.checked = false;\n this.checkedRadio.tabIndex = -1;\n }\n\n target.checked = true;\n target.tabIndex = 0;\n target.vFocus();\n\n this.checkedRadio = target;\n this.value = target.value;\n this.internals?.setFormValue(this.value ?? null);\n\n this.updateRadioTabIndexes();\n };\n\n /\n Synchronizes properties of child radio elements with the group's state.\n /\n private updateRadioProperties = (): void => {\n if (this.cachedRadioElements.length === 0) return;\n\n const { backgroundOnHover, disabled, name, required, value } = this;\n\n for (const radio of this.cachedRadioElements) {\n radio.backgroundOnHover = backgroundOnHover;\n radio.checked = value === radio.value;\n // This will allows us to force all radio elements to be disabled\n // while keeping the disabled state of the radio element if it was set individually by the user\n radio.forceDisabled = disabled;\n radio.name = name;\n radio.required = required;\n }\n };\n\n /\n Focuses the next/previous radio element in the group based on the current target.\n * Handles circular navigation and skips disabled elements.\n * @param currentTarget - The currently focused radio element\n * @param direction - The navigation direction ('forward' \| 'backward')\n /\n private focusRadioInputSibling = (currentTarget: HTMLBqRadioElement, direction: Direction): void => {\n // If there is none or only one radio element, there will be no sibling to focus\n if (this.cachedRadioElements.length <= 1) return;\n\n const currentIndex = this.cachedRadioElements.indexOf(currentTarget);\n // If the index of the radio element target is not found, it means that it's not part of the group\n if (currentIndex === -1) return;\n\n const nextElement = getNextElement(this.cachedRadioElements, currentIndex, direction);\n this.updateRadioSelection(nextElement);\n };\n\n private updateFormValidity = async (): Promise<void> => {\n const { internals, required, requiredValidationMessage, value } = this;\n // Clear the validity state\n internals?.states.clear();\n\n if (!required \|\| (required && !isNil(value))) {\n // If the radio group is not required or has a value, set the validity state to valid\n internals?.states.add('valid');\n internals?.setValidity({});\n return;\n }\n\n const firstRadio = this.cachedRadioElements[0];\n if (!firstRadio) return;\n // If the radio group is required and has no value, set the validity state to invalid\n internals?.states.add('invalid');\n // We need to pass the native input element to the setValidity method as anchor element\n internals?.setValidity(\n { valueMissing: true },\n requiredValidationMessage ?? 'Please select an option',\n await firstRadio.getNativeInput(),\n );\n };\n\n /\n Updates the custom states based on the component properties.\n * The custom states can be used to style the component based on the component properties.\n * The custom states are `disabled`, based on the component properties.\n */\n private updateCustomStates = (): void => {\n const states = new Set<string>();\n\n if (this.disabled) states.add('disabled');\n if (this.orientation) states.add(this.orientation);\n\n // Update states\n this.internals?.states.clear();\n states.forEach((state) => {\n this.internals?.states.add(state);\n });\n };\n\n private handleSlotChange = (): void => {\n this.initializeRadioElements();\n this.updateRadioProperties();\n };\n\n // render() function\n // Always the last one in the class.\n // ===================================\n\n render() {\n return (\n <Host tabindex={this.tabIndex}>\n <fieldset\n aria-controls=\"bq-radiogroup\"\n aria-disabled={this.disabled}\n aria-labelledby=\"bq-radio-group__label\"\n class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }}\n disabled={this.disabled}\n part=\"base\"\n >\n <legend part=\"label\">\n <slot id=\"bq-radiogroup__label\" name=\"label\" />\n </legend>\n <div class={`bq-radio-group--${this.orientation}`} part=\"group\">\n <slot id=\"bq-radiogroup\" onSlotchange={this.handleSlotChange} />\n </div>\n </fieldset>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/select/bq-select.js CHANGED Viewed

@@ -38,6 +38,7 @@ import { debounce, hasSlotContent, isDefined, isHTMLElement, isNil, stringToArra
  * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.
  * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.
  * @attr {string} form - The ID of the form that Select input field belongs to.
+ * @attr {string} form-validation-message - The native form validation message (mandatory if `required` is set).
  * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.
  * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.
  * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.
@@ -158,6 +159,8 @@ export class BqSelect {
     distance = 8;
     /** The ID of the form that the Select input belongs to. */
     form;
+    /** The native form validation message (mandatory if `required` is set) */
+    formValidationMessage;
     /** If true, the Select panel will remain open after a selection is made. */
     keepOpenOnSelect = false;
     /** The Select input name. */
@@ -205,6 +208,7 @@ export class BqSelect {
             this.value = this.multiple ? [] : '';
             this.internals.setFormValue(undefined);
             this.syncItemsFromValue();
+            this.updateFormValidity();
             return;
         }
         // Handle multiple selection mode
@@ -212,12 +216,17 @@ export class BqSelect {
             this.value = stringToArray(this.value);
             this.internals.setFormValue(this.value.join(','));
             this.syncItemsFromValue();
+            this.updateFormValidity();
             return;
         }
         // Handle single selection mode
         this.value = String(this.value);
         this.internals.setFormValue(this.value);
         this.syncItemsFromValue();
+        this.updateFormValidity();
+    }
+    handleRequiredPropChange() {
+        this.updateFormValidity();
     }
     // Events section
     // Requires JSDocs for public API documentation
@@ -251,11 +260,12 @@ export class BqSelect {
     formAssociatedCallback() {
         this.internals.role = 'combobox';
         this.internals.ariaExpanded = this.open ? 'true' : 'false';
+        this.updateFormValidity();
     }
     async formResetCallback() {
         if (isNil(this.value))
             return;
-        this.internals.setValidity({});
+        this.updateFormValidity();
         this.clear();
     }
     // Listeners
@@ -537,6 +547,23 @@ export class BqSelect {
         }
         return '';
     };
+    updateFormValidity = () => {
+        const { formValidationMessage, internals, required, value } = this;
+        // Clear the validity state
+        internals?.states.clear();
+        const isEmpty = this.multiple
+            ? !Array.isArray(value) || value.length === 0
+            : !isDefined(value) || String(value).trim() === '';
+        if (required && isEmpty) {
+            // Set validity state to invalid
+            internals?.states.add('invalid');
+            internals?.setValidity({ valueMissing: true }, formValidationMessage || 'Please select an option', this.inputElem);
+            return;
+        }
+        // Set validity state to valid if textarea has value or is not required
+        internals?.states.add('valid');
+        internals?.setValidity({});
+    };
     get options() {
         return Array.from(this.el.querySelectorAll('bq-option'));
     }
@@ -575,29 +602,29 @@ export class BqSelect {
     // ===================================
     render() {
         const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;
-        return (h("div", { key: '7fce1b5a16a7e5b25cce5624c60c09187f380f2c', class: "bq-select", part: "base" }, h("label", { key: '5785e81858a0493c5cfc2e80ebcd19d96ff50d22', "aria-label": this.name || this.fallbackInputId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, id: labelId, part: "label", ref: (labelElem) => {
+        return (h("div", { key: '3ac6927fd004b8de97f4b66f0fcb83151d04755c', class: "bq-select", part: "base" }, h("label", { key: '5f0d3b9899c3c17ce58a4cff93ba377993ff4f72', "aria-label": this.name || this.fallbackInputId, class: { 'bq-select__label': true, '!hidden': !this.hasLabel }, htmlFor: this.name || this.fallbackInputId, id: labelId, part: "label", ref: (labelElem) => {
                 this.labelElem = labelElem;
-            } }, h("slot", { key: 'bb7730c735f53312411f9d873483cb876835da0f', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: '8064982e9df5815d0213d6129212bc1e7472fdf9', class: "bq-select__dropdown w-full", disabled: this.disabled, disableScrollLock: this.disableScrollLock, distance: this.distance, exportparts: "panel", keepOpenOnSelect: this.keepOpenOnSelect, open: this.open, panelHeight: this.panelHeight, placement: this.placement, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy }, h("div", { key: '014b00e22b0870ae1fc70fdd712e75890741212f', class: {
+            } }, h("slot", { key: 'c7262cb63edc2a85de1bd119b9acab5f22038cb7', name: "label", onSlotchange: this.handleSlotChange })), h("bq-dropdown", { key: '3c8b5050c2c5d59236a5c2e9c663f11fde6d22eb', class: "bq-select__dropdown w-full", disabled: this.disabled, disableScrollLock: this.disableScrollLock, distance: this.distance, exportparts: "panel", keepOpenOnSelect: this.keepOpenOnSelect, open: this.open, panelHeight: this.panelHeight, placement: this.placement, sameWidth: this.sameWidth, skidding: this.skidding, strategy: this.strategy }, h("div", { key: 'f4affd0bc3129ebd50d6812b71aab734ad08dc14', class: {
                 'bq-select__control': true,
                 [`validation-${this.validationStatus}`]: true,
                 disabled: this.disabled,
-            }, part: "control", slot: "trigger" }, h("span", { key: '9258ab50855df0a94eaa470d55371cf5a3197ac9', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
+            }, part: "control", slot: "trigger" }, h("span", { key: '228c2739b4e2ba0d1fa09360e1c45a2594e3af1c', class: { 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }, part: "prefix", ref: (spanElem) => {
                 this.prefixElem = spanElem;
-            } }, h("slot", { key: '1cf1940473621784792bf8d0e77391233ec99aee', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: 'a91471faea3a207758de88e98081e159848c573f', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: 'db8bbcc8837bb9c3949130a8ca9a09a1377abf55', class: "bq-select__tags", part: "tags" }, h("slot", { key: '6a9d99f481a7b0a7e3df77ff01bbc515135c0bfb', name: "tags" }, this.displayTags))), h("input", { key: 'bf4b0b97f3b5adf3f7116a04efcdf66701b72e0a', "aria-controls": `bq-options-${this.name}`, "aria-disabled": this.disabled ? 'true' : 'false', "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", autoCapitalize: "off", autoComplete: "off", class: "bq-select__control--input is-full flex-grow", disabled: this.disabled, form: this.form, id: this.name || this.fallbackInputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, onKeyDown: this.handleKeydown, part: "input", placeholder: this.displayPlaceholder, readOnly: this.readonly, ref: (inputElem) => {
+            } }, h("slot", { key: '98a207db3b4e9fbb2aee9545d40b56ae3e3a2124', name: "prefix", onSlotchange: this.handleSlotChange })), h("div", { key: 'ee7ff8f24c599b9954f0ca664f7169262ee75636', class: "flex flex-1 overflow-x-auto", part: "input-outline" }, this.multiple && (h("span", { key: 'a9f016739ad1cad0e468954932bddaa00c222160', class: "bq-select__tags", part: "tags" }, h("slot", { key: 'faae09dca15fa1fbec43e6cbde5ecb7241fb82c0', name: "tags" }, this.displayTags))), h("input", { key: 'f5d11d101de3bab402f41253bd0bcbeb7f40c417', "aria-controls": `bq-options-${this.name}`, "aria-disabled": this.disabled ? 'true' : 'false', "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", autoCapitalize: "off", autoComplete: "off", class: "bq-select__control--input is-full flex-grow", disabled: this.disabled, form: this.form, id: this.name || this.fallbackInputId, name: this.name, onBlur: this.handleBlur, onFocus: this.handleFocus, onInput: this.handleInput, onKeyDown: this.handleKeydown, part: "input", placeholder: this.displayPlaceholder, readOnly: this.readonly, ref: (inputElem) => {
                 this.inputElem = inputElem;
             }, required: this.required, role: "combobox",
             // Events
             spellcheck: false, type: "text", value: this.displayValue })), this.hasClearIcon && (
         // The clear button will be visible as long as the input has a value
         // and the parent group is hovered or has focus-within
-        h("bq-button", { key: '8a74e1c5d96622392a828ce6336152e84b2d427d', appearance: "text", border: "s", class: "bq-select__control--clear ms-[--bq-select--gap] hidden [&::part(button)]:border-none [&::part(button)]:p-0", exportparts: "button", label: this.clearButtonLabel, onBqClick: this.handleClearClick, onlyIcon: true, part: "clear-btn", size: "small", tabIndex: -1 }, h("slot", { key: '0d3b64bba90b0d28fbf1fd1ef3f91b07cce7c542', name: "clear-icon" }, h("bq-icon", { key: 'e081ee013781bed15d22d1d3c999314eb1fc76af', "aria-hidden": "true", class: "flex", name: "x-circle" })))), h("span", { key: 'd6ee0750683f57c4843b66c0f57fa4f8fe593233', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, part: "suffix", ref: (spanElem) => {
+        h("bq-button", { key: '1bae439a9b9f3ba28393cf3c7a6fa7dde1bfdd4d', appearance: "text", border: "s", class: "bq-select__control--clear ms-[--bq-select--gap] hidden [&::part(button)]:border-none [&::part(button)]:p-0", exportparts: "button", label: this.clearButtonLabel, onBqClick: this.handleClearClick, onlyIcon: true, part: "clear-btn", size: "small", tabIndex: -1 }, h("slot", { key: '52147b8bbb070b92acfe631114e6c074ed04b3c1', name: "clear-icon" }, h("bq-icon", { key: 'fc1f97a1f710654113431fd816229e4421f04f72', "aria-hidden": "true", class: "flex", name: "x-circle" })))), h("span", { key: 'd6499acc2ff3c1d977d9048c62e961e90a894164', class: { 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }, part: "suffix", ref: (spanElem) => {
                 this.suffixElem = spanElem;
-            } }, h("slot", { key: '60bbf927836994e487ec5615ac37b46309a7f0d2', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: 'f92b77a0d9833e0ad31d7a9adbd8b0ce76f069b7', class: "flex", name: "caret-down" })))), h("bq-option-list", { key: '0b4fa059ac5d9a296358bffb05cd61a08bbb41f6', "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, role: "listbox" }, h("slot", { key: '9a42fd00864ff85ea0b9298b60d0f4cbdb9be43e' }))), h("div", { key: 'f09628183dc0f4e35caae1551d3de266a96ccc64', class: {
+            } }, h("slot", { key: 'b8da8cd1692533d5cb89507849b7b8ef11086287', name: "suffix", onSlotchange: this.handleSlotChange }, h("bq-icon", { key: '14e08948bbcac9b5ce4657fb900737c255e83415', class: "flex", name: "caret-down" })))), h("bq-option-list", { key: 'c8636fcfd3537b92bfa0ae4c2afff3da2207ac49', "aria-expanded": this.open ? 'true' : 'false', exportparts: "base:option-list", id: `bq-options-${this.name}`, onBqSelect: this.handleSelect, role: "listbox" }, h("slot", { key: 'fb79a3d78b80e1e46fbd686262f5b5ac32f14e69' }))), h("div", { key: 'c5a85030b5239bfef0997a893472bbe713d2a434', class: {
                 [`bq-select__helper-text validation-${this.validationStatus}`]: true,
                 '!hidden': !this.hasHelperText,
             }, part: "helper-text", ref: (divElem) => {
                 this.helperTextElem = divElem;
-            } }, h("slot", { key: '0ab5418216b6b41c64b7019a6ff4f6ab8bc751c4', name: "helper-text", onSlotchange: this.handleSlotChange }))));
+            } }, h("slot", { key: '7e779ebbb1ac575e253003e26d54c9eb402357fb', name: "helper-text", onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "bq-select"; }
     static get encapsulation() { return "shadow"; }
@@ -773,6 +800,25 @@ export class BqSelect {
                 "reflect": true,
                 "attribute": "form"
             },
+            "formValidationMessage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The native form validation message (mandatory if `required` is set)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "form-validation-message"
+            },
             "keepOpenOnSelect": {
                 "type": "boolean",
                 "mutable": false,
@@ -1074,7 +1120,7 @@ export class BqSelect {
                     "references": {
                         "TSelectValue": {
                             "location": "local",
-                            "path": "/Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System/packages/beeq/src/components/select/bq-select.tsx",
+                            "path": "/home/runner/work/BEEQ/BEEQ/packages/beeq/src/components/select/bq-select.tsx",
                             "id": "../../packages/beeq/src/components/select/bq-select.tsx::TSelectValue"
                         }
                     }
@@ -1241,7 +1287,7 @@ export class BqSelect {
                         },
                         "TSelectValue": {
                             "location": "local",
-                            "path": "/Users/dramos/PROJECTs/ENDAVA/BEEQ-Design-System/packages/beeq/src/components/select/bq-select.tsx",
+                            "path": "/home/runner/work/BEEQ/BEEQ/packages/beeq/src/components/select/bq-select.tsx",
                             "id": "../../packages/beeq/src/components/select/bq-select.tsx::TSelectValue"
                         }
                     },
@@ -1268,6 +1314,9 @@ export class BqSelect {
         return [{
                 "propName": "value",
                 "methodName": "handleValueChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleRequiredPropChange"
             }];
     }
     static get listeners() {