@gjsify/adwaita-web 0.1.3

package/lib/types/adwaita-css.d.ts

@@ -0,0 +1 @@
+export declare const adwaitaCSS: string;

package/lib/types/elements/adw-combo-row.d.ts

@@ -0,0 +1,11 @@
+export declare class AdwComboRow extends HTMLElement {
+    private _select;
+    private _valueEl;
+    private _items;
+    private _initialized;
+    static get observedAttributes(): string[];
+    get selected(): number;
+    set selected(value: number);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+}

package/lib/types/elements/adw-header-bar.d.ts

@@ -0,0 +1,10 @@
+export declare class AdwHeaderBar extends HTMLElement {
+    private _initialized;
+    private _startEl;
+    private _endEl;
+    /** The start (left) section container — append buttons/widgets here. */
+    get startSection(): HTMLDivElement | null;
+    /** The end (right) section container — append buttons/widgets here. */
+    get endSection(): HTMLDivElement | null;
+    connectedCallback(): void;
+}

package/lib/types/elements/adw-overlay-split-view.d.ts

@@ -0,0 +1,21 @@
+export declare class AdwOverlaySplitView extends HTMLElement {
+    private _initialized;
+    private _sidebarEl;
+    private _contentEl;
+    private _backdropEl;
+    static get observedAttributes(): string[];
+    get showSidebar(): boolean;
+    set showSidebar(v: boolean);
+    get collapsed(): boolean;
+    set collapsed(v: boolean);
+    get minSidebarWidth(): number;
+    get maxSidebarWidth(): number;
+    get sidebarWidthFraction(): number;
+    connectedCallback(): void;
+    attributeChangedCallback(_name: string, _old: string | null, _val: string | null): void;
+    openSidebar(): void;
+    hideSidebar(): void;
+    toggleSidebar(): void;
+    private _syncClasses;
+    private _syncSidebarWidth;
+}

package/lib/types/elements/adw-preferences-group.d.ts

@@ -0,0 +1,4 @@
+export declare class AdwPreferencesGroup extends HTMLElement {
+    private _initialized;
+    connectedCallback(): void;
+}

package/lib/types/elements/adw-spin-row.d.ts

@@ -0,0 +1,17 @@
+export declare class AdwSpinRow extends HTMLElement {
+    private _input;
+    private _min;
+    private _max;
+    private _step;
+    private _value;
+    private _initialized;
+    static get observedAttributes(): string[];
+    get value(): number;
+    set value(v: number);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _adjust;
+    private _emitChange;
+    private _countDecimals;
+    private _formatValue;
+}

package/lib/types/elements/adw-switch-row.d.ts

@@ -0,0 +1,9 @@
+export declare class AdwSwitchRow extends HTMLElement {
+    private _checkbox;
+    private _initialized;
+    static get observedAttributes(): string[];
+    get active(): boolean;
+    set active(value: boolean);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+}

package/lib/types/elements/adw-toast-overlay.d.ts

@@ -0,0 +1,8 @@
+export declare class AdwToastOverlay extends HTMLElement {
+    /**
+     * Show a toast notification.
+     * @param title - The text to display.
+     * @param timeout - Time in ms before the toast auto-dismisses (default 2000).
+     */
+    addToast(title: string, timeout?: number): void;
+}

package/lib/types/elements/adw-window.d.ts

@@ -0,0 +1,3 @@
+export declare class AdwWindow extends HTMLElement {
+    connectedCallback(): void;
+}

package/lib/types/index.d.ts

@@ -0,0 +1,9 @@
+import '@gjsify/adwaita-fonts';
+export { AdwWindow } from './elements/adw-window.js';
+export { AdwHeaderBar } from './elements/adw-header-bar.js';
+export { AdwPreferencesGroup } from './elements/adw-preferences-group.js';
+export { AdwSwitchRow } from './elements/adw-switch-row.js';
+export { AdwComboRow } from './elements/adw-combo-row.js';
+export { AdwSpinRow } from './elements/adw-spin-row.js';
+export { AdwToastOverlay } from './elements/adw-toast-overlay.js';
+export { AdwOverlaySplitView } from './elements/adw-overlay-split-view.js';

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@gjsify/adwaita-web",
+  "version": "0.1.3",
+  "description": "Adwaita/Libadwaita web components for browser targets",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "clear": "rm -rf lib tsconfig.tsbuildinfo || exit 0",
+    "check": "tsc --noEmit",
+    "build": "yarn build:gjsify && yarn build:types",
+    "build:gjsify": "gjsify build --library 'src/**/*.ts' --exclude 'src/**/*.spec.ts'",
+    "build:types": "tsc"
+  },
+  "dependencies": {
+    "@gjsify/adwaita-fonts": "^0.1.3",
+    "@gjsify/adwaita-icons": "^0.1.3"
+  },
+  "devDependencies": {
+    "@gjsify/cli": "^0.1.3",
+    "typescript": "^6.0.2"
+  }
+}

