@gjsify/adwaita-web 0.10.0 → 0.12.0

package/scss/_tab_view.scss

@@ -0,0 +1,193 @@
+// _tab_view.scss — adw-tab-view styling (a dynamic tabbed container with a tab
+// bar header; one page visible at a time). The bar is a headerbar-colored strip
+// of rounded chips; the selected chip is raised onto the view background, the
+// way libadwaita draws AdwTabBar over an AdwTabView.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_tab-view.scss (tabbar/tabbox/tab)
+// Reference: refs/adwaita-web/adwaita-web/scss/_tabs.scss
+// Copyright (c) 2020-2022 Purism SPC / GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-tab-view {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+
+  // --- Tab bar (the AdwTabBar strip) ---
+  .adw-tab-bar {
+    display: flex;
+    align-items: flex-end;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    padding: 0 var(--spacing-xs);
+    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;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .adw-tab-box {
+    display: flex;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-xs) 0;
+    min-height: 34px;
+  }
+
+  // --- A single tab chip ---
+  .adw-tab {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    max-width: 200px;
+    min-height: 26px;
+    margin: 0;
+    padding: 4px var(--spacing-s);
+    border: none;
+    border-radius: var(--button-radius);
+    background-color: transparent;
+    color: var(--headerbar-fg-color);
+    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;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color, var(--button-hover-color));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: -1px;
+    }
+
+    // The selected tab — a raised chip on the view background, the way
+    // libadwaita lifts the active tab off the bar.
+    &.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);
+
+      &:hover {
+        background-color: var(--view-bg-color);
+      }
+    }
+  }
+
+  .adw-tab-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  // --- Close affordance (CSS-drawn "×", no symbolic icon ships) ---
+  .adw-tab-close {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    position: relative;
+    width: 18px;
+    height: 18px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 9999px;
+    background-color: transparent;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.7;
+    transition:
+      background-color 150ms ease-in-out,
+      opacity 150ms ease-in-out;
+
+    &:hover {
+      opacity: 1;
+      background-color: var(--button-hover-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 1px;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 9px;
+      height: 1.5px;
+      background-color: currentColor;
+      border-radius: 1px;
+    }
+
+    &::before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+  }
+
+  // Single-tab bars dim the close affordance (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);
+    }
+  }
+
+  // --- Pages (the AdwTabView content area) ---
+  .adw-tab-view-pages {
+    flex: 1 1 auto;
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+    background-color: var(--view-bg-color);
+    color: var(--view-fg-color);
+  }
+
+  .adw-tab-page {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+
+    &[hidden] {
+      display: none;
+    }
+
+    &.active-page {
+      display: block;
+    }
+  }
+}

package/scss/_theme.scss

@@ -12,13 +12,25 @@
   --headerbar-bg-color: #2e2e32;
   --headerbar-fg-color: #ffffff;
   --headerbar-shade-color: rgba(0, 0, 6, 0.36);
+  --separator-color: rgba(255, 255, 255, 0.08);
   --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;
+  --button-bg-color: rgba(255, 255, 255, 0.1);
+  --button-hover-color: rgba(255, 255, 255, 0.15);
+  --button-active-color: rgba(255, 255, 255, 0.22);
+  --entry-bg-color: rgba(255, 255, 255, 0.06);
+  --entry-border-color: rgba(255, 255, 255, 0.16);
+  --entry-border-hover-color: rgba(255, 255, 255, 0.26);
+  --destructive-bg-color: #c01c28;
+  --destructive-fg-color: #ffffff;
   --switch-off-bg: rgba(255, 255, 255, 0.2);
   --switch-knob-bg: #deddda;
+  // The active toggle is a raised near-white chip in both themes, so its text
+  // must be dark in dark mode (the default token is the light window-fg).
+  --active-toggle-fg-color: rgba(0, 0, 6, 0.8);
 }
 
 // Auto dark theme via prefers-color-scheme — opt out with .theme-light

