@gjsify/adwaita-web 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.21.0",
+    "version": "0.22.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.21.0",
-        "@gjsify/adwaita-icons": "^0.21.0",
+        "@gjsify/adwaita-fonts": "^0.22.0",
+        "@gjsify/adwaita-icons": "^0.22.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.21.0",
-        "@gjsify/unit": "^0.21.0",
+        "@gjsify/cli": "^0.22.0",
+        "@gjsify/unit": "^0.22.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/scss/_reset.scss

@@ -0,0 +1,69 @@
+// _reset.scss — style-isolation boundary for embedding in arbitrary host pages.
+//
+// adwaita-web renders as LIGHT-DOM custom elements (by design: the widgets
+// compose with the page and stay overridable via the `--adw-*` / `--*` design
+// tokens). The trade-off of light DOM is that a host page's *inherited*
+// typography — `font-family`, `color`, `line-height`, `letter-spacing`, … — and
+// generic element resets can leak into the widgets.
+//
+// This partial establishes an Adwaita typographic + box-model context at EVERY
+// component boundary, so inheritance from the host stops at the widget. It sets
+// only a FLOOR: it is `@use`d before the component partials, so each component's
+// own rules override it, and consumers keep full control through the tokens and
+// ordinary higher-specificity rules (isolation without giving up overriding).
+//
+// The box battles (borders, backgrounds) are already won by the components'
+// class-scoped rules against realistic element-level host CSS; the real leak is
+// inherited typography + a host `* {}` box-sizing reset, which is what this
+// neutralises.
+
+// Every custom element adwaita-web defines. Keep in sync with
+// `src/elements/*` (the `customElements.define('adw-…')` calls).
+$adw-components:
+  adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response,
+  adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-content,
+  adw-bottom-sheet-sheet, adw-button, adw-button-content, adw-button-row,
+  adw-card, adw-carousel, adw-carousel-indicator-dots,
+  adw-carousel-indicator-lines, adw-clamp, adw-combo-row, adw-data-grid,
+  adw-dialog, adw-drop-down, adw-entry, adw-entry-row, adw-expander-row,
+  adw-header-bar, adw-inline-view-switcher, adw-menu-button, adw-navigation-page,
+  adw-navigation-split-view, adw-navigation-view, adw-overlay-split-view,
+  adw-password-entry-row, adw-preferences-dialog, adw-preferences-group,
+  adw-preferences-page, adw-sidebar, adw-sidebar-item, adw-sidebar-section,
+  adw-spinner, adw-spin-row, adw-split-button, adw-status-page, adw-switch-row,
+  adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group,
+  adw-toolbar-view, adw-view-stack, adw-view-stack-page, adw-view-switcher,
+  adw-view-switcher-bar, adw-view-switcher-page, adw-window, adw-window-title,
+  adw-wrap-box;
+
+// Roots: re-root the inherited typographic properties (and the box model) so a
+// host page's font / colour / spacing cannot flow into the widget. Every value
+// is the Adwaita default; a component that wants something else overrides it on
+// its own element (this rule is emitted first).
+#{$adw-components} {
+  box-sizing: border-box;
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  font-weight: 400;
+  font-style: normal;
+  font-variant: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-align: start;
+  text-indent: 0;
+  text-transform: none;
+  text-shadow: none;
+}
+
+// Descendants: `box-sizing` does not inherit, so a host `*, *::before {
+// box-sizing: content-box }` reset would still reach internal elements. Pin it
+// to `border-box` (adwaita's model throughout) inside every component.
+@each $c in $adw-components {
+  #{$c} *,
+  #{$c} *::before,
+  #{$c} *::after {
+    box-sizing: border-box;
+  }
+}

package/scss/_view_switcher_bar.scss