package/src/adwaita-css.ts

@@ -0,0 +1,592 @@
+// Adwaita CSS subset for browser targets.
+// Colors from refs/libadwaita/src/stylesheet/_colors.scss (canonical).
+// Component styles adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
+// Copyright (c) GNOME contributors (libadwaita), LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Extracted as CSS-in-JS for @gjsify/adwaita-web.
+
+import { editPasteSymbolic, goDownSymbolic, sidebarShowSymbolic } from '@gjsify/adwaita-icons/actions';
+import { toDataUri } from '@gjsify/adwaita-icons/utils';
+
+const goDownDataUri = toDataUri(goDownSymbolic);
+const editPasteDataUri = toDataUri(editPasteSymbolic);
+const sidebarShowDataUri = toDataUri(sidebarShowSymbolic);
+
+export const adwaitaCSS = `
+/* ═══════════════════════════════════════════════════════════════
+   Adwaita CSS Custom Properties — Light Theme (default)
+   ═══════════════════════════════════════════════════════════════ */
+:root {
+  /* Icons (Adwaita symbolic, encoded as data-URIs) */
+  --icon-edit-paste: ${editPasteDataUri};
+  --icon-go-down: ${goDownDataUri};
+  --icon-sidebar-show: ${sidebarShowDataUri};
+
+  /* Window */
+  --window-bg-color: #fafafb;
+  --window-fg-color: rgba(0, 0, 6, 0.8);
+
+  /* Views */
+  --view-bg-color: #ffffff;
+  --view-fg-color: rgba(0, 0, 6, 0.8);
+
+  /* Header bar */
+  --headerbar-bg-color: #ffffff;
+  --headerbar-fg-color: rgba(0, 0, 6, 0.8);
+  --headerbar-shade-color: rgba(0, 0, 6, 0.12);
+
+  /* Sidebar */
+  --sidebar-bg-color: #ebebed;
+
+  /* Cards / boxed lists */
+  --card-bg-color: #ffffff;
+  --card-fg-color: rgba(0, 0, 6, 0.8);
+  --card-shade-color: rgba(0, 0, 6, 0.07);
+
+  /* Accent */
+  --accent-bg-color: #3584e4;
+  --accent-fg-color: #ffffff;
+  --accent-color: #1c71d8;
+
+  /* Switch */
+  --switch-off-bg: rgba(0, 0, 0, 0.2);
+  --switch-knob-bg: #ffffff;
+
+  /* Layout */
+  --window-radius: 15px;
+  --card-radius: 12px;
+  --button-radius: 9px;
+
+  /* Spacing */
+  --spacing-xs: 6px;
+  --spacing-s: 9px;
+  --spacing-m: 12px;
+  --spacing-l: 18px;
+  --spacing-xl: 24px;
+
+  /* Typography — GNOME default: Adwaita Sans 11 */
+  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;
+  --font-size-base: 11pt;
+  --font-size-small: 9pt;
+  --font-size-heading: 12pt;
+  --dim-opacity: 0.55;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   Dark Theme — auto via prefers-color-scheme
+   ═══════════════════════════════════════════════════════════════ */
+@media (prefers-color-scheme: dark) {
+  :root:not(.theme-light) {
+    --window-bg-color: #222226;
+    --window-fg-color: #ffffff;
+    --view-bg-color: #1d1d20;
+    --view-fg-color: #ffffff;
+    --headerbar-bg-color: #2e2e32;
+    --headerbar-fg-color: #ffffff;
+    --headerbar-shade-color: rgba(0, 0, 6, 0.36);
+    --sidebar-bg-color: #2e2e32;
+    --card-bg-color: rgba(255, 255, 255, 0.08);
+    --card-fg-color: #ffffff;
+    --card-shade-color: rgba(0, 0, 6, 0.36);
+    --accent-color: #78aeed;
+    --switch-off-bg: rgba(255, 255, 255, 0.2);
+    --switch-knob-bg: #deddda;
+  }
+}
+
+/* Dark theme manual override */
+:root.theme-dark {
+  --window-bg-color: #222226;
+  --window-fg-color: #ffffff;
+  --view-bg-color: #1d1d20;
+  --view-fg-color: #ffffff;
+  --headerbar-bg-color: #2e2e32;
+  --headerbar-fg-color: #ffffff;
+  --headerbar-shade-color: rgba(0, 0, 6, 0.36);
+  --sidebar-bg-color: #2e2e32;
+  --card-bg-color: rgba(255, 255, 255, 0.08);
+  --card-fg-color: #ffffff;
+  --card-shade-color: rgba(0, 0, 6, 0.36);
+  --accent-color: #78aeed;
+  --switch-off-bg: rgba(255, 255, 255, 0.2);
+  --switch-knob-bg: #deddda;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   Component Styles
+   ═══════════════════════════════════════════════════════════════ */
+
+/* --- adw-window --- */
+adw-window {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  border-radius: var(--window-radius);
+  box-shadow:
+    0 0 14px 5px rgb(0 0 0 / 15%),
+    0 0 5px 2px rgb(0 0 0 / 10%),
+    0 0 0 1px rgb(0 0 0 / 5%);
+  overflow: hidden;
+  outline: 1px solid rgb(255 255 255 / 7%);
+  outline-offset: -1px;
+}
+
+/* --- adw-header-bar --- */
+adw-header-bar {
+  display: flex;
+  align-items: center;
+  min-height: 47px;
+  padding: 0 6px;
+  background-color: var(--headerbar-bg-color);
+  color: var(--headerbar-fg-color);
+  box-shadow: inset 0 -1px var(--headerbar-shade-color);
+  flex-shrink: 0;
+}
+
+adw-header-bar .adw-header-bar-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+adw-header-bar .adw-header-bar-title {
+  font-weight: bold;
+  font-size: var(--font-size-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+adw-header-bar .adw-header-bar-start {
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  gap: 4px;
+}
+
+adw-header-bar .adw-header-bar-end {
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  gap: 4px;
+}
+
+adw-header-bar .adw-header-btn {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: var(--button-radius);
+  background: transparent;
+  color: var(--headerbar-fg-color);
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+adw-header-bar .adw-header-btn:hover {
+  background: rgba(128, 128, 128, 0.12);
+}
+
+adw-header-bar .adw-header-btn:active {
+  background: rgba(128, 128, 128, 0.22);
+}
+
+/* --- adw-preferences-group --- */
+adw-preferences-group {
+  display: block;
+}
+
+adw-preferences-group .adw-preferences-group-header {
+  padding: var(--spacing-xs) 2px;
+}
+
+adw-preferences-group .adw-preferences-group-title {
+  font-size: var(--font-size-small);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: var(--dim-opacity);
+  margin: 0;
+  color: var(--window-fg-color);
+}
+
+adw-preferences-group .adw-preferences-group-listbox {
+  background-color: var(--card-bg-color);
+  color: var(--card-fg-color);
+  border-radius: var(--card-radius);
+  box-shadow:
+    0 0 0 1px rgb(0 0 6 / 3%),
+    0 1px 3px 1px rgb(0 0 6 / 7%),
+    0 2px 6px 2px rgb(0 0 6 / 3%);
+  overflow: hidden;
+}
+
+/* --- Row base (shared by switch-row, combo-row) --- */
+adw-switch-row,
+adw-combo-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 50px;
+  padding: var(--spacing-s) var(--spacing-m);
+  gap: var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+}
+
+adw-switch-row:last-child,
+adw-combo-row:last-child {
+  border-bottom: none;
+}
+
+/* --- adw-switch-row --- */
+adw-switch-row .adw-row-title {
+  flex: 1;
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+}
+
+adw-switch-row .adw-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+adw-switch-row .adw-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+adw-switch-row .adw-switch-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: var(--switch-off-bg);
+  border-radius: 12px;
+  transition: background-color 0.15s ease-out;
+}
+
+adw-switch-row .adw-switch-slider::before {
+  content: "";
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  left: 2px;
+  bottom: 2px;
+  background-color: var(--switch-knob-bg);
+  border-radius: 50%;
+  transition: transform 0.15s ease-out;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
+}
+
+adw-switch-row .adw-switch input:checked + .adw-switch-slider {
+  background-color: var(--accent-bg-color);
+}
+
+adw-switch-row .adw-switch input:checked + .adw-switch-slider::before {
+  transform: translateX(20px);
+}
+
+adw-switch-row .adw-switch input:focus-visible + .adw-switch-slider {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+
+/* --- adw-combo-row --- */
+adw-combo-row {
+  position: relative;
+  cursor: pointer;
+}
+
+adw-combo-row .adw-row-title {
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+  pointer-events: none;
+}
+
+adw-combo-row select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 6px 24px 6px 8px;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+  cursor: pointer;
+  text-align: right;
+  background-image: ${goDownDataUri};
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  background-size: 12px 12px;
+  /* Stretch select over the entire row to make it clickable anywhere */
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+adw-combo-row .adw-row-value {
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+  opacity: var(--dim-opacity);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+adw-combo-row .adw-row-value::after {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background-image: ${goDownDataUri};
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+adw-combo-row select:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -1px;
+}
+
+adw-combo-row select option {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+}
+
+/* --- Utility: separator --- */
+.adw-separator-vertical {
+  width: 1px;
+  align-self: stretch;
+  background-color: var(--card-shade-color);
+  flex-shrink: 0;
+}
+
+/* --- adw-spin-row --- */
+adw-spin-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 50px;
+  padding: var(--spacing-s) var(--spacing-m);
+  gap: var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+}
+
+adw-spin-row:last-child {
+  border-bottom: none;
+}
+
+adw-spin-row .adw-row-title {
+  flex: 1;
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+}
+
+.adw-spin-control {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.adw-spin-control button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--button-radius);
+  background: transparent;
+  color: var(--card-fg-color);
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.adw-spin-control button:hover {
+  background: rgba(128, 128, 128, 0.15);
+}
+
+.adw-spin-control input {
+  width: 56px;
+  text-align: center;
+  border: none;
+  border-radius: var(--button-radius);
+  background: rgba(128, 128, 128, 0.1);
+  color: var(--card-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  padding: 4px 2px;
+}
+
+.adw-spin-control input:focus {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -1px;
+}
+
+/* --- adw-toast-overlay ---
+   Reference: refs/adwaita-web/adwaita-web/scss/_toast_overlay.scss */
+adw-toast-overlay {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 9px;
+  align-items: center;
+  pointer-events: none;
+}
+
+/* --- adw-toast ---
+   Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss */
+.adw-toast {
+  background-color: #3d3846;
+  color: #ffffff;
+  padding: 9px 12px;
+  border-radius: var(--card-radius);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: max-content;
+  max-width: 400px;
+  min-height: 36px;
+  pointer-events: auto;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+
+  opacity: 0;
+  transform: translateY(100%) scale(0.9);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
+              transform 0.2s cubic-bezier(0, 0, 0.2, 1);
+  will-change: transform, opacity;
+}
+
+.adw-toast.visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.adw-toast.hiding {
+  opacity: 0;
+  transform: translateY(100%) scale(0.9);
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+.adw-toast .adw-toast-title {
+  font-weight: normal;
+  line-height: 1.3;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   adw-overlay-split-view
+   Reference: Adw.OverlaySplitView from libadwaita
+   ═══════════════════════════════════════════════════════════════ */
+adw-overlay-split-view {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+adw-overlay-split-view .adw-osv-sidebar {
+  background-color: var(--sidebar-bg-color);
+  overflow-y: auto;
+  flex-shrink: 0;
+  transition: transform 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
+  z-index: 10;
+  align-self: stretch;
+}
+
+adw-overlay-split-view .adw-osv-content {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+}
+
+/* Docked mode (not collapsed) — sidebar beside content */
+adw-overlay-split-view:not(.collapsed) .adw-osv-sidebar {
+  position: relative;
+}
+
+/* Docked hide: slide left and collapse space via negative margin.
+   Sidebar keeps its intrinsic width so internal elements don't reflow. */
+adw-overlay-split-view:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
+  transform: translateX(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Overlay mode (collapsed) — sidebar on top of content */
+adw-overlay-split-view.collapsed .adw-osv-sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+adw-overlay-split-view.collapsed.sidebar-end .adw-osv-sidebar {
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
+}
+
+adw-overlay-split-view.collapsed.show-sidebar .adw-osv-sidebar {
+  transform: translateX(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Backdrop — visible only in overlay mode when sidebar is open */
+adw-overlay-split-view .adw-osv-backdrop {
+  display: none;
+}
+
+adw-overlay-split-view.collapsed.show-sidebar .adw-osv-backdrop {
+  display: block;
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 9;
+}
+
+/* Sidebar toggle button — sidebar-show-symbolic icon via CSS mask */
+.adw-sidebar-toggle-icon::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: currentColor;
+  -webkit-mask-image: var(--icon-sidebar-show);
+  mask-image: var(--icon-sidebar-show);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 16px 16px;
+  mask-size: 16px 16px;
+  -webkit-mask-position: center;
+  mask-position: center;
+  pointer-events: none;
+}
+`;