package/scss/_toast.scss

@@ -1,4 +1,8 @@
 // _toast.scss — adw-toast and adw-toast-overlay styling.
+// adw-toast-overlay wraps content and layers transient `.adw-toast` banners over
+// the bottom of its own bounds (the Adw.ToastOverlay model). Each banner carries
+// a title, an optional action button and a CSS-drawn "×" close button, and slides
+// up on show / down on dismiss (mirroring Adw.Toast).
 // Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss
 // Reference: refs/adwaita-web/adwaita-web/scss/_toast_overlay.scss
 // Reference: refs/libadwaita/src/stylesheet/widgets/_toast.scss
@@ -7,27 +11,40 @@
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
 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;
+  position: relative;
+  display: block;
+
+  // The wrapped content (Adw.ToastOverlay :child) occupies the overlay's box.
+  .adw-toast-overlay-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  // Toasts are layered over the bottom edge of the overlay, stacked newest-last
+  // and centered, the way AdwToastOverlay floats them above its child.
+  .adw-toast-overlay-toasts {
+    position: absolute;
+    bottom: var(--spacing-m);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--spacing-s);
+    align-items: center;
+    pointer-events: none;
+  }
 }
 
 .adw-toast {
   background-color: #3d3846;
   color: #ffffff;
-  padding: 9px 12px;
+  padding: var(--spacing-s) var(--spacing-m);
   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;
+  gap: var(--spacing-s);
   width: max-content;
   max-width: 400px;
   min-height: 36px;
@@ -53,8 +70,101 @@ adw-toast-overlay {
     transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
   }
 
+  .adw-toast-content-wrapper {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   .adw-toast-title {
     font-weight: normal;
     line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // Action button — a flat pill tinted with the accent color so it reads as
+  // suggested against the dark toast surface (Adw.Toast:button-label).
+  .adw-toast-action-button {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 4px var(--spacing-m);
+    border: none;
+    border-radius: var(--button-radius);
+    background-color: rgba(255, 255, 255, 0.12);
+    color: #ffffff;
+    font-family: inherit;
+    font-size: var(--font-size-base);
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 150ms ease-in-out;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    &:active {
+      background-color: rgba(255, 255, 255, 0.26);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 1px;
+    }
+  }
+
+  // Close affordance — a CSS-drawn "×" (mirrors adw-tab-view's .adw-tab-close;
+  // no symbolic close icon ships in the curated adwaita-web icon set).
+  .adw-toast-close-button {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    position: relative;
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 9999px;
+    background-color: transparent;
+    color: #ffffff;
+    cursor: pointer;
+    opacity: 0.7;
+    transition:
+      background-color 150ms ease-in-out,
+      opacity 150ms ease-in-out;
+
+    &:hover {
+      opacity: 1;
+      background-color: rgba(255, 255, 255, 0.12);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 1px;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 11px;
+      height: 1.5px;
+      background-color: currentColor;
+      border-radius: 1px;
+    }
+
+    &::before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
   }
 }

package/scss/_toggle_group.scss

@@ -0,0 +1,124 @@
+// _toggle_group.scss — adw-toggle-group styling (a linked set of toggle buttons
+// with a single active item, recolored with the Adwaita active-toggle accent).
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toggle-group.scss (AdwToggleGroup)
+// Reference: refs/adwaita-web/adwaita-web/scss/_toggle_group.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+// The active toggle uses a white-on-fg "raised" chip. These tokens default to
+// libadwaita's light-theme values; _theme.scss overrides them for dark.
+:root {
+  --active-toggle-bg-color: #ffffff;
+  --active-toggle-fg-color: var(--window-fg-color);
+}
+
+adw-toggle-group {
+  // libadwaita's ---group-padding: a small inset so the active chip floats
+  // inside the group's pill, leaving a hairline of group background around it.
+  --group-padding: 3px;
+
+  display: inline-flex;
+  box-sizing: border-box;
+  padding: var(--group-padding);
+  border-radius: var(--button-radius);
+  background-color: var(--button-bg-color);
+
+  .adw-toggle-group-inner {
+    display: flex;
+    align-items: stretch;
+    gap: var(--group-padding);
+  }
+
+  // Each toggle is a button-shaped chip with the group's inner radius.
+  .adw-toggle {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-xs);
+    min-width: 34px;
+    min-height: 28px;
+    margin: 0;
+    padding: 4px 11px;
+    border: none;
+    border-radius: calc(var(--button-radius) - var(--group-padding));
+    background-color: transparent;
+    color: var(--window-fg-color);
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      color 0.2s ease,
+      background-color 0.2s ease,
+      box-shadow 0.2s ease;
+    user-select: none;
+    -webkit-user-select: none;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 1px;
+    }
+
+    // The active toggle — a raised white chip, the way libadwaita draws it.
+    &.active {
+      background-color: var(--active-toggle-bg-color);
+      color: var(--active-toggle-fg-color);
+      box-shadow:
+        0 1px 3px 1px rgba(0, 0, 6, 0.07),
+        0 2px 6px 2px rgba(0, 0, 6, 0.03);
+
+      &:hover {
+        background-color: var(--active-toggle-bg-color);
+      }
+    }
+  }
+
+  // Round — group + toggles become pill-shaped.
+  &.round {
+    border-radius: 17px;
+
+    .adw-toggle {
+      border-radius: calc(17px - var(--group-padding));
+      padding-left: calc(15px - var(--group-padding));
+      padding-right: calc(15px - var(--group-padding));
+    }
+  }
+
+  // Flat — no group background; the active toggle uses a subtle fill instead of
+  // the raised white chip.
+  &.flat {
+    --group-padding: 0px;
+
+    padding: 0;
+    background: none;
+
+    .adw-toggle {
+      border-radius: var(--button-radius);
+
+      &.active {
+        background-color: var(--button-active-color);
+        color: inherit;
+        box-shadow: none;
+
+        &:hover {
+          background-color: var(--button-active-color);
+        }
+      }
+    }
+
+    &.round .adw-toggle {
+      border-radius: 17px;
+    }
+  }
+}

