@gjsify/adwaita-web 0.10.0 → 0.12.0

package/scss/_preferences_dialog.scss

@@ -0,0 +1,154 @@
+// _preferences_dialog.scss — adw-preferences-dialog styling (scrim + dialog box).
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss (floating-sheet
+//   scrim/dimming + sheet radius + box-shadow + outline)
+// Reference: refs/libadwaita/src/adw-preferences-dialog.ui (flat header + title)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-preferences-dialog {
+  // Hidden until presented (the `open` class is toggled by the component). The
+  // element itself contributes nothing to layout while closed.
+  display: none;
+
+  &.open {
+    display: block;
+  }
+
+  // Full-cover scrim — a fixed dimming layer behind the dialog box. Adwaita
+  // dims with `--shade-color` at double alpha (see _dialogs.scss `floating-sheet
+  // > dimming`); --shade-color isn't in the adwaita-web token subset, so use the
+  // equivalent neutral wash.
+  .adw-preferences-dialog-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    background-color: rgba(0, 0, 6, 0.32);
+  }
+
+  // The centred floating dialog box. Mirrors `floating-sheet > sheet`: the
+  // dialog radius (= --window-radius in Adwaita), the layered drop shadow and a
+  // 1px window outline.
+  .adw-preferences-dialog-box {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    width: min(var(--adw-dialog-content-width, 640px), calc(100vw - 48px));
+    max-height: calc(100vh - 48px);
+    overflow: hidden;
+    background-color: var(--window-bg-color);
+    color: var(--window-fg-color);
+    border-radius: var(--window-radius);
+    outline: 1px solid var(--separator-color);
+    outline-offset: -1px;
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.05),
+      0 0 5px 2px rgba(0, 0, 6, 0.1),
+      0 0 14px 2px rgba(0, 0, 6, 0.03);
+  }
+
+  // Flat header bar — transparent over the window background (Adw's preferences
+  // dialog header uses a flat AdwHeaderBar), title centred against the trailing
+  // close button.
+  .adw-preferences-dialog-header {
+    display: flex;
+    align-items: center;
+    min-height: 47px;
+    padding: 0 6px;
+    flex-shrink: 0;
+  }
+
+  // Equal-width sides keep the title optically centred (strict centering).
+  .adw-preferences-dialog-header-side {
+    display: flex;
+    align-items: center;
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .adw-preferences-dialog-header-side--end {
+    justify-content: flex-end;
+  }
+
+  .adw-preferences-dialog-title {
+    flex: 0 0 auto;
+    font-weight: bold;
+    font-size: var(--font-size-base);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 6px;
+  }
+
+  // Round flat close button drawing a CSS "×" glyph (no symbolic close icon
+  // ships in @gjsify/adwaita-icons — same approach as <adw-tab-view>).
+  .adw-preferences-dialog-close {
+    appearance: none;
+    border: none;
+    margin: 0;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--window-fg-color);
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.1s ease;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 12px;
+      height: 1.5px;
+      background-color: currentColor;
+      border-radius: 1px;
+    }
+
+    &::before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    &.locked {
+      opacity: var(--dim-opacity);
+      cursor: default;
+    }
+  }
+
+  // Scrolled body holding the stacked pages. Adwaita preferences pages sit on
+  // the window background (the boxed-list groups carry their own card surface).
+  .adw-preferences-dialog-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  // Clamped column of preferences groups — Adw.PreferencesPage clamps content to
+  // a comfortable reading width and stacks groups with generous spacing.
+  .adw-preferences-dialog-pages {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+    max-width: 600px;
+    margin: 0 auto;
+    padding: var(--spacing-xl) var(--spacing-m);
+  }
+}

package/scss/_row.scss

@@ -20,6 +20,37 @@ adw-combo-row {
   }
 }
 