package/src/elements/adw-combo-row.ts

@@ -0,0 +1,81 @@
+// <adw-combo-row> — Row with a label and dropdown select.
+// Attributes: title, items (JSON string[]), selected (index number)
+// Events: notify::selected (CustomEvent, mirrors GJS GObject signal naming)
+// The native <select> is stretched invisibly over the row so clicking anywhere opens it.
+// Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
+// Copyright (c) 2025 csm. MIT License.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web.
+
+export class AdwComboRow extends HTMLElement {
+    private _select!: HTMLSelectElement;
+    private _valueEl!: HTMLSpanElement;
+    private _items: string[] = [];
+    private _initialized = false;
+
+    static get observedAttributes() { return ['selected']; }
+
+    get selected(): number {
+        return this._select ? this._select.selectedIndex : parseInt(this.getAttribute('selected') || '0', 10);
+    }
+
+    set selected(value: number) {
+        this.setAttribute('selected', String(value));
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        const title = this.getAttribute('title') || '';
+        this._items = JSON.parse(this.getAttribute('items') || '[]');
+        const selectedIdx = parseInt(this.getAttribute('selected') || '0', 10);
+
+        // Title label
+        const titleEl = document.createElement('span');
+        titleEl.className = 'adw-row-title';
+        titleEl.textContent = title;
+
+        // Visible selected value display
+        const valueEl = document.createElement('span');
+        valueEl.className = 'adw-row-value';
+        valueEl.textContent = this._items[selectedIdx] ?? '';
+        this._valueEl = valueEl;
+
+        // Hidden select overlaying the entire row
+        const select = document.createElement('select');
+        this._items.forEach((item, i) => {
+            const option = document.createElement('option');
+            option.value = String(i);
+            option.textContent = item;
+            if (i === selectedIdx) option.selected = true;
+            select.appendChild(option);
+        });
+
+        this.appendChild(titleEl);
+        this.appendChild(valueEl);
+        this.appendChild(select);
+
+        this._select = select;
+        this._select.addEventListener('change', () => {
+            const idx = this._select.selectedIndex;
+            this._valueEl.textContent = this._items[idx] ?? '';
+            this.setAttribute('selected', String(idx));
+            this.dispatchEvent(new CustomEvent('notify::selected', {
+                bubbles: true,
+                detail: { selected: idx },
+            }));
+        });
+    }
+
+    attributeChangedCallback(name: string, _old: string | null, value: string | null) {
+        if (name === 'selected' && this._select) {
+            const idx = parseInt(value || '0', 10);
+            this._select.selectedIndex = idx;
+            if (this._valueEl) {
+                this._valueEl.textContent = this._items[idx] ?? '';
+            }
+        }
+    }
+}
+
+customElements.define('adw-combo-row', AdwComboRow);

