@gjsify/adwaita-web 0.1.7 → 0.1.9

package/src/elements/adw-card.js

@@ -0,0 +1,9 @@
+class AdwCard extends HTMLElement {
+  connectedCallback() {
+    this.classList.add("adw-card");
+  }
+}
+customElements.define("adw-card", AdwCard);
+export {
+  AdwCard
+};

package/src/elements/adw-card.ts

@@ -0,0 +1,15 @@
+// <adw-card> — Adwaita card container.
+// A simple styled container with Adwaita card appearance (rounded corners,
+// layered shadow, theme-aware background).
+// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss
+// Reference: refs/adwaita-web/adwaita-web/scss/_card.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented as Web Component for @gjsify/adwaita-web.
+
+export class AdwCard extends HTMLElement {
+    connectedCallback() {
+        this.classList.add('adw-card');
+    }
+}
+
+customElements.define('adw-card', AdwCard);

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

@@ -0,0 +1,63 @@
+class AdwComboRow extends HTMLElement {
+  _select;
+  _valueEl;
+  _items = [];
+  _initialized = false;
+  static get observedAttributes() {
+    return ["selected"];
+  }
+  get selected() {
+    return this._select ? this._select.selectedIndex : parseInt(this.getAttribute("selected") || "0", 10);
+  }
+  set selected(value) {
+    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);
+    const titleEl = document.createElement("span");
+    titleEl.className = "adw-row-title";
+    titleEl.textContent = title;
+    const valueEl = document.createElement("span");
+    valueEl.className = "adw-row-value";
+    valueEl.textContent = this._items[selectedIdx] ?? "";
+    this._valueEl = valueEl;
+    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, _old, value) {
+    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);
+export {
+  AdwComboRow
+};

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

@@ -0,0 +1,37 @@
+class AdwHeaderBar extends HTMLElement {
+  _initialized = false;
+  _startEl = null;
+  _endEl = null;
+  /** The start (left) section container — append buttons/widgets here. */
+  get startSection() {
+    return this._startEl;
+  }
+  /** The end (right) section container — append buttons/widgets here. */
+  get endSection() {
+    return this._endEl;
+  }
+  connectedCallback() {
+    if (this._initialized) return;
+    this._initialized = true;
+    const title = this.getAttribute("title") || "";
+    const startChildren = Array.from(this.querySelectorAll(':scope > [slot="start"]'));
+    const endChildren = Array.from(this.querySelectorAll(':scope > [slot="end"]'));
+    this._startEl = document.createElement("div");
+    this._startEl.className = "adw-header-bar-start";
+    for (const child of startChildren) this._startEl.appendChild(child);
+    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);
+    this._endEl = document.createElement("div");
+    this._endEl.className = "adw-header-bar-end";
+    for (const child of endChildren) this._endEl.appendChild(child);
+    this.replaceChildren(this._startEl, center, this._endEl);
+  }
+}
+customElements.define("adw-header-bar", AdwHeaderBar);
+export {
+  AdwHeaderBar
+};

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

@@ -0,0 +1,101 @@
+class AdwOverlaySplitView extends HTMLElement {
+  _initialized = false;
+  _sidebarEl;
+  _contentEl;
+  _backdropEl;
+  static get observedAttributes() {
+    return ["show-sidebar", "collapsed", "sidebar-position", "min-sidebar-width", "max-sidebar-width", "sidebar-width-fraction"];
+  }
+  get showSidebar() {
+    return this.hasAttribute("show-sidebar");
+  }
+  set showSidebar(v) {
+    if (v) this.setAttribute("show-sidebar", "");
+    else this.removeAttribute("show-sidebar");
+  }
+  get collapsed() {
+    return this.hasAttribute("collapsed");
+  }
+  set collapsed(v) {
+    if (v) this.setAttribute("collapsed", "");
+    else this.removeAttribute("collapsed");
+  }
+  get minSidebarWidth() {
+    return parseFloat(this.getAttribute("min-sidebar-width") || "280");
+  }
+  get maxSidebarWidth() {
+    return parseFloat(this.getAttribute("max-sidebar-width") || "400");
+  }
+  get sidebarWidthFraction() {
+    return parseFloat(this.getAttribute("sidebar-width-fraction") || "0.30");
+  }
+  connectedCallback() {
+    if (this._initialized) return;
+    this._initialized = true;
+    const sidebarChildren = Array.from(this.querySelectorAll('[slot="sidebar"]'));
+    const contentChildren = Array.from(this.querySelectorAll('[slot="content"]'));
+    const unslotted = Array.from(this.childNodes).filter(
+      (n) => !sidebarChildren.includes(n) && !contentChildren.includes(n)
+    );
+    this.replaceChildren();
+    this._sidebarEl = document.createElement("div");
+    this._sidebarEl.className = "adw-osv-sidebar";
+    sidebarChildren.forEach((c) => this._sidebarEl.appendChild(c));
+    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));
+    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);
+    this._syncClasses();
+    this._syncSidebarWidth();
+  }
+  attributeChangedCallback(_name, _old, _val) {
+    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 }
+    }));
+  }
+  _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");
+    if (this._sidebarEl && !this.collapsed) {
+      if (!this.showSidebar) {
+        const w = this._sidebarEl.offsetWidth;
+        this._sidebarEl.style.marginRight = `-${w}px`;
+      } else {
+        this._sidebarEl.style.marginRight = "";
+      }
+    }
+  }
+  _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);
+export {
+  AdwOverlaySplitView
+};

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

