@besaitech/ng-design-system 0.0.62 → 0.0.63

package/fesm2022/besaitech-ng-design-system.mjs

@@ -13251,10 +13251,15 @@ class SdsTabList {
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /** Id of a visible element that names the tablist (takes precedence over [ariaLabel] for AT). */
     ariaLabelledby = input('', ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : []));
-    listClass = computed(() => {
-        const base = 'relative flex border-b border-border';
-        return this.store.scrollable() ? `${base} overflow-x-auto` : base;
-    }, ...(ngDevMode ? [{ debugName: "listClass" }] : []));
+    /**
+     * Scrollable: `overflow-x: auto` turns the other axis to `auto` too (CSS), so the tabs' 1px overlap of a
+     * border-bottom rule (`-mb-px`, so the active underline covers it) made the list 1px taller than its box and
+     * showed a vertical scrollbar. There the rule is an inset shadow instead — painted under the tabs, so the active
+     * underline still covers it with no overlap — and vertical overflow is hidden.
+     */
+    listClass = computed(() => this.store.scrollable()
+        ? 'relative flex overflow-x-auto overflow-y-hidden shadow-[inset_0_-1px_0_var(--color-border)]'
+        : 'relative flex border-b border-border', ...(ngDevMode ? [{ debugName: "listClass" }] : []));
     onKeydown(event) {
         const keys = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
         if (!keys.includes(event.key))
@@ -13323,7 +13328,9 @@ class SdsTab {
         this.store.select(this.value());
     }
     tabClass() {
-        const base = 'relative -mb-px inline-flex items-center gap-2 whitespace-nowrap border-b-2 px-4 py-2.5 ' +
+        // Overlaps the list's border-bottom rule by 1px; a scrollable list draws its rule inside instead (see SdsTabList).
+        const offset = this.store.scrollable() ? '' : '-mb-px ';
+        const base = `relative ${offset}inline-flex items-center gap-2 whitespace-nowrap border-b-2 px-4 py-2.5 ` +
             'text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 ' +
             'focus-visible:ring-brand-500 focus-visible:ring-inset';
         if (this.disabled()) {