@gjsify/adwaita-web 0.10.0 → 0.12.0

package/scss/_expander_row.scss

@@ -0,0 +1,150 @@
+// _expander_row.scss — adw-expander-row styling (disclosure header + nested rows).
+// Reference: refs/adwaita-web/adwaita-web/scss/_expander_row.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_expander-row.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-expander-row {
+  display: block;
+  border-bottom: 1px solid var(--card-shade-color);
+  color: var(--card-fg-color);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  // Header — styled like an activatable action row.
+  .adw-expander-row-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+    min-height: 50px;
+    padding: var(--spacing-s) var(--spacing-m);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--button-bg-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+  }
+
+  .adw-row-title {
+    font-size: var(--font-size-base);
+    color: var(--card-fg-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // The text column takes the free space so prefix/suffix widgets, the enable
+  // switch and the chevron sit at their respective edges.
+  .adw-expander-row-header > .adw-row-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // Header prefix / suffix widget slots (Adw.ExpanderRow add_prefix/add_suffix).
+  .adw-expander-row-prefix,
+  .adw-expander-row-suffix {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+    flex-shrink: 0;
+  }
+
+  // Disclosure chevron — points down when collapsed, flips up when expanded,
+  // matching libadwaita's Adw.ExpanderRow arrow.
+  .adw-expander-row-chevron {
+    opacity: var(--dim-opacity);
+    transform: rotate(0deg);
+    transition: transform 0.2s ease-out;
+    flex-shrink: 0;
+  }
+
+  &.expanded .adw-expander-row-chevron {
+    transform: rotate(180deg);
+  }
+
+  // The optional enable switch reuses the shared .adw-switch markup.
+  .adw-expander-row-enable-switch {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+    flex-shrink: 0;
+
+    input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      position: absolute;
+    }
+
+    .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;
+
+      &::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%);
+      }
+    }
+
+    input:checked + .adw-switch-slider {
+      background-color: var(--accent-bg-color);
+
+      &::before {
+        transform: translateX(20px);
+      }
+    }
+
+    input:focus-visible + .adw-switch-slider {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 2px;
+    }
+  }
+
+  // Disclosed content — a nested listbox of rows, hidden until expanded. The
+  // nested surface is slightly inset/recessed, the way libadwaita draws it.
+  .adw-expander-row-content {
+    display: none;
+    flex-direction: column;
+    background-color: var(--window-bg-color);
+    border-top: 1px solid var(--card-shade-color);
+
+    &.expanded {
+      display: flex;
+    }
+
+    // Nested rows: indent the text column and keep the hairline separators,
+    // dropping the last one (the content area's own edge closes it off).
+    > adw-action-row,
+    > adw-entry-row,
+    > adw-switch-row,
+    > adw-combo-row,
+    > adw-spin-row {
+      padding-left: var(--spacing-xl);
+      border-bottom: 1px solid var(--card-shade-color);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+}

package/scss/_headerbar.scss

@@ -12,7 +12,7 @@ adw-header-bar {
   padding: 0 6px;
   background-color: var(--headerbar-bg-color);
   color: var(--headerbar-fg-color);
-  box-shadow: inset 0 -1px var(--headerbar-shade-color);
+  box-shadow: inset 0 -1px var(--separator-color);
   // flex-shrink: 0 ensures the headerbar never collapses inside a flex-column
   // adw-window, preventing a spurious spacing band between bar and content.
   flex-shrink: 0;

package/scss/_inline_view_switcher.scss

@@ -0,0 +1,174 @@
+// _inline_view_switcher.scss — adw-inline-view-switcher styling (a compact view
+// switcher: a toggle-group-style bar of one toggle per page over a single
+// stacked content area, with the active toggle drawn as the raised Adwaita
+// active-toggle chip). The bar's per-display-mode sizing (labels / icons / both)
+// mirrors libadwaita's `inline-view-switcher > toggle-group.{labels,icons,both}`.
+// Reference: refs/libadwaita/src/adw-inline-view-switcher.c (AdwInlineViewSwitcher)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_toggle-group.scss (inline-view-switcher > toggle-group)
+// Reference: refs/adwaita-web/adwaita-web/scss/_viewswitcher.scss
+// Copyright (c) 2023 Maximiliano Sandoval / 2024 GNOME Foundation Inc. (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 — the same tokens the
+// toggle-group uses (defined there; _theme.scss overrides them for dark).
+
+adw-inline-view-switcher {
+    // 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: flex;
+    flex-direction: column;
+    align-items: center;
+
+    // The switcher bar — a toggle-group pill, sized to its content.
+    .adw-inline-view-switcher-group {
+        display: inline-flex;
+        box-sizing: border-box;
+        align-items: stretch;
+        gap: var(--group-padding);
+        padding: var(--group-padding);
+        border-radius: var(--button-radius);
+        background-color: var(--button-bg-color);
+    }
+
+    // Each toggle is a button-shaped chip with the group's inner radius.
+    .adw-inline-view-switcher-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);
+            }
+        }
+    }
+
+    // The switcher's symbolic icon — a currentColor mask, sized like a toolbar
+    // icon (matches the .adw-icon base used across @gjsify/adwaita-web).
+    .adw-inline-view-switcher-icon {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        flex: none;
+        background-color: currentColor;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        -webkit-mask-size: contain;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+    }
+
+    .adw-inline-view-switcher-label {
+        white-space: nowrap;
+    }
+
+    // The stacked content area below the bar — exactly one page is visible.
+    .adw-inline-view-switcher-pages {
+        width: 100%;
+    }
+
+    .adw-inline-view-switcher-page {
+        &:not(.active-view) {
+            display: none;
+        }
+    }
+
+    // Per-display-mode sizing, mirroring libadwaita's
+    // inline-view-switcher > toggle-group.{icons,labels,both}.
+    .adw-inline-view-switcher-group.icons .adw-inline-view-switcher-toggle {
+        min-width: 34px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .adw-inline-view-switcher-group.labels .adw-inline-view-switcher-toggle {
+        min-width: calc(18px + var(--group-padding) * 2);
+    }
+
+    // Round — group + toggles become pill-shaped.
+    &.round {
+        .adw-inline-view-switcher-group {
+            border-radius: 17px;
+        }
+
+        .adw-inline-view-switcher-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;
+
+        .adw-inline-view-switcher-group {
+            padding: 0;
+            background: none;
+        }
+
+        .adw-inline-view-switcher-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-inline-view-switcher-toggle {
+            border-radius: 17px;
+        }
+    }
+}