package/src/elements/adw-header-bar.ts

@@ -0,0 +1,50 @@
+// <adw-header-bar> — Adwaita header bar with centered title and start/end button slots.
+// Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
+// Copyright (c) 2025 csm. MIT License.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web.
+
+export class AdwHeaderBar extends HTMLElement {
+    private _initialized = false;
+    private _startEl: HTMLDivElement | null = null;
+    private _endEl: HTMLDivElement | null = null;
+
+    /** The start (left) section container — append buttons/widgets here. */
+    get startSection(): HTMLDivElement | null { return this._startEl; }
+
+    /** The end (right) section container — append buttons/widgets here. */
+    get endSection(): HTMLDivElement | null { return this._endEl; }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        const title = this.getAttribute('title') || '';
+
+        // Capture any pre-existing slotted children before clearing
+        const startChildren = Array.from(this.querySelectorAll(':scope > [slot="start"]'));
+        const endChildren = Array.from(this.querySelectorAll(':scope > [slot="end"]'));
+
+        // Start section
+        this._startEl = document.createElement('div');
+        this._startEl.className = 'adw-header-bar-start';
+        for (const child of startChildren) this._startEl.appendChild(child);
+
+        // Center section with title
+        const center = document.createElement('div');
+        center.className = 'adw-header-bar-center';
+        const titleEl = document.createElement('span');
+        titleEl.className = 'adw-header-bar-title';
+        titleEl.textContent = title;
+        center.appendChild(titleEl);
+
+        // End section
+        this._endEl = document.createElement('div');
+        this._endEl.className = 'adw-header-bar-end';
+        for (const child of endChildren) this._endEl.appendChild(child);
+
+        // Replace all children atomically
+        this.replaceChildren(this._startEl, center, this._endEl);
+    }
+}
+
+customElements.define('adw-header-bar', AdwHeaderBar);