package/scss/_toolbar_view.scss

@@ -0,0 +1,31 @@
+// _toolbar_view.scss — adw-toolbar-view styling (content framed by top/bottom bars).
+// Reference: refs/adwaita-web/adwaita-web/scss/_toolbar_view.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toolbars.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-toolbar-view {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  flex: 1 1 auto;
+
+  .adw-toolbar-view-top,
+  .adw-toolbar-view-bottom {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .adw-toolbar-view-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--window-bg-color);
+  }
+}

package/scss/_variables.scss

@@ -19,6 +19,11 @@
   --headerbar-fg-color: rgba(0, 0, 6, 0.8);
   --headerbar-shade-color: rgba(0, 0, 6, 0.12);
 
+  // Hairline separators (header underline, sidebar/pane dividers). Subtle in
+  // BOTH themes — dark theme flips to a faint light line, the way libadwaita
+  // draws separators, instead of a harsh near-black line on a dark surface.
+  --separator-color: rgba(0, 0, 6, 0.1);
+
   // Sidebar
   --sidebar-bg-color: #ebebed;
 
@@ -32,6 +37,20 @@
   --accent-fg-color: #ffffff;
   --accent-color: #1c71d8;
 
+  // Buttons
+  --button-bg-color: rgba(0, 0, 6, 0.08);
+  --button-hover-color: rgba(0, 0, 6, 0.13);
+  --button-active-color: rgba(0, 0, 6, 0.19);
+
+  // Entries
+  --entry-bg-color: #ffffff;
+  --entry-border-color: rgba(0, 0, 6, 0.18);
+  --entry-border-hover-color: rgba(0, 0, 6, 0.28);
+
+  // Destructive action
+  --destructive-bg-color: #e01b24;
+  --destructive-fg-color: #ffffff;
+
   // Switch
   --switch-off-bg: rgba(0, 0, 0, 0.2);
   --switch-knob-bg: #ffffff;