package/scss/_navigation_split_view.scss

@@ -0,0 +1,48 @@
+// _navigation_split_view.scss — adw-navigation-split-view styling (docked sidebar).
+// Reference: refs/adwaita-web/adwaita-web/docs/widgets/navigationsplitview.md
+// Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-navigation-split-view {
+  display: flex;
+  flex-direction: row;
+  min-height: 0;
+  min-width: 0;
+  flex: 1 1 auto;
+
+  .adw-nsv-sidebar {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    flex-shrink: 0;
+    border-right: 1px solid var(--separator-color);
+    background-color: var(--sidebar-bg-color);
+  }
+
+  .adw-nsv-content {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    flex: 1 1 auto;
+    background-color: var(--window-bg-color);
+  }
+
+  // Collapsed (narrow): one pane at a time.
+  &.collapsed.show-content .adw-nsv-sidebar {
+    display: none;
+  }
+
+  &.collapsed:not(.show-content) {
+    .adw-nsv-content {
+      display: none;
+    }
+
+    .adw-nsv-sidebar {
+      flex: 1 1 auto;
+      max-width: none;
+      border-right: none;
+    }
+  }
+}

package/scss/_navigation_view.scss

@@ -0,0 +1,80 @@
+// _navigation_view.scss — adw-navigation-view styling (a page-based navigation
+// container; one page visible at a time, controlled with push/pop). The visible
+// page fills the view on the window background; an automatic back button is
+// drawn flat at the start of the visible page's header bar.
+// Reference: refs/libadwaita/src/adw-navigation-view.c (css node "navigation-view")
+// Reference: refs/adwaita-web/adwaita-web/docs/widgets/navigationview.md
+// Copyright (c) 2022-2023 Purism SPC / GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-navigation-view {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+
+  // The page stack — fills the view; positioned so pages can stack.
+  .adw-navigation-view-pages {
+    flex: 1 1 auto;
+    position: relative;
+    box-sizing: border-box;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  // A single navigation page — the visible one fills the view, the rest are
+  // hidden. Positioned absolutely so a transition can overlap two pages.
+  .adw-navigation-page {
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    background-color: var(--window-bg-color);
+    color: var(--window-fg-color);
+
+    &[hidden] {
+      display: none;
+    }
+
+    &.visible-page {
+      display: flex;
+    }
+
+    // Let a page whose direct child fills (a toolbar-view / status-page)
+    // stretch to the full height.
+    > * {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+  }
+
+  // The injected automatic back button — flat, sits at the start of the visible
+  // page's header bar (mirrors AdwHeaderBar's grown-in back button).
+  .adw-navigation-back-button {
+    flex-shrink: 0;
+  }
+
+  // Slide transition for the visible page when transitions are animated. The
+  // entering page fades up from a slight horizontal offset (LTR push), matching
+  // libadwaita's spring-driven slide closely enough for the web target.
+  &.animated .adw-navigation-page.visible-page {
+    animation: adw-navigation-page-in 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+}
+
+@keyframes adw-navigation-page-in {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/scss/_overlay_split_view.scss

@@ -42,6 +42,25 @@ adw-overlay-split-view {
     pointer-events: none;
   }
 
+  // Docked + sidebar-end — dock the sidebar to the RIGHT of the content
+  // (the Adw.OverlaySplitView { sidebar-position: end } layout). flex `order`
+  // flips the visual order without changing the slotting DOM order.
+  &:not(.collapsed).sidebar-end {
+    .adw-osv-content {
+      order: 1;
+    }
+
+    .adw-osv-sidebar {
+      order: 2;
+      border-inline-start: 1px solid var(--separator-color);
+    }
+  }
+
+  // Docked hide when the sidebar is on the end edge: slide RIGHT, not left.
+  &:not(.collapsed):not(.show-sidebar).sidebar-end .adw-osv-sidebar {
+    transform: translateX(100%);
+  }
+
   // Overlay mode (collapsed) — sidebar on top of content
   &.collapsed .adw-osv-sidebar {
     position: absolute;

package/scss/_password_entry_row.scss

@@ -0,0 +1,67 @@
+// _password_entry_row.scss — adw-password-entry-row styling (masked entry row
+// with a trailing peek toggle). Mirrors _entry_row.scss (the password row is a
+// specialization of the entry row) and adds the flat peek button.
+// Reference: refs/adwaita-web/adwaita-web/scss/_password_entry_row.scss
+// Reference: refs/libadwaita/src/adw-password-entry-row.c
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-password-entry-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-m);
+  min-height: 50px;
+  padding: var(--spacing-xs) var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  // Focus ring matching libadwaita's row focus (inset accent outline).
+  &:focus-within {
+    box-shadow: inset 0 0 0 2px var(--accent-color);
+  }
+
+  // Filled Adw.EntryRow layout: a small floating title above the value,
+  // both left-aligned in a column.
+  .adw-password-entry-row-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    gap: 1px;
+  }
+
+  .adw-row-title {
+    font-size: var(--font-size-small);
+    color: var(--card-fg-color);
+    opacity: var(--dim-opacity);
+  }
+
+  .adw-password-entry-row-input {
+    width: 100%;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    color: var(--card-fg-color);
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    text-align: left;
+    outline: none;
+    padding: 0;
+
+    // Slightly wider tracking for the masked dots, like the native entry.
+    &[type='password'] {
+      letter-spacing: 0.125em;
+    }
+  }
+
+  // Trailing peek toggle — flat circular icon button, vertically centred.
+  .adw-password-entry-row-toggle {
+    flex-shrink: 0;
+    align-self: center;
+  }
+}

package/scss/_preferences.scss

@@ -8,15 +8,38 @@
 adw-preferences-group {
   display: block;
 
+  // The header is a flex row: a title/description label column on the left
+  // (stretches to fill) and the optional header-suffix on the trailing edge.
   .adw-preferences-group-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
     padding: var(--spacing-xs) 2px;
   }
 
+  .adw-preferences-group-labels {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  .adw-preferences-group-suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
   .adw-preferences-group-title {
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
     font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
+    margin: 0;
+    color: var(--window-fg-color);
+  }
+
+  // Dimmed description line below the title.
+  .adw-preferences-group-description {
+    font-size: var(--font-size-small);
     opacity: var(--dim-opacity);
     margin: 0;
     color: var(--window-fg-color);