@gjsify/adwaita-web 0.18.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.18.0",
+    "version": "0.20.0",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -41,13 +41,13 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-fonts": "^0.18.0",
-        "@gjsify/adwaita-icons": "^0.18.0",
+        "@gjsify/adwaita-fonts": "^0.20.0",
+        "@gjsify/adwaita-icons": "^0.20.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.18.0",
-        "@gjsify/unit": "^0.18.0",
+        "@gjsify/cli": "^0.20.0",
+        "@gjsify/unit": "^0.20.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/scss/_tab_view.scss

@@ -17,18 +17,22 @@ adw-tab-view {
   color: var(--window-fg-color);
 
   // --- Tab bar (the AdwTabBar strip) ---
+  // Faithful port of libadwaita's `tabbar` (refs/libadwaita _tab-view.scss +
+  // _colors.scss): a headerbar-colored box with an inset bottom shade; tabs
+  // FILL their slot as rounded rects and use the currentColor alpha fills —
+  // selected 10% (hover 13%, active 19%), plain hover 7%, active 16%.
   .adw-tab-bar {
     display: flex;
-    align-items: flex-end;
+    align-items: stretch;
     flex-shrink: 0;
     box-sizing: border-box;
-    padding: 0 var(--spacing-xs);
+    padding: 0 1px 1px;
     background-color: var(--headerbar-bg-color);
     color: var(--headerbar-fg-color);
     // libadwaita's inset bottom shade under the bar.
     box-shadow: inset 0 -1px var(--headerbar-shade-color);
     overflow-x: auto;
-    scrollbar-width: thin;
+    scrollbar-width: none;
 
     &[hidden] {
       display: none;
@@ -38,65 +42,84 @@ adw-tab-view {
   .adw-tab-box {
     display: flex;
     align-items: stretch;
-    gap: var(--spacing-xs);
-    padding: var(--spacing-xs) 0;
-    min-height: 34px;
+    flex: 1 1 auto;
+    padding: 4px 0;
   }
 
-  // --- A single tab chip ---
+  // --- A single tab ---
   .adw-tab {
+    position: relative;
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: var(--spacing-xs);
     max-width: 200px;
-    min-height: 26px;
+    min-height: 30px;
     margin: 0;
-    padding: 4px var(--spacing-s);
+    padding: 0 var(--spacing-m);
     border: none;
     border-radius: var(--button-radius);
     background-color: transparent;
-    color: var(--headerbar-fg-color);
+    color: inherit;
     font-family: var(--font-family);
     font-size: var(--font-size-base);
-    font-weight: 700;
     line-height: 1;
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
-    transition:
-      background-color 150ms ease-in-out,
-      color 150ms ease-in-out,
-      box-shadow 150ms ease-in-out;
+    transition: background-color 150ms ease-in-out;
 
     &:hover {
-      background-color: var(--button-hover-color);
+      background-color: color-mix(in srgb, currentColor 7%, transparent);
     }
 
     &:active {
-      background-color: var(--button-active-color, var(--button-hover-color));
+      background-color: color-mix(in srgb, currentColor 16%, transparent);
     }
 
     &:focus-visible {
       outline: 2px solid var(--accent-color);
-      outline-offset: -1px;
+      outline-offset: -2px;
     }
 
-    // The selected tab — a raised chip on the view background, the way
-    // libadwaita lifts the active tab off the bar.
+    // The selected tab — libadwaita's currentColor alpha fill covering the
+    // whole tab slot (NOT a raised chip on the view background).
     &.active {
-      background-color: var(--view-bg-color);
-      color: var(--view-fg-color);
-      box-shadow:
-        0 1px 3px 1px rgba(0, 0, 6, 0.07),
-        0 2px 6px 2px rgba(0, 0, 6, 0.03);
+      background-color: color-mix(in srgb, currentColor 10%, transparent);
 
       &:hover {
-        background-color: var(--view-bg-color);
+        background-color: color-mix(in srgb, currentColor 13%, transparent);
+      }
+
+      &:active {
+        background-color: color-mix(in srgb, currentColor 19%, transparent);
       }
     }
   }
 
+  // Thin separators between tabs, hidden next to the selected or hovered tab
+  // (libadwaita tabbox > separator + its .hidden state).
+  .adw-tab + .adw-tab::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 3px;
+    bottom: 3px;
+    width: 1px;
+    background-color: currentColor;
+    opacity: 0.2;
+    transition: opacity 150ms ease-in-out;
+    pointer-events: none;
+  }
+
+  .adw-tab.active + .adw-tab::before,
+  .adw-tab + .adw-tab.active::before,
+  .adw-tab:hover + .adw-tab::before,
+  .adw-tab + .adw-tab:hover::before {
+    opacity: 0;
+  }
+
   .adw-tab-title {
     white-space: nowrap;
     overflow: hidden;
@@ -154,15 +177,25 @@ adw-tab-view {
     }
   }
 
-  // Single-tab bars dim the close affordance (libadwaita keeps a lone tab
+  // Adw.TabBar `expand-tabs` — tabs stretch to fill the bar evenly.
+  &[expand-tabs] .adw-tab {
+    flex: 1 1 0;
+    max-width: none;
+  }
+
+  // Web-specific escape hatch: static tab sets (e.g. documentation command
+  // tabs) render no close affordance.
+  &[no-close] .adw-tab-close {
+    display: none;
+  }
+
+  // Single-tab bars draw no tab background (libadwaita keeps a lone tab
   // non-interactive-looking).
   .adw-tab-bar.single-tab .adw-tab {
     &,
     &:hover,
     &:active {
       background: none;
-      box-shadow: none;
-      color: var(--headerbar-fg-color);
     }
   }
 

package/src/adw-tab-view.spec.ts

@@ -0,0 +1,108 @@
+// DOM-level behaviour tests for <adw-tab-view>. Runs in a real browser via the
+// @gjsify/adwaita-web browser test axis (the entry self-applies the compiled
+// stylesheet, so computed-style assertions are valid). Asserts page building,
+// selected↔click sync, notify/close events, and the expand-tabs / no-close
+// attributes.
+import { describe, expect, it } from '@gjsify/unit';
+
+import type { AdwTabView } from './elements/adw-tab-view.js';
+
+function makeTabView(attrs = ''): AdwTabView {
+    const host = document.createElement('div');
+    host.innerHTML = `<adw-tab-view ${attrs}>
+        <adw-tab-page title="One"><p>first</p></adw-tab-page>
+        <adw-tab-page title="Two"><p>second</p></adw-tab-page>
+        <adw-tab-page title="Three"><p>third</p></adw-tab-page>
+    </adw-tab-view>`;
+    document.body.appendChild(host);
+    return host.querySelector('adw-tab-view') as AdwTabView;
+}
+
+export const AdwTabViewTest = async () => {
+    await describe('adw-tab-view pages', async () => {
+        await it('builds one tab per page and shows the first page', async () => {
+            const view = makeTabView();
+            expect(view.querySelectorAll('.adw-tab').length).toBe(3);
+            expect(view.selected).toBe(0);
+            const pages = view.querySelectorAll('.adw-tab-page');
+            expect((pages[0] as HTMLElement).hidden).toBe(false);
+            expect((pages[1] as HTMLElement).hidden).toBe(true);
+            view.parentElement?.remove();
+        });
+
+        await it('clicking a tab selects its page and notifies', async () => {
+            const view = makeTabView();
+            let notified = -1;
+            view.addEventListener('notify::selected-page', (event) => {
+                notified = (event as CustomEvent).detail.selected;
+            });
+            (view.querySelectorAll('.adw-tab')[2] as HTMLButtonElement).click();
+            expect(view.selected).toBe(2);
+            expect(notified).toBe(2);
+            expect((view.querySelectorAll('.adw-tab-page')[2] as HTMLElement).hidden).toBe(false);
+            view.parentElement?.remove();
+        });
+
+        await it('setting the selected attribute switches pages', async () => {
+            const view = makeTabView();
+            view.setAttribute('selected', '1');
+            expect((view.querySelectorAll('.adw-tab-page')[1] as HTMLElement).hidden).toBe(false);
+            expect((view.querySelectorAll('.adw-tab-page')[0] as HTMLElement).hidden).toBe(true);
+            view.parentElement?.remove();
+        });
+
+        await it('emits close-page from the close affordance', async () => {
+            const view = makeTabView();
+            let closed = -1;
+            view.addEventListener('close-page', (event) => {
+                closed = (event as CustomEvent).detail.index;
+            });
+            (view.querySelectorAll('.adw-tab-close')[1] as HTMLButtonElement).click();
+            expect(closed).toBe(1);
+            // Closing must not also select the tab.
+            expect(view.selected).toBe(0);
+            view.parentElement?.remove();
+        });
+    });
+
+    await describe('adw-tab-view expand-tabs / no-close', async () => {
+        await it('no-close hides every close affordance', async () => {
+            const view = makeTabView('no-close');
+            expect(view.noClose).toBe(true);
+            for (const close of view.querySelectorAll('.adw-tab-close')) {
+                expect(getComputedStyle(close).display).toBe('none');
+            }
+            view.parentElement?.remove();
+        });
+
+        await it('expand-tabs stretches tabs evenly across the bar', async () => {
+            const view = makeTabView('expand-tabs');
+            expect(view.expandTabs).toBe(true);
+            for (const tab of view.querySelectorAll('.adw-tab')) {
+                expect(getComputedStyle(tab).flexGrow).toBe('1');
+            }
+            view.parentElement?.remove();
+        });
+
+        await it('expand-tabs draws separators, hidden next to the active tab', async () => {
+            const view = makeTabView('expand-tabs');
+            const tabs = view.querySelectorAll('.adw-tab');
+            // Tab 0 is active: the separator before tab 1 is hidden, the one
+            // before tab 2 (between two inactive tabs) is visible.
+            expect(getComputedStyle(tabs[1], '::before').opacity).toBe('0');
+            expect(getComputedStyle(tabs[2], '::before').opacity).toBe('0.2');
+            view.parentElement?.remove();
+        });
+
+        await it('properties reflect to attributes', async () => {
+            const view = makeTabView();
+            view.noClose = true;
+            view.expandTabs = true;
+            expect(view.hasAttribute('no-close')).toBe(true);
+            expect(view.hasAttribute('expand-tabs')).toBe(true);
+            view.noClose = false;
+            expect(view.hasAttribute('no-close')).toBe(false);
+            view.parentElement?.remove();
+        });
+    });
+};

package/src/elements/adw-tab-view.ts

@@ -9,6 +9,10 @@
 //   selected (zero-based index of the visible page, default 0)
 //   autohide (boolean — hide the tab bar when only one page remains, mirroring
 //     the Adw.TabBar `autohide` property)
+//   expand-tabs (boolean — tabs stretch to fill the bar evenly, mirroring the
+//     Adw.TabBar `expand-tabs` property)
+//   no-close (boolean — render no close affordance; web-specific escape hatch
+//     for static tab sets such as documentation command tabs)
 // Events:
 //   `notify::selected-page` (CustomEvent, bubbles, `detail = { selected }`) when
 //     the visible page changes — mirrors the Adw.TabView `selected-page` property.
@@ -37,7 +41,7 @@ export class AdwTabView extends HTMLElement {
     private _initialized = false;
 
     static get observedAttributes() {
-        return ['selected', 'autohide'];
+        return ['selected', 'autohide', 'expand-tabs', 'no-close'];
     }
 
     /** Zero-based index of the visible page. */
@@ -59,6 +63,26 @@ export class AdwTabView extends HTMLElement {
         else this.removeAttribute('autohide');
     }
 
+    /** Whether tabs stretch to fill the bar evenly (Adw.TabBar `expand-tabs`). */
+    get expandTabs(): boolean {
+        return this.hasAttribute('expand-tabs');
+    }
+
+    set expandTabs(value: boolean) {
+        if (value) this.setAttribute('expand-tabs', '');
+        else this.removeAttribute('expand-tabs');
+    }
+
+    /** Whether the close affordance is omitted (static tab sets). */
+    get noClose(): boolean {
+        return this.hasAttribute('no-close');
+    }
+
+    set noClose(value: boolean) {
+        if (value) this.setAttribute('no-close', '');
+        else this.removeAttribute('no-close');
+    }
+
     connectedCallback() {
         if (this._initialized) return;
         this._initialized = true;