package/src/elements/adw-overlay-split-view.ts

@@ -0,0 +1,135 @@
+// <adw-overlay-split-view> — Responsive sidebar that docks or overlays content.
+// Reference: Adw.OverlaySplitView from libadwaita.
+// Docs: refs/adwaita-web/adwaita-web/docs/widgets/overlaysplitview.md
+
+export class AdwOverlaySplitView extends HTMLElement {
+    private _initialized = false;
+    private _sidebarEl!: HTMLDivElement;
+    private _contentEl!: HTMLDivElement;
+    private _backdropEl!: HTMLDivElement;
+
+    static get observedAttributes() {
+        return ['show-sidebar', 'collapsed', 'sidebar-position', 'min-sidebar-width', 'max-sidebar-width', 'sidebar-width-fraction'];
+    }
+
+    get showSidebar(): boolean {
+        return this.hasAttribute('show-sidebar');
+    }
+
+    set showSidebar(v: boolean) {
+        if (v) this.setAttribute('show-sidebar', '');
+        else this.removeAttribute('show-sidebar');
+    }
+
+    get collapsed(): boolean {
+        return this.hasAttribute('collapsed');
+    }
+
+    set collapsed(v: boolean) {
+        if (v) this.setAttribute('collapsed', '');
+        else this.removeAttribute('collapsed');
+    }
+
+    get minSidebarWidth(): number {
+        return parseFloat(this.getAttribute('min-sidebar-width') || '280');
+    }
+
+    get maxSidebarWidth(): number {
+        return parseFloat(this.getAttribute('max-sidebar-width') || '400');
+    }
+
+    get sidebarWidthFraction(): number {
+        return parseFloat(this.getAttribute('sidebar-width-fraction') || '0.30');
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        // Capture slotted children before rebuilding DOM
+        const sidebarChildren = Array.from(this.querySelectorAll('[slot="sidebar"]'));
+        const contentChildren = Array.from(this.querySelectorAll('[slot="content"]'));
+        // Any remaining unslotted children go to content
+        const unslotted = Array.from(this.childNodes).filter(
+            n => !sidebarChildren.includes(n as Element) && !contentChildren.includes(n as Element),
+        );
+
+        // Clear children safely
+        this.replaceChildren();
+
+        // Sidebar container
+        this._sidebarEl = document.createElement('div');
+        this._sidebarEl.className = 'adw-osv-sidebar';
+        sidebarChildren.forEach(c => this._sidebarEl.appendChild(c));
+
+        // Content container
+        this._contentEl = document.createElement('div');
+        this._contentEl.className = 'adw-osv-content';
+        contentChildren.forEach(c => this._contentEl.appendChild(c));
+        unslotted.forEach(c => this._contentEl.appendChild(c));
+
+        // Backdrop for overlay dismiss
+        this._backdropEl = document.createElement('div');
+        this._backdropEl.className = 'adw-osv-backdrop';
+        this._backdropEl.addEventListener('click', () => this.hideSidebar());
+
+        this.append(this._sidebarEl, this._contentEl, this._backdropEl);
+
+        // Apply initial state
+        this._syncClasses();
+        this._syncSidebarWidth();
+    }
+
+    attributeChangedCallback(_name: string, _old: string | null, _val: string | null) {
+        if (!this._initialized) return;
+        this._syncClasses();
+        if (_name === 'min-sidebar-width' || _name === 'max-sidebar-width' || _name === 'sidebar-width-fraction') {
+            this._syncSidebarWidth();
+        }
+    }
+
+    openSidebar() {
+        this.showSidebar = true;
+        this.dispatchEvent(new CustomEvent('sidebar-toggled', { detail: { isVisible: true } }));
+    }
+
+    hideSidebar() {
+        this.showSidebar = false;
+        this.dispatchEvent(new CustomEvent('sidebar-toggled', { detail: { isVisible: false } }));
+    }
+
+    toggleSidebar() {
+        this.showSidebar = !this.showSidebar;
+        this.dispatchEvent(new CustomEvent('sidebar-toggled', {
+            detail: { isVisible: this.showSidebar },
+        }));
+    }
+
+    private _syncClasses() {
+        this.classList.toggle('collapsed', this.collapsed);
+        this.classList.toggle('show-sidebar', this.showSidebar);
+        const pos = this.getAttribute('sidebar-position') || 'start';
+        this.classList.toggle('sidebar-start', pos === 'start');
+        this.classList.toggle('sidebar-end', pos === 'end');
+
+        // In docked mode, use negative margin to collapse sidebar space
+        // while keeping the sidebar's intrinsic width (slide animation).
+        if (this._sidebarEl && !this.collapsed) {
+            if (!this.showSidebar) {
+                const w = this._sidebarEl.offsetWidth;
+                this._sidebarEl.style.marginRight = `-${w}px`;
+            } else {
+                this._sidebarEl.style.marginRight = '';
+            }
+        }
+    }
+
+    private _syncSidebarWidth() {
+        if (!this._sidebarEl) return;
+        this._sidebarEl.style.minWidth = `${this.minSidebarWidth}px`;
+        this._sidebarEl.style.maxWidth = `${this.maxSidebarWidth}px`;
+        this._sidebarEl.style.width = `${this.sidebarWidthFraction * 100}%`;
+    }
+}
+
+customElements.define('adw-overlay-split-view', AdwOverlaySplitView);

package/src/elements/adw-preferences-group.ts

@@ -0,0 +1,34 @@
+// <adw-preferences-group> — Groups child rows in a boxed list with a title label.
+// Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
+// Copyright (c) 2025 csm. MIT License.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web.
+
+export class AdwPreferencesGroup extends HTMLElement {
+    private _initialized = false;
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        const title = this.getAttribute('title') || '';
+        const children = Array.from(this.childNodes);
+
+        // Build header with title
+        const header = document.createElement('div');
+        header.className = 'adw-preferences-group-header';
+        const titleEl = document.createElement('span');
+        titleEl.className = 'adw-preferences-group-title';
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+
+        // Build boxed list container and move children into it
+        const listbox = document.createElement('div');
+        listbox.className = 'adw-preferences-group-listbox';
+        children.forEach(child => listbox.appendChild(child));
+
+        this.appendChild(header);
+        this.appendChild(listbox);
+    }
+}
+
+customElements.define('adw-preferences-group', AdwPreferencesGroup);

package/src/elements/adw-spin-row.ts

@@ -0,0 +1,123 @@
+// <adw-spin-row> — Row with a label and numeric spin control (+/− buttons).
+// Attributes: title, min, max, step, value
+// Events: notify::value (CustomEvent, mirrors GJS GObject signal naming)
+// Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
+// Copyright (c) 2025 csm. MIT License.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web.
+
+export class AdwSpinRow extends HTMLElement {
+    private _input!: HTMLInputElement;
+    private _min = 0;
+    private _max = 100;
+    private _step = 1;
+    private _value = 0;
+    private _initialized = false;
+
+    static get observedAttributes() { return ['value', 'min', 'max', 'step']; }
+
+    get value(): number {
+        return this._value;
+    }
+
+    set value(v: number) {
+        const clamped = Math.min(this._max, Math.max(this._min, v));
+        // Round to step precision to avoid floating-point drift
+        const decimals = this._countDecimals(this._step);
+        this._value = parseFloat(clamped.toFixed(decimals));
+        if (this._input) {
+            this._input.value = this._formatValue(this._value);
+        }
+        this.setAttribute('value', String(this._value));
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        const title = this.getAttribute('title') || '';
+        this._min = parseFloat(this.getAttribute('min') || '0');
+        this._max = parseFloat(this.getAttribute('max') || '100');
+        this._step = parseFloat(this.getAttribute('step') || '1');
+        this._value = parseFloat(this.getAttribute('value') || String(this._min));
+
+        // Title
+        const titleEl = document.createElement('span');
+        titleEl.className = 'adw-row-title';
+        titleEl.textContent = title;
+
+        // Spin control container
+        const control = document.createElement('div');
+        control.className = 'adw-spin-control';
+
+        // Decrement button
+        const decBtn = document.createElement('button');
+        decBtn.className = 'adw-spin-dec';
+        decBtn.textContent = '−';
+        decBtn.addEventListener('click', () => this._adjust(-this._step));
+
+        // Value input
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.value = this._formatValue(this._value);
+        input.addEventListener('change', () => {
+            const parsed = parseFloat(input.value);
+            if (!isNaN(parsed)) {
+                this.value = parsed;
+                this._emitChange();
+            } else {
+                input.value = this._formatValue(this._value);
+            }
+        });
+
+        // Increment button
+        const incBtn = document.createElement('button');
+        incBtn.className = 'adw-spin-inc';
+        incBtn.textContent = '+';
+        incBtn.addEventListener('click', () => this._adjust(this._step));
+
+        control.append(decBtn, input, incBtn);
+        this.append(titleEl, control);
+        this._input = input;
+    }
+
+    attributeChangedCallback(name: string, _old: string | null, val: string | null) {
+        if (!this._initialized) return;
+        const num = parseFloat(val || '0');
+        switch (name) {
+            case 'value':
+                if (num !== this._value) {
+                    this._value = Math.min(this._max, Math.max(this._min, num));
+                    this._input.value = this._formatValue(this._value);
+                }
+                break;
+            case 'min': this._min = num; break;
+            case 'max': this._max = num; break;
+            case 'step': this._step = num; break;
+        }
+    }
+
+    private _adjust(delta: number) {
+        this.value = this._value + delta;
+        this._emitChange();
+    }
+
+    private _emitChange() {
+        this.dispatchEvent(new CustomEvent('notify::value', {
+            bubbles: true,
+            detail: { value: this._value },
+        }));
+    }
+
+    private _countDecimals(n: number): number {
+        const s = String(n);
+        const dot = s.indexOf('.');
+        return dot === -1 ? 0 : s.length - dot - 1;
+    }
+
+    private _formatValue(v: number): string {
+        const decimals = this._countDecimals(this._step);
+        return decimals > 0 ? v.toFixed(decimals) : String(v);
+    }
+}
+
+customElements.define('adw-spin-row', AdwSpinRow);