package/scss/_view_switcher.scss

@@ -0,0 +1,133 @@
+// _view_switcher.scss — adw-view-switcher styling: an adaptive, tab-style
+// switcher (single `viewswitcher` node) above a content area showing one page
+// at a time. Buttons are always icon + label, laid out side by side (`.wide`)
+// or stacked (`.narrow`), matching libadwaita's policy style classes.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_view-switcher.scss (AdwViewSwitcher)
+// Reference: refs/adwaita-web/adwaita-web/scss/_viewswitcher.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-view-switcher {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+
+    // The segmented button bar — the single `viewswitcher` node in libadwaita.
+    // Homogeneous tabs (equal width via flex:1) with a small gutter between them.
+    .adw-view-switcher-bar {
+        display: flex;
+        align-items: stretch;
+        gap: 3px; // libadwaita's `border-spacing: 3px`
+        min-height: 34px;
+    }
+
+    // Each tab is a flat, transparent toggle that lights up with a subtle fill
+    // when hovered and shows the active page with an accent-tinted background.
+    .adw-view-switcher-button {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex: 1 1 0; // homogeneous — every tab gets equal width
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        padding: 2px 12px;
+        border: none;
+        border-radius: var(--button-radius);
+        background-color: transparent;
+        color: var(--window-fg-color);
+        font-family: var(--font-family);
+        font-size: var(--font-size-base);
+        font-weight: 700;
+        line-height: 1.2;
+        cursor: pointer;
+        transition:
+            color 0.2s ease,
+            background-color 0.2s ease;
+        user-select: none;
+        -webkit-user-select: none;
+
+        .adw-icon {
+            width: 16px;
+            height: 16px;
+            flex: none;
+        }
+
+        .adw-view-switcher-label {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &:hover {
+            background-color: var(--button-hover-color);
+        }
+
+        &:active {
+            background-color: var(--button-active-color);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--accent-color);
+            outline-offset: -2px;
+        }
+
+        // The selected view — a neutral filled chip (libadwaita darkens the
+        // whole button; the icon/label keep the normal foreground colour
+        // rather than turning accent).
+        &.active {
+            background-color: var(--button-active-color);
+            color: var(--window-fg-color);
+
+            &:hover {
+                background-color: var(--button-active-color);
+            }
+        }
+    }
+
+    // Wide policy — icon and label side by side.
+    &.wide .adw-view-switcher-button {
+        flex-direction: row;
+        gap: var(--spacing-xs);
+    }
+
+    // Narrow policy — icon stacked above a smaller label, the compact layout
+    // libadwaita drops to in a header bar at narrow window widths.
+    &.narrow {
+        .adw-view-switcher-bar {
+            min-height: 6px;
+        }
+
+        .adw-view-switcher-button {
+            flex-direction: column;
+            gap: 1px;
+            padding-top: 4px;
+            padding-bottom: 2px;
+            font-size: 0.75rem;
+
+            .adw-view-switcher-label {
+                min-height: 18px;
+                line-height: 18px;
+            }
+        }
+    }
+
+    // The paired content area showing the active page — a card-like surface
+    // below the switcher (the web stand-in for the Adw.ViewStack body).
+    .adw-view-switcher-content {
+        flex: 1 1 auto;
+        margin-top: var(--spacing-s);
+        padding: var(--spacing-m);
+        background-color: var(--view-bg-color);
+        border: 1px solid var(--separator-color);
+        border-radius: var(--card-radius);
+    }
+
+    .adw-view-switcher-page {
+        display: none;
+
+        &.active-view {
+            display: block;
+        }
+    }
+}