+// Shared title/subtitle text column used by every row type (action/switch/
+// combo/spin). The title is the primary label; the subtitle is dimmed and
+// hidden when empty.
+.adw-row-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.adw-row-subtitle {
+  font-size: var(--font-size-small);
+  opacity: var(--dim-opacity);
+  color: var(--card-fg-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Trailing edit pencil shared by editable rows (entry/password) — the
+// Adw.EntryRow edit affordance. Dimmed; clicking focuses the entry.
+.adw-row-edit {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--card-fg-color);
+  opacity: 0.55;
+  cursor: pointer;
+}
+
 // Utility separator (used by content layouts)
 .adw-separator-vertical {
   width: 1px;

package/scss/_sidebar.scss

@@ -0,0 +1,213 @@
+// _sidebar.scss — adw-sidebar styling (a selectable navigation sidebar built
+// from titled sections of icon + title + subtitle items). In sidebar mode it
+// renders as the flat AdwSidebar navigation list (`.navigation-sidebar`); in
+// page mode it renders as boxed lists with a trailing chevron on each row (the
+// AdwPreferencesPage look the native widget switches to when collapsed).
+// Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss (.navigation-sidebar, sidebar)
+// Reference: refs/libadwaita/src/adw-sidebar.c (row/header/section structure)
+// Copyright (c) 2025 GNOME Foundation Inc. (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-sidebar {
+  display: block;
+  box-sizing: border-box;
+  overflow-y: auto;
+  background-color: var(--sidebar-bg-color, var(--window-bg-color));
+  color: var(--sidebar-fg-color, var(--window-fg-color));
+
+  .adw-sidebar-list {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    // libadwaita's menu margins around the navigation list.
+    padding: var(--spacing-xs) 0;
+  }
+
+  .adw-sidebar-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // --- Section headers (heading or separator) ---
+  .adw-sidebar-section-header {
+    &[hidden] {
+      display: none;
+    }
+
+    // Untitled section → a horizontal separator before its rows (the way the
+    // AdwSidebar header stack shows its "separator" child).
+    &.separator {
+      height: 1px;
+      margin: var(--spacing-xs) var(--spacing-s);
+      background-color: var(--separator-color, var(--card-shade-color));
+    }
+
+    &.has-title {
+      padding: var(--spacing-s) calc(var(--spacing-s) + 6px) var(--spacing-xs);
+
+      // The first header sits flush with the top (mirrors `.header.first`).
+      &.first {
+        padding-top: 0;
+      }
+    }
+  }
+
+  .adw-sidebar-section-heading {
+    font-size: var(--font-size-small);
+    font-weight: 700;
+    opacity: var(--dim-opacity);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // --- A single item row ---
+  .adw-sidebar-item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+    width: 100%;
+    min-height: 36px;
+    // The native row has a context menu, so padding lives on the inner box and
+    // the row itself carries the menu margin + radius.
+    margin: 0 var(--spacing-xs) 2px;
+    padding: 3px 14px;
+    border: none;
+    border-radius: var(--button-radius, 6px);
+    background-color: transparent;
+    color: inherit;
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    text-align: start;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition:
+      background-color 150ms ease-in-out,
+      color 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: -2px;
+    }
+
+    // Selected row — a neutral filled highlight; libadwaita's AdwSidebar
+    // selection is a subtle fill with the normal foreground, not accent.
+    &.selected {
+      background-color: var(--button-active-color);
+      color: var(--window-fg-color);
+
+      &:hover,
+      &:active {
+        background-color: var(--button-active-color);
+      }
+    }
+  }
+
+  .adw-sidebar-item-icon {
+    flex-shrink: 0;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .adw-sidebar-item-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .adw-sidebar-item-title {
+    font-size: var(--font-size-base);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .adw-sidebar-item-subtitle {
+    font-size: var(--font-size-small);
+    opacity: var(--dim-opacity);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  // The trailing chevron is only drawn in page (boxed-list) mode.
+  .adw-sidebar-item-arrow {
+    flex-shrink: 0;
+    opacity: var(--dim-opacity);
+    display: none;
+  }
+
+  // --- Page mode (boxed lists) ---
+  // Sections become bordered, rounded cards (the AdwPreferencesGroup look) and
+  // each row gains its trailing chevron; selection no longer fills the row with
+  // the accent color, matching how the native widget drops the list selection
+  // in page mode.
+  &.page {
+    .adw-sidebar-list {
+      padding: var(--spacing-m);
+      gap: var(--spacing-xs);
+    }
+
+    .adw-sidebar-section {
+      border: 1px solid var(--card-shade-color);
+      border-radius: var(--card-radius, 12px);
+      background-color: var(--card-bg-color);
+      color: var(--card-fg-color);
+      overflow: hidden;
+    }
+
+    .adw-sidebar-section-header.has-title {
+      padding: var(--spacing-m) var(--spacing-xs) var(--spacing-xs);
+
+      &.first {
+        padding-top: var(--spacing-m);
+      }
+    }
+
+    .adw-sidebar-item {
+      margin: 0;
+      padding: var(--spacing-s) var(--spacing-m);
+      border-radius: 0;
+      border-bottom: 1px solid var(--card-shade-color);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &.selected {
+        background-color: transparent;
+        color: var(--card-fg-color);
+
+        &:hover {
+          background-color: var(--button-hover-color);
+        }
+      }
+    }
+
+    .adw-sidebar-item-arrow {
+      display: inline-block;
+    }
+  }
+}

package/scss/_spin_row.scss

@@ -19,7 +19,6 @@ adw-spin-row {
   }
 
   .adw-row-title {
-    flex: 1;
     font-size: var(--font-size-base);
     color: var(--card-fg-color);
   }

package/scss/_spinner.scss

@@ -0,0 +1,28 @@
+// _spinner.scss — adw-spinner styling (ring with a spinning arc).
+// Reference: refs/adwaita-web/adwaita-web/scss/_spinner.scss
+// Reference: refs/libadwaita (Adw.Spinner)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  // Neutral arc (currentColor, theme-aware) over a faint track — Adw.Spinner
+  // is a neutral indicator, NOT accent-coloured.
+  border: 3px solid rgba(127, 127, 127, 0.25);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: adw-spinner-spin 0.8s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+@keyframes adw-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/scss/_split_button.scss

@@ -0,0 +1,222 @@
+// _split_button.scss — adw-split-button styling: a primary action button fused
+// with a dropdown that opens a menu of related actions, split by a thin divider.
+// The suggested/destructive/flat style classes recolor the whole control like
+// the matching Adwaita button variants.
+// Reference: refs/libadwaita/src/adw-split-button.c (splitbutton CSS node)
+// Reference: refs/adwaita-web/adwaita-web/scss/_split_button.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-split-button {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: stretch;
+  vertical-align: middle;
+  min-height: 34px;
+  border-radius: var(--button-radius);
+  background-color: var(--button-bg-color);
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  user-select: none;
+  -webkit-user-select: none;
+
+  &:focus-within {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 1px;
+  }
+
+  // Primary action half — fills the available width, rounded on the leading
+  // side only so it meets the dropdown flush.
+  .adw-split-button-action {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    flex-grow: 1;
+    min-height: 34px;
+    margin: 0;
+    padding: 4px 14px;
+    border: none;
+    border-radius: var(--button-radius) 0 0 var(--button-radius);
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+    }
+
+    // Icon-only action half — square, no horizontal text padding.
+    &.icon-only {
+      padding: 0;
+      width: 34px;
+      flex-grow: 0;
+    }
+  }
+
+  // Thin divider between the two halves (the splitbutton `separator` node).
+  .adw-split-button-dropdown {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 34px;
+    width: 28px;
+    margin: 0;
+    padding: 0 var(--spacing-xs);
+    border: none;
+    border-left: 1px solid var(--separator-color);
+    border-radius: 0 var(--button-radius) var(--button-radius) 0;
+    background-color: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+
+    .adw-icon {
+      width: 14px;
+      height: 14px;
+      mask-size: 14px;
+      -webkit-mask-size: 14px;
+    }
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  // --- Dropdown menu (popover) ---
+  .adw-split-button-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    min-width: 160px;
+    padding: var(--spacing-xs);
+    border-radius: var(--button-radius);
+    background-color: var(--popover-bg-color, var(--window-bg-color, #fff));
+    color: var(--window-fg-color);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--separator-color);
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .adw-split-button-menu-item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 32px;
+    margin: 0;
+    padding: var(--spacing-xs) var(--spacing-s);
+    border: none;
+    border-radius: calc(var(--button-radius) - 2px);
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+
+    &: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;
+    }
+  }
+
+  // --- Suggested action — accent-coloured whole control ---
+  &.suggested-action {
+    background-color: var(--accent-bg-color);
+    color: var(--accent-fg-color);
+
+    .adw-split-button-dropdown {
+      border-left-color: rgba(255, 255, 255, 0.3);
+    }
+
+    .adw-split-button-action:hover,
+    .adw-split-button-dropdown:hover {
+      background-color: var(--accent-color);
+    }
+
+    .adw-split-button-action:active,
+    .adw-split-button-dropdown:active {
+      background-color: var(--accent-color);
+      filter: brightness(0.92);
+    }
+  }
+
+  // --- Destructive action — red whole control ---
+  &.destructive-action {
+    background-color: var(--destructive-bg-color);
+    color: var(--destructive-fg-color);
+
+    .adw-split-button-dropdown {
+      border-left-color: rgba(255, 255, 255, 0.3);
+    }
+
+    .adw-split-button-action:hover,
+    .adw-split-button-dropdown:hover {
+      filter: brightness(1.06);
+    }
+
+    .adw-split-button-action:active,
+    .adw-split-button-dropdown:active {
+      filter: brightness(0.9);
+    }
+  }
+
+  // --- Flat — no resting background; only reacts on hover/active ---
+  &.flat {
+    background-color: transparent;
+  }
+
+  // --- Disabled ---
+  &.disabled {
+    opacity: 0.45;
+    cursor: default;
+
+    .adw-split-button-action,
+    .adw-split-button-dropdown {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+}

package/scss/_status_page.scss

@@ -0,0 +1,40 @@
+// _status_page.scss — adw-status-page styling (centered empty state).
+// Reference: refs/adwaita-web/adwaita-web/scss/_status_page.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_status-page.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-status-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--spacing-m);
+  padding: var(--spacing-xl);
+  color: var(--window-fg-color);
+
+  .adw-status-page-icon {
+    width: 96px;
+    height: 96px;
+    background-color: currentColor;
+    opacity: 0.45;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+
+  .adw-status-page-title {
+    font-size: 18pt;
+    font-weight: 800;
+  }
+
+  .adw-status-page-description {
+    font-size: var(--font-size-base);
+    opacity: var(--dim-opacity);
+    max-width: 32ch;
+  }
+
+  .adw-status-page-child {
+    margin-top: var(--spacing-s);
+  }
+}

package/scss/_switch_row.scss

@@ -8,7 +8,6 @@
 
 adw-switch-row {
   .adw-row-title {
-    flex: 1;
     font-size: var(--font-size-base);
     color: var(--card-fg-color);
   }