@coveo/atomic 3.59.2 → 3.59.4

package/dist/cjs/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.cjs

@@ -226,6 +226,7 @@ class AtomicCommerceSearchBox extends external_lit_namespaceObject.LitElement {
                 if (!e.shiftKey) this.onSubmit();
                 break;
             case 'Escape':
+                this.isExpanded = false;
                 this.suggestionManager.clearSuggestions();
                 break;
             case 'ArrowDown':

package/dist/cjs/components/insight/atomic-insight-search-box/atomic-insight-search-box.cjs

@@ -123,6 +123,7 @@ class AtomicInsightSearchBox extends external_lit_namespaceObject.LitElement {
                 if (!e.shiftKey) this.onSubmit();
                 break;
             case 'Escape':
+                this.isExpanded = false;
                 this.suggestionManager.clearSuggestions();
                 break;
             case 'ArrowDown':

package/dist/cjs/components/insight/atomic-insight-tab/atomic-insight-tab.cjs

@@ -30,7 +30,6 @@ const insight_namespaceObject = require("@coveo/headless/insight");
 const external_lit_namespaceObject = require("lit");
 const decorators_js_namespaceObject = require("lit/decorators.js");
 const when_js_namespaceObject = require("lit/directives/when.js");
-const button_cjs_namespaceObject = require("../../common/button.cjs");
 const store_cjs_namespaceObject = require("../../common/interface/store.cjs");
 const tab_common_cjs_namespaceObject = require("../../common/tabs/tab-common.cjs");
 const bind_state_cjs_namespaceObject = require("../../../decorators/bind-state.cjs");
@@ -49,6 +48,17 @@ function _ts_metadata(k, v) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 }
 class AtomicInsightTab extends external_lit_namespaceObject.LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeydown);