@@ -11,6 +11,16 @@
 
 adw-view-switcher-bar {
     display: block;
+
+    // `revealed` drives visibility by toggling the `hidden` attribute
+    // (_applyRevealed → this.hidden). Re-assert display:none for [hidden] as an
+    // AUTHOR rule: the UA `[hidden] { display: none }` loses to this block's own
+    // author `display: block` (cascade ORIGIN beats specificity), so without this
+    // an unrevealed bar would stay visible. Author + higher specificity → wins.
+    &[hidden] {
+        display: none;
+    }
+
     box-sizing: border-box;
     // The bottom bar over a headerbar-toned surface with a top hairline (the
     // libadwaita `actionbar` inset top border), NOT a bottom border.

package/scss/adwaita-skin.scss

@@ -10,6 +10,9 @@
 @use 'variables';
 @use 'theme';
 @use 'root';
+// Style-isolation boundary — emitted before the components so their own rules
+// override this typographic/box-model floor (see _reset.scss).
+@use 'reset';
 @use 'window';
 @use 'headerbar';
 @use 'window_title';

package/src/adw-view-switcher-bar.spec.ts

@@ -0,0 +1,31 @@
+// adw-view-switcher-bar visibility regression (browser axis). Guards that the
+// `revealed` flag actually shows/hides the bar. The bar's base scss sets
+// `display: block`, an AUTHOR rule that would defeat the UA `[hidden]{display:none}`
+// the component relies on (cascade origin beats specificity) — so an unrevealed
+// bar rendered visible until scss/_view_switcher_bar.scss re-asserted
+// `&[hidden] { display: none }`. This test pins that fix.
+import { describe, expect, it } from '@gjsify/unit';
+
+export const AdwViewSwitcherBarTest = async () => {
+    await describe('adw-view-switcher-bar revealed → visibility', async () => {
+        await it('is display:none by default (not revealed) and block once revealed', async () => {
+            const bar = document.createElement('adw-view-switcher-bar');
+            document.body.appendChild(bar);
+
+            // Default: `revealed` absent → the component sets `hidden`, and the
+            // scss `[hidden]` author rule must win over the base `display: block`.
+            expect(bar.hasAttribute('revealed')).toBe(false);
+            expect(getComputedStyle(bar).display).toBe('none');
+
+            // Reveal it → shown.
+            bar.setAttribute('revealed', '');
+            expect(getComputedStyle(bar).display).toBe('block');
+
+            // Hide it again → back to none (the round-trip, not a one-way latch).
+            bar.removeAttribute('revealed');
+            expect(getComputedStyle(bar).display).toBe('none');
+
+            bar.remove();
+        });
+    });
+};

package/src/style-isolation.spec.ts

@@ -0,0 +1,36 @@
+// Style-isolation regression test (browser axis). Guards the boundary reset
+// (scss/_reset.scss, ADR 0010): a host page's inherited typography must not leak
+// into an adwaita-web widget. It also guards that the widget's tag is listed in
+// the reset's `$adw-components` — if it weren't, the reset wouldn't apply and
+// these assertions would fail.
+import { describe, expect, it } from '@gjsify/unit';
+
+export const AdwStyleIsolationTest = async () => {
+    await describe('style isolation (boundary reset)', async () => {
+        await it('re-roots typography so a host font does not inherit into a widget', async () => {
+            // A container styled like a hostile host theme.
+            const host = document.createElement('div');
+            host.style.fontFamily = 'Georgia, "Times New Roman", serif';
+            host.style.color = 'rgb(255, 0, 255)';
+            host.style.lineHeight = '2.4';
+            host.style.letterSpacing = '3px';
+            host.style.textTransform = 'uppercase';
+            document.body.appendChild(host);
+
+            const row = document.createElement('adw-switch-row');
+            row.setAttribute('title', 'Wi-Fi');
+            host.appendChild(row);
+
+            const cs = getComputedStyle(row);
+            // The boundary reset re-roots the inherited typography to Adwaita's,
+            // so the host's serif / magenta / spacing / casing do not leak in.
+            expect(cs.fontFamily.includes('Adwaita Sans')).toBe(true);
+            expect(cs.fontFamily.includes('Georgia')).toBe(false);
+            expect(cs.letterSpacing).toBe('normal');
+            expect(cs.textTransform).toBe('none');
+            expect(cs.color === 'rgb(255, 0, 255)').toBe(false);
+
+            host.remove();
+        });
+    });
+};