package/src/elements/adw-switch-row.ts

@@ -0,0 +1,69 @@
+// <adw-switch-row> — Row with a label and toggle switch.
+// Attributes: title, active (boolean)
+// Events: notify::active (CustomEvent, mirrors GJS GObject signal naming)
+// Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
+// Copyright (c) 2025 csm. MIT License.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web.
+
+export class AdwSwitchRow extends HTMLElement {
+    private _checkbox!: HTMLInputElement;
+    private _initialized = false;
+
+    static get observedAttributes() { return ['active']; }
+
+    get active(): boolean {
+        return this.hasAttribute('active');
+    }
+
+    set active(value: boolean) {
+        if (value) this.setAttribute('active', '');
+        else this.removeAttribute('active');
+    }
+
+    connectedCallback() {
+        if (this._initialized) return;
+        this._initialized = true;
+
+        const title = this.getAttribute('title') || '';
+        const checked = this.hasAttribute('active');
+
+        // Title
+        const titleEl = document.createElement('span');
+        titleEl.className = 'adw-row-title';
+        titleEl.textContent = title;
+
+        // Switch label with hidden checkbox + slider
+        const label = document.createElement('label');
+        label.className = 'adw-switch';
+
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.checked = checked;
+
+        const slider = document.createElement('span');
+        slider.className = 'adw-switch-slider';
+
+        label.appendChild(input);
+        label.appendChild(slider);
+
+        this.appendChild(titleEl);
+        this.appendChild(label);
+
+        this._checkbox = input;
+        this._checkbox.addEventListener('change', () => {
+            this.toggleAttribute('active', this._checkbox.checked);
+            this.dispatchEvent(new CustomEvent('notify::active', {
+                bubbles: true,
+                detail: { active: this._checkbox.checked },
+            }));
+        });
+    }
+
+    attributeChangedCallback(name: string, _old: string | null, value: string | null) {
+        if (name === 'active' && this._checkbox) {
+            this._checkbox.checked = value !== null;
+        }
+    }
+}
+
+customElements.define('adw-switch-row', AdwSwitchRow);