+        this.updateHostAttributes();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
     initialize() {
         this.tab = (0, insight_namespaceObject.buildTab)(this.bindings.engine, {
             options: {
@@ -64,46 +74,80 @@ class AtomicInsightTab extends external_lit_namespaceObject.LitElement {
         });
     }
     select() {
-        this.tab.select();
+        this.tab?.select();
     }
     updated() {
-        if (this.tabState) this.active = this.tabState.isActive;
+        if (this.tabState) {
+            this.active = this.tabState.isActive;
+            this.updateHostAttributes();
+        }
         (0, tab_common_cjs_namespaceObject.dispatchTabLoaded)(this);
     }
+    updateHostAttributes() {
+        this.setAttribute('role', 'tab');
+        this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+        this.tabIndex = this.active ? 0 : -1;
+    }
     render() {
-        return (0, external_lit_namespaceObject.html)`${(0, when_js_namespaceObject.when)(this.isAppLoaded, ()=>(0, button_cjs_namespaceObject.renderButton)({
-                props: {
-                    style: 'text-transparent',
-                    part: 'tab',
-                    class: this.tabState.isActive ? 'active' : '',
-                    ariaLabel: this.bindings.i18n.t('tab-search', {
-                        label: this.label
-                    }),
-                    title: this.label,
-                    ariaPressed: this.tabState.isActive ? 'true' : 'false',
-                    onClick: ()=>{
-                        this.tab.select();
-                    }
-                }
-            })((0, external_lit_namespaceObject.html)`${this.label}`))}`;
+        return (0, external_lit_namespaceObject.html)`<span part="tab" title=${this.label}
+      >${(0, when_js_namespaceObject.when)(this.isAppLoaded, ()=>this.label)}</span
+    >`;
     }
     constructor(...args){
-        super(...args), this.label = 'no-label', this.active = false, this.isAppLoaded = false, this.tabId = (0, utils_cjs_namespaceObject.randomID)('insight-tab');
+        super(...args), this.label = 'no-label', this.active = false, this.isAppLoaded = false, this.tabId = (0, utils_cjs_namespaceObject.randomID)('insight-tab'), this.handleClick = ()=>{
+            this.tab?.select();
+        }, this.handleKeydown = (event)=>{
+            if ('Enter' === event.key || ' ' === event.key) {
+                event.preventDefault();
+                this.tab?.select();
+                return;
+            }
+            const tablist = this.closest('[role="tablist"]');
+            if (!tablist) return;
+            const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+            const currentIndex = tabs.indexOf(this);
+            if (-1 === currentIndex) return;
+            let nextIndex = null;
+            if ('ArrowRight' === event.key) nextIndex = (currentIndex + 1) % tabs.length;
+            else if ('ArrowLeft' === event.key) nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+            else if ('Home' === event.key) nextIndex = 0;
+            else if ('End' === event.key) nextIndex = tabs.length - 1;
+            if (null !== nextIndex) {
+                event.preventDefault();
+                tabs.forEach((tab, index)=>{
+                    tab.tabIndex = index === nextIndex ? 0 : -1;
+                });
+                tabs[nextIndex].focus();
+            }
+        };
     }
 }
 AtomicInsightTab.styles = (0, external_lit_namespaceObject.css)`
     @reference '../../../utils/tailwind.global.tw.css';
-    .active::after {
-      @apply bg-primary absolute bottom-0 block h-1 w-full rounded;
-      content: '';
+
+    :host {
+      display: flex;
+      @apply cursor-pointer;
+      @apply focus-visible:outline-none;
     }
 
     [part='tab'] {
       @apply relative mt-1 mr-6 pb-3 font-semibold;
+      @apply text-on-background;
       max-width: 150px;
       text-overflow: ellipsis;
       overflow: hidden;
     }
+
+    :host(:hover) [part='tab'],
+    :host(:focus-visible) [part='tab'] {
+      @apply text-primary;
+    }
+
+    :host([active]) [part='tab']::after {
+      @apply bg-primary absolute bottom-0 block h-1 w-full rounded;
+      content: '';
+    }
   `;
 _ts_decorate([
     (0, decorators_js_namespaceObject.property)({

package/dist/cjs/components/insight/atomic-insight-tabs/atomic-insight-tabs.cjs

@@ -46,7 +46,9 @@ class AtomicInsightTabs extends (0, light_dom_cjs_namespaceObject.LightDomMixin)
     initialize() {}
     render() {
         return (0, external_lit_namespaceObject.html)`<atomic-tab-bar
-      >${this.renderDefaultSlotContent()}</atomic-tab-bar
+      ><div role="tablist" style="display:flex;flex-direction:row;width:100%">
+        ${this.renderDefaultSlotContent()}
+      </div></atomic-tab-bar
     >`;
     }
 }

package/dist/cjs/components/ipx/atomic-ipx-tab/atomic-ipx-tab.cjs

@@ -30,7 +30,6 @@ const headless_namespaceObject = require("@coveo/headless");
 const external_lit_namespaceObject = require("lit");
 const decorators_js_namespaceObject = require("lit/decorators.js");
 const when_js_namespaceObject = require("lit/directives/when.js");
-const button_cjs_namespaceObject = require("../../common/button.cjs");
 const store_cjs_namespaceObject = require("../../common/interface/store.cjs");
 const tab_common_cjs_namespaceObject = require("../../common/tabs/tab-common.cjs");
 const bind_state_cjs_namespaceObject = require("../../../decorators/bind-state.cjs");
@@ -46,6 +45,17 @@ function _ts_metadata(k, v) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 }
 class AtomicIpxTab extends external_lit_namespaceObject.LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeydown);
+        this.updateHostAttributes();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
     initialize() {
         this.tab = (0, headless_namespaceObject.buildTab)(this.bindings.engine, {
             options: {
@@ -61,54 +71,80 @@ class AtomicIpxTab extends external_lit_namespaceObject.LitElement {
         });
     }
     select() {
-        this.tab.select();
+        this.tab?.select();
     }
     updated() {
-        if (this.tabState) this.active = this.tabState.isActive;
+        if (this.tabState) {
+            this.active = this.tabState.isActive;
+            this.updateHostAttributes();
+        }
         (0, tab_common_cjs_namespaceObject.dispatchTabLoaded)(this);
     }
+    updateHostAttributes() {
+        this.setAttribute('role', 'tab');
+        this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+        this.tabIndex = this.active ? 0 : -1;
+    }
     render() {
-        return (0, when_js_namespaceObject.when)(this.isAppLoaded, ()=>{
-            const buttonClasses = [
-                'relative',
-                'pb-3',
-                'mt-1',
-                'mr-6',
-                'font-semibold'
-            ];
-            if (this.tabState.isActive) buttonClasses.push('active');
-            return (0, button_cjs_namespaceObject.renderButton)({
-                props: {
-                    style: 'text-transparent',
-                    part: 'tab',
-                    class: buttonClasses.join(' '),
-                    ariaLabel: this.bindings.i18n.t('tab-search', {
-                        label: this.label
-                    }),
-                    title: this.label,
-                    ariaPressed: this.tabState.isActive ? 'true' : 'false',
-                    onClick: ()=>this.tab.select()
-                }
-            })((0, external_lit_namespaceObject.html)`${this.label}`);
-        }, ()=>external_lit_namespaceObject.nothing);
+        return (0, external_lit_namespaceObject.html)`<span part="tab" title=${this.label}
+      >${(0, when_js_namespaceObject.when)(this.isAppLoaded, ()=>this.label)}</span
+    >`;
     }
     constructor(...args){
-        super(...args), this.label = 'no-label', this.active = false, this.isAppLoaded = false;
+        super(...args), this.label = 'no-label', this.active = false, this.isAppLoaded = false, this.handleClick = ()=>{
+            this.tab?.select();
+        }, this.handleKeydown = (event)=>{
+            if ('Enter' === event.key || ' ' === event.key) {
+                event.preventDefault();
+                this.tab?.select();
+                return;
+            }
+            const tablist = this.closest('[role="tablist"]');
+            if (!tablist) return;
+            const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+            const currentIndex = tabs.indexOf(this);
+            if (-1 === currentIndex) return;
+            let nextIndex = null;
+            if ('ArrowRight' === event.key) nextIndex = (currentIndex + 1) % tabs.length;
+            else if ('ArrowLeft' === event.key) nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+            else if ('Home' === event.key) nextIndex = 0;
+            else if ('End' === event.key) nextIndex = tabs.length - 1;
+            if (null !== nextIndex) {
+                event.preventDefault();
+                tabs.forEach((tab, index)=>{
+                    tab.tabIndex = index === nextIndex ? 0 : -1;
+                });
+                tabs[nextIndex].focus();
+            }
+        };
     }
 }
 AtomicIpxTab.styles = (0, external_lit_namespaceObject.css)`
     @reference '../../../utils/tailwind.global.tw.css';
 
-    .active::after {
-      @apply bg-primary absolute bottom-0 block h-1 w-full rounded;
-      content: '';
+    :host {
+      display: flex;
+      @apply cursor-pointer;
+      @apply focus-visible:outline-none;
     }
 
     [part='tab'] {
+      @apply relative mt-1 mr-6 pb-3 font-semibold;
+      @apply text-on-background;
       max-width: 150px;
       text-overflow: ellipsis;
       overflow: hidden;
     }
+
+    :host(:hover) [part='tab'],
+    :host(:focus-visible) [part='tab'] {
+      @apply text-primary;
+    }
+
+    :host([active]) [part='tab']::after {
+      @apply bg-primary absolute bottom-0 block h-1 w-full rounded;
+      content: '';
+    }
   `;
 _ts_decorate([
     (0, decorators_js_namespaceObject.property)({

package/dist/cjs/components/ipx/atomic-ipx-tabs/atomic-ipx-tabs.cjs

@@ -45,7 +45,9 @@ class AtomicIpxTabs extends (0, light_dom_cjs_namespaceObject.LightDomMixin)((0,
     initialize() {}
     render() {
         return (0, external_lit_namespaceObject.html)`<atomic-tab-bar
-      >${this.renderDefaultSlotContent()}</atomic-tab-bar
+      ><div role="tablist" style="display:flex;flex-direction:row;width:100%">
+        ${this.renderDefaultSlotContent()}
+      </div></atomic-tab-bar
     >`;
     }
 }

package/dist/cjs/components/search/atomic-search-box/atomic-search-box.cjs

@@ -229,6 +229,7 @@ class AtomicSearchBox extends external_lit_namespaceObject.LitElement {
                 if (!e.shiftKey) this.onSubmit();
                 break;
             case 'Escape':
+                this.isExpanded = false;
                 this.suggestionManager.clearSuggestions();
                 break;
             case 'ArrowDown':

package/dist/cjs/generated/dayjs-locales-data.cjs

@@ -53,11 +53,11 @@ const locales = {
     cy: ()=>import("dayjs/locale/cy"),
     da: ()=>import("dayjs/locale/da"),
     'de-AT': ()=>import("dayjs/locale/de-at"),
-    'de-CH': ()=>import("dayjs/locale/de-ch"),
     de: ()=>import("dayjs/locale/de"),
+    'de-CH': ()=>import("dayjs/locale/de-ch"),
     dv: ()=>import("dayjs/locale/dv"),
-    el: ()=>import("dayjs/locale/el"),
     'en-AU': ()=>import("dayjs/locale/en-au"),
+    el: ()=>import("dayjs/locale/el"),
     'en-CA': ()=>import("dayjs/locale/en-ca"),
     'en-GB': ()=>import("dayjs/locale/en-gb"),
     'en-IE': ()=>import("dayjs/locale/en-ie"),
@@ -83,9 +83,9 @@ const locales = {
     fr: ()=>import("dayjs/locale/fr"),
     fy: ()=>import("dayjs/locale/fy"),
     ga: ()=>import("dayjs/locale/ga"),
-    gd: ()=>import("dayjs/locale/gd"),
     gl: ()=>import("dayjs/locale/gl"),
     'gom-LATN': ()=>import("dayjs/locale/gom-latn"),
+    gd: ()=>import("dayjs/locale/gd"),
     gu: ()=>import("dayjs/locale/gu"),
     he: ()=>import("dayjs/locale/he"),
     hi: ()=>import("dayjs/locale/hi"),
@@ -150,14 +150,14 @@ const locales = {
     te: ()=>import("dayjs/locale/te"),
     tet: ()=>import("dayjs/locale/tet"),
     tg: ()=>import("dayjs/locale/tg"),
-    th: ()=>import("dayjs/locale/th"),
     tk: ()=>import("dayjs/locale/tk"),
+    th: ()=>import("dayjs/locale/th"),
     'tl-PH': ()=>import("dayjs/locale/tl-ph"),
-    tlh: ()=>import("dayjs/locale/tlh"),
     tr: ()=>import("dayjs/locale/tr"),
-    tzl: ()=>import("dayjs/locale/tzl"),
+    tlh: ()=>import("dayjs/locale/tlh"),
     'tzm-LATN': ()=>import("dayjs/locale/tzm-latn"),
     tzm: ()=>import("dayjs/locale/tzm"),
+    tzl: ()=>import("dayjs/locale/tzl"),
     'ug-CN': ()=>import("dayjs/locale/ug-cn"),
     uk: ()=>import("dayjs/locale/uk"),
     ur: ()=>import("dayjs/locale/ur"),

package/dist/cjs/global/environment.cjs

@@ -33,7 +33,7 @@ function getWindow() {
 }
 function getAtomicEnvironment(headlessVersion) {
     return {
-        version: "3.59.2",
+        version: "3.59.4",
         headlessVersion
     };
 }

package/dist/cjs/utils/hidden-state-controller.cjs

@@ -0,0 +1,63 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    HiddenStateController: ()=>HiddenStateController
+});
+const shadowSheet = new CSSStyleSheet();
+shadowSheet.replaceSync(':host(:state(empty)) { display: none }');
+const lightSheet = new CSSStyleSheet();
+lightSheet.replaceSync(':state(empty) { display: none }');
+class HiddenStateController {
+    hostConnected() {
+        const root = this.host.shadowRoot;
+        if (root) {
+            if (!root.adoptedStyleSheets.includes(shadowSheet)) root.adoptedStyleSheets.push(shadowSheet);
+        } else {
+            const parentRoot = this.host.getRootNode();
+            if (!parentRoot.adoptedStyleSheets.includes(lightSheet)) parentRoot.adoptedStyleSheets.push(lightSheet);
+        }
+    }
+    set isEmpty(value) {
+        if (value) this.internals.states.add('empty');
+        else this.internals.states.delete('empty');
+    }
+    get isEmpty() {
+        return this.internals.states.has('empty');
+    }
+    constructor(host){
+        this.host = host;
+        this.internals = host.attachInternals();
+        this.internals.states.add('empty');
+        host.addController(this);
+    }
+}
+exports.HiddenStateController = __webpack_exports__.HiddenStateController;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "HiddenStateController"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/cjs/versions.cjs

@@ -28,7 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
     headlessVersion: ()=>package_json_namespaceObject.version
 });
 const package_json_namespaceObject = require("@coveo/headless/package.json");
-const atomicVersion = "3.59.2";
+const atomicVersion = "3.59.4";
 exports.atomicVersion = __webpack_exports__.atomicVersion;
 exports.headlessVersion = __webpack_exports__.headlessVersion;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/esm/components/commerce/atomic-commerce-search-box/atomic-commerce-search-box.js

@@ -198,6 +198,7 @@ class AtomicCommerceSearchBox extends LitElement {
                 if (!e.shiftKey) this.onSubmit();
                 break;
             case 'Escape':
+                this.isExpanded = false;
                 this.suggestionManager.clearSuggestions();
                 break;
             case 'ArrowDown':

package/dist/esm/components/insight/atomic-insight-search-box/atomic-insight-search-box.js

@@ -84,6 +84,7 @@ class AtomicInsightSearchBox extends LitElement {
                 if (!e.shiftKey) this.onSubmit();
                 break;
             case 'Escape':
+                this.isExpanded = false;
                 this.suggestionManager.clearSuggestions();
                 break;
             case 'ArrowDown':

package/dist/esm/components/insight/atomic-insight-tab/atomic-insight-tab.js

@@ -2,7 +2,6 @@ import { buildTab } from "@coveo/headless/insight";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
-import { renderButton } from "../../common/button.js";
 import { createAppLoadedListener } from "../../common/interface/store.js";
 import { dispatchTabLoaded } from "../../common/tabs/tab-common.js";
 import { bindStateToController } from "../../../decorators/bind-state.js";
@@ -21,6 +20,17 @@ function _ts_metadata(k, v) {
     if ("object" == typeof Reflect && "function" == typeof Reflect.metadata) return Reflect.metadata(k, v);
 }
 class AtomicInsightTab extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('keydown', this.handleKeydown);
+        this.updateHostAttributes();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('keydown', this.handleKeydown);
+    }
     initialize() {
         this.tab = buildTab(this.bindings.engine, {
             options: {
@@ -36,34 +46,55 @@ class AtomicInsightTab extends LitElement {
         });
     }
     select() {
-        this.tab.select();
+        this.tab?.select();
     }
     updated() {
-        if (this.tabState) this.active = this.tabState.isActive;
+        if (this.tabState) {
+            this.active = this.tabState.isActive;
+            this.updateHostAttributes();
+        }
         dispatchTabLoaded(this);
     }
+    updateHostAttributes() {
+        this.setAttribute('role', 'tab');
+        this.setAttribute('aria-selected', this.active ? 'true' : 'false');
+        this.tabIndex = this.active ? 0 : -1;
+    }
     render() {
-        return html`${when(this.isAppLoaded, ()=>renderButton({
-                props: {
-                    style: 'text-transparent',
-                    part: 'tab',
-                    class: this.tabState.isActive ? 'active' : '',
-                    ariaLabel: this.bindings.i18n.t('tab-search', {
-                        label: this.label
-                    }),
-                    title: this.label,
-                    ariaPressed: this.tabState.isActive ? 'true' : 'false',
-                    onClick: ()=>{
-                        this.tab.select();
-                    }
-                }
-            })(html`${this.label}`))}`;
+        return html`<span part="tab" title=${this.label}
+      >${when(this.isAppLoaded, ()=>this.label)}</span
+    >`;
     }
     constructor(...args){
-        super(...args), this.label = 'no-label', this.active = false, this.isAppLoaded = false, this.tabId = randomID('insight-tab');
+        super(...args), this.label = 'no-label', this.active = false, this.isAppLoaded = false, this.tabId = randomID('insight-tab'), this.handleClick = ()=>{
+            this.tab?.select();
+        }, this.handleKeydown = (event)=>{
+            if ('Enter' === event.key || ' ' === event.key) {
+                event.preventDefault();
+                this.tab?.select();
+                return;
+            }
+            const tablist = this.closest('[role="tablist"]');
+            if (!tablist) return;
+            const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+            const currentIndex = tabs.indexOf(this);
+            if (-1 === currentIndex) return;
+            let nextIndex = null;
+            if ('ArrowRight' === event.key) nextIndex = (currentIndex + 1) % tabs.length;
+            else if ('ArrowLeft' === event.key) nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+            else if ('Home' === event.key) nextIndex = 0;
+            else if ('End' === event.key) nextIndex = tabs.length - 1;
+            if (null !== nextIndex) {
+                event.preventDefault();
+                tabs.forEach((tab, index)=>{
+                    tab.tabIndex = index === nextIndex ? 0 : -1;
+                });
+                tabs[nextIndex].focus();
+            }
+        };
     }
 }
-AtomicInsightTab.styles = css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-font-weight:initial}}}.active:after{background-color:var(--atomic-primary);border-radius:var(--atomic-border-radius);bottom:calc(var(--spacing,.25rem)*0);content:"";display:block;height:calc(var(--spacing,.25rem)*1);position:absolute;width:100%}[part=tab]{margin-right:calc(var(--spacing,.25rem)*6);margin-top:calc(var(--spacing,.25rem)*1);padding-bottom:calc(var(--spacing,.25rem)*3);--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);max-width:150px;overflow:hidden;position:relative;text-overflow:ellipsis}@property --tw-font-weight{syntax:"*";inherits:false}`;
+AtomicInsightTab.styles = css`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-font-weight:initial}}}:host{cursor:pointer;display:flex}:host:focus-visible{--tw-outline-style:none;outline-style:none}[part=tab]{margin-right:calc(var(--spacing,.25rem)*6);margin-top:calc(var(--spacing,.25rem)*1);padding-bottom:calc(var(--spacing,.25rem)*3);--tw-font-weight:var(--font-weight-semibold,600);color:var(--atomic-on-background);font-weight:var(--font-weight-semibold,600);max-width:150px;overflow:hidden;position:relative;text-overflow:ellipsis}:host(:focus-visible) [part=tab],:host(:hover) [part=tab]{color:var(--atomic-primary)}:host([active]) [part=tab]:after{background-color:var(--atomic-primary);border-radius:var(--atomic-border-radius);bottom:calc(var(--spacing,.25rem)*0);content:"";display:block;height:calc(var(--spacing,.25rem)*1);position:absolute;width:100%}@property --tw-font-weight{syntax:"*";inherits:false}`;
 _ts_decorate([
     property({
         type: String,

package/dist/esm/components/insight/atomic-insight-tabs/atomic-insight-tabs.js

@@ -18,7 +18,9 @@ class AtomicInsightTabs extends LightDomMixin(SlotsForNoShadowDOMMixin(LitElemen
     initialize() {}
     render() {
         return html`<atomic-tab-bar
-      >${this.renderDefaultSlotContent()}</atomic-tab-bar
+      ><div role="tablist" style="display:flex;flex-direction:row;width:100%">
+        ${this.renderDefaultSlotContent()}
+      </div></atomic-tab-bar
     >`;
     }
 }