@@ -0,0 +1,24 @@
+class AdwPreferencesGroup extends HTMLElement {
+  _initialized = false;
+  connectedCallback() {
+    if (this._initialized) return;
+    this._initialized = true;
+    const title = this.getAttribute("title") || "";
+    const children = Array.from(this.childNodes);
+    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);
+    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);
+export {
+  AdwPreferencesGroup
+};

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

@@ -0,0 +1,104 @@
+class AdwSpinRow extends HTMLElement {
+  _input;
+  _min = 0;
+  _max = 100;
+  _step = 1;
+  _value = 0;
+  _initialized = false;
+  static get observedAttributes() {
+    return ["value", "min", "max", "step"];
+  }
+  get value() {
+    return this._value;
+  }
+  set value(v) {
+    const clamped = Math.min(this._max, Math.max(this._min, v));
+    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));
+    const titleEl = document.createElement("span");
+    titleEl.className = "adw-row-title";
+    titleEl.textContent = title;
+    const control = document.createElement("div");
+    control.className = "adw-spin-control";
+    const decBtn = document.createElement("button");
+    decBtn.className = "adw-spin-dec";
+    decBtn.textContent = "\u2212";
+    decBtn.addEventListener("click", () => this._adjust(-this._step));
+    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);
+      }
+    });
+    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, _old, val) {
+    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;
+    }
+  }
+  _adjust(delta) {
+    this.value = this._value + delta;
+    this._emitChange();
+  }
+  _emitChange() {
+    this.dispatchEvent(new CustomEvent("notify::value", {
+      bubbles: true,
+      detail: { value: this._value }
+    }));
+  }
+  _countDecimals(n) {
+    const s = String(n);
+    const dot = s.indexOf(".");
+    return dot === -1 ? 0 : s.length - dot - 1;
+  }
+  _formatValue(v) {
+    const decimals = this._countDecimals(this._step);
+    return decimals > 0 ? v.toFixed(decimals) : String(v);
+  }
+}
+customElements.define("adw-spin-row", AdwSpinRow);
+export {
+  AdwSpinRow
+};

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

@@ -0,0 +1,51 @@
+class AdwSwitchRow extends HTMLElement {
+  _checkbox;
+  _initialized = false;
+  static get observedAttributes() {
+    return ["active"];
+  }
+  get active() {
+    return this.hasAttribute("active");
+  }
+  set active(value) {
+    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");
+    const titleEl = document.createElement("span");
+    titleEl.className = "adw-row-title";
+    titleEl.textContent = title;
+    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, _old, value) {
+    if (name === "active" && this._checkbox) {
+      this._checkbox.checked = value !== null;
+    }
+  }
+}
+customElements.define("adw-switch-row", AdwSwitchRow);
+export {
+  AdwSwitchRow
+};

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

@@ -0,0 +1,31 @@
+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, timeout = 2e3) {
+    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);
+    requestAnimationFrame(() => {
+      toast.classList.add("visible");
+    });
+    setTimeout(() => {
+      toast.classList.remove("visible");
+      toast.classList.add("hiding");
+      toast.addEventListener("transitionend", () => toast.remove(), { once: true });
+      setTimeout(() => {
+        if (toast.parentNode) toast.remove();
+      }, 300);
+    }, timeout);
+  }
+}
+customElements.define("adw-toast-overlay", AdwToastOverlay);
+export {
+  AdwToastOverlay
+};

package/src/elements/adw-window.js

@@ -0,0 +1,12 @@
+class AdwWindow extends HTMLElement {
+  connectedCallback() {
+    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);
+export {
+  AdwWindow
+};

package/src/index.js

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

package/src/index.ts

@@ -1,11 +1,13 @@
 // @gjsify/adwaita-web — Adwaita/Libadwaita web components for browser targets.
-// Importing this module registers all custom elements and injects the Adwaita CSS.
+// Importing this module registers all custom elements. The accompanying
+// stylesheet must be imported separately as `@gjsify/adwaita-web/style.css`
+// (or via SCSS partials at `@gjsify/adwaita-web/scss/...`).
 // 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 { AdwCard } from './elements/adw-card.js';
 export { AdwWindow } from './elements/adw-window.js';
 export { AdwHeaderBar } from './elements/adw-header-bar.js';
 export { AdwPreferencesGroup } from './elements/adw-preferences-group.js';
@@ -14,10 +16,3 @@ 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/style.css.d.ts

@@ -0,0 +1,4 @@
+// Type declaration for the @gjsify/adwaita-web/style.css side-effect import.
+// The actual file is the compiled stylesheet at dist/adwaita-web.css
+// (generated by `yarn build:scss`).
+export {};

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

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

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-    "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"]
-}