package/src/elements/adw-toast-overlay.ts

@@ -0,0 +1,43 @@
+// <adw-toast-overlay> — Adwaita toast notification overlay.
+// Displays temporary feedback messages at the bottom of the viewport.
+// Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
+// Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss, _toast_overlay.scss
+// Reference: refs/libadwaita/src/adw-toast-overlay.c
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web.
+
+export class AdwToastOverlay extends HTMLElement {
+    /**
+     * Show a toast notification.
+     * @param title - The text to display.
+     * @param timeout - Time in ms before the toast auto-dismisses (default 2000).
+     */
+    addToast(title: string, timeout = 2000): void {
+        const toast = document.createElement('div');
+        toast.className = 'adw-toast';
+
+        const titleEl = document.createElement('span');
+        titleEl.className = 'adw-toast-title';
+        titleEl.textContent = title;
+        toast.appendChild(titleEl);
+
+        this.appendChild(toast);
+
+        // Trigger enter animation on next frame
+        requestAnimationFrame(() => {
+            toast.classList.add('visible');
+        });
+
+        // Auto-dismiss after timeout
+        setTimeout(() => {
+            toast.classList.remove('visible');
+            toast.classList.add('hiding');
+            toast.addEventListener('transitionend', () => toast.remove(), { once: true });
+            // Fallback if transitionend doesn't fire
+            setTimeout(() => { if (toast.parentNode) toast.remove(); }, 300);
+        }, timeout);
+    }
+}
+
+customElements.define('adw-toast-overlay', AdwToastOverlay);

package/src/elements/adw-window.ts

@@ -0,0 +1,18 @@
+// <adw-window> — Adwaita application window frame.
+// Provides rounded corners, shadow, and flex column layout.
+// Adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
+// Copyright (c) 2025 csm. MIT License.
+// Modifications: Reimplemented as Web Component for @gjsify/adwaita-web.
+
+export class AdwWindow extends HTMLElement {
+    connectedCallback() {
+        // Light DOM: children remain in place, element itself is the styled container.
+        // Set dimensions from attributes if provided.
+        const w = this.getAttribute('width');
+        const h = this.getAttribute('height');
+        if (w) this.style.width = `${w}px`;
+        if (h) this.style.height = `${h}px`;
+    }
+}
+
+customElements.define('adw-window', AdwWindow);

package/src/index.ts

@@ -0,0 +1,23 @@
+// @gjsify/adwaita-web — Adwaita/Libadwaita web components for browser targets.
+// Importing this module registers all custom elements and injects the Adwaita CSS.
+// Reference: refs/libadwaita (colors/sizing), refs/adwaita-web (component patterns).
+
+import '@gjsify/adwaita-fonts';  // Registers @font-face (fontsource pattern)
+import { adwaitaCSS } from './adwaita-css.js';
+
+// Register custom elements (side-effect imports)
+export { AdwWindow } from './elements/adw-window.js';
+export { AdwHeaderBar } from './elements/adw-header-bar.js';
+export { AdwPreferencesGroup } from './elements/adw-preferences-group.js';
+export { AdwSwitchRow } from './elements/adw-switch-row.js';
+export { AdwComboRow } from './elements/adw-combo-row.js';
+export { AdwSpinRow } from './elements/adw-spin-row.js';
+export { AdwToastOverlay } from './elements/adw-toast-overlay.js';
+export { AdwOverlaySplitView } from './elements/adw-overlay-split-view.js';
+
+// Inject Adwaita CSS into the document
+if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.textContent = adwaitaCSS;
+    document.head.appendChild(style);
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "target": "ESNext",
+        "lib": ["ESNext", "DOM"],
+        "rootDir": "src",
+        "outDir": "lib",
+        "declarationDir": "lib/types",
+        "declaration": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "emitDeclarationOnly": true,
+        "strict": false
+    },
+    "include": ["src/**/*.ts"]
+}