@gjsify/adwaita-web 0.11.0 → 0.13.0

package/scss/_about_dialog.scss

@@ -0,0 +1,257 @@
+// _about_dialog.scss — adw-about-dialog styling (a modal AdwDialog floating
+// sheet hosting the About navigation view: a full-cover scrim + a centred,
+// rounded, scrollable sheet box). Mirrors libadwaita's AdwDialog floating-sheet
+// node tree (dimming + rounded sheet with the outline + layered shadow) and the
+// AdwAboutDialog main page layout (large icon, title-1 name, dimmed developer
+// line, the version pill, then the navigation rows).
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss
+//   (floating-sheet > dimming / > sheet radius + box-shadow + outline)
+// Reference: refs/libadwaita/src/adw-about-dialog.ui (page tree, content-width 360)
+// Reference: refs/adwaita-web/adwaita-web/scss/_about_dialog.scss (web layout)
+// Copyright (c) 2022-2024 GNOME Foundation Inc. / Purism SPC (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-about-dialog {
+  // The host is inert until presented; `.open` reveals the scrim + sheet.
+  display: none;
+
+  &.open {
+    display: block;
+  }
+
+  // --- Full-cover modal scrim ---
+  // libadwaita: floating-sheet > dimming { background shade-color × 2 }.
+  .adw-about-dialog-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    background-color: rgba(0, 0, 6, 0.32);
+    animation: adw-about-dialog-scrim-in 200ms ease;
+  }
+
+  // --- Centred floating sheet ---
+  // libadwaita: floating-sheet > sheet { dialog radius; layered shadow; 1px
+  // outline -1px offset }. content-width 360 → a comfortable ~360px sheet.
+  .adw-about-dialog-sheet {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 360px;
+    max-width: 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 14px 2px rgba(0, 0, 6, 0.03),
+      0 0 5px 2px rgba(0, 0, 6, 0.1),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
+    animation: adw-about-dialog-sheet-in 200ms cubic-bezier(0, 0, 0.2, 1);
+
+    &:focus {
+      outline: 1px solid var(--separator-color);
+      outline-offset: -1px;
+    }
+  }
+
+  // The navigation view fills the sheet; each page is a column.
+  adw-navigation-view,
+  .adw-navigation-view-pages,
+  .adw-navigation-page {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  // --- Toolbar view (flat header bar over the window background + scroller) ---
+  .adw-about-dialog-toolbar-view {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  // The dialog header bar is flat: transparent over the window background, no
+  // bottom separator (libadwaita: window.about headerbar.titlebar { flat }).
+  adw-header-bar {
+    background-color: transparent;
+    box-shadow: none;
+    min-height: 47px;
+  }
+
+  // The close button — a flat circular button drawing a "×" glyph (no
+  // window-close symbolic icon ships in @gjsify/adwaita-icons).
+  .adw-about-dialog-close {
+    width: 34px;
+    height: 34px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    line-height: 1;
+
+    &::before {
+      content: '\00d7'; // ×
+    }
+  }
+
+  // --- Scrolling content area ---
+  .adw-about-dialog-scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .adw-about-dialog-clamp {
+    width: 100%;
+    max-width: 360px;
+    margin-inline: auto;
+    box-sizing: border-box;
+  }
+
+  .adw-about-dialog-page-body {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 0 var(--spacing-m) var(--spacing-l);
+  }
+
+  // --- Main page header title: hidden until the content scrolls ---
+  // Mirrors AdwAboutDialog's update_headerbar_cb (show title once scrolled > 0).
+  .main-page {
+    adw-header-bar .adw-header-bar-title {
+      opacity: 0;
+      transition: opacity 150ms ease;
+    }
+
+    &.scrolled adw-header-bar .adw-header-bar-title {
+      opacity: 1;
+    }
+  }
+
+  // --- App icon (the large recessed glyph) ---
+  .adw-about-dialog-icon {
+    align-self: center;
+    width: 96px;
+    height: 96px;
+    margin-top: var(--spacing-s);
+    margin-bottom: var(--spacing-m);
+    // Mask-driven adw-icon scaled up to the about-dialog app-icon size.
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    background-color: currentColor;
+  }
+
+  // --- App name (title-1) ---
+  .adw-about-dialog-name {
+    align-self: center;
+    text-align: center;
+    font-size: 18pt;
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: var(--spacing-xs);
+  }
+
+  // --- Developer / vendor line ---
+  .adw-about-dialog-developer {
+    align-self: center;
+    text-align: center;
+    font-size: var(--font-size-base);
+    opacity: var(--dim-opacity);
+    margin-bottom: var(--spacing-m);
+  }
+
+  // --- Version pill ---
+  // libadwaita: .app-version { small accent chip }.
+  .adw-about-dialog-version {
+    align-self: center;
+    padding: 2px 12px;
+    margin-bottom: var(--spacing-l);
+    border-radius: 99px;
+    font-size: var(--font-size-small);
+    line-height: 1.4;
+    background-color: color-mix(in srgb, var(--accent-bg-color) 14%, transparent);
+    color: var(--accent-color);
+  }
+
+  // --- Row groups (Details / Credits / Legal navigation, link rows) ---
+  .adw-about-dialog-rows {
+    width: 100%;
+    margin-top: var(--spacing-m);
+
+    & + .adw-about-dialog-rows {
+      margin-top: var(--spacing-l);
+    }
+  }
+
+  // The trailing chevron / link affordance on a navigation or link row.
+  .adw-about-dialog-chevron {
+    width: 16px;
+    height: 16px;
+    opacity: var(--dim-opacity);
+  }
+
+  // --- Subpage content (Details / Credits / Legal) ---
+  .adw-about-dialog-comments {
+    margin: var(--spacing-s) 0 0;
+    font-size: var(--font-size-base);
+    line-height: 1.5;
+    text-align: start;
+    white-space: pre-wrap;
+  }
+
+  .adw-about-dialog-copyright {
+    margin: var(--spacing-s) 0 0;
+    font-size: var(--font-size-small);
+    opacity: var(--dim-opacity);
+    text-align: center;
+  }
+
+  .adw-about-dialog-license {
+    margin: var(--spacing-s) 0 0;
+    font-size: var(--font-size-small);
+    opacity: var(--dim-opacity);
+    text-align: center;
+
+    a {
+      color: var(--accent-color);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+@keyframes adw-about-dialog-scrim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes adw-about-dialog-sheet-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

package/scss/_action_row.scss

@@ -0,0 +1,65 @@
+// _action_row.scss — adw-action-row styling (title/subtitle + prefix/suffix).
+// Reference: refs/adwaita-web/adwaita-web/scss/_action_row.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_lists.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-action-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-m);
+  min-height: 50px;
+  padding: var(--spacing-s) var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+  color: var(--card-fg-color);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.activatable {
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--button-bg-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+  }
+
+  .adw-action-row-prefix,
+  .adw-action-row-suffix {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    flex-shrink: 0;
+  }
+
+  .adw-action-row-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .adw-row-title {
+    font-size: var(--font-size-base);
+    color: var(--card-fg-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .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;
+  }
+}

package/scss/_alert_dialog.scss

@@ -0,0 +1,151 @@
+// _alert_dialog.scss — adw-alert-dialog: a modal scrim + centred dialog box with
+// a bold heading, body text and a row/column of response buttons.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss (floating-sheet,
+//   AdwDialog sheet shadow + radius)
+// Reference: refs/adwaita-web/adwaita-web/scss/_dialog.scss (alert layout)
+// Reference: refs/libadwaita/src/adw-alert-dialog.c (response button layout)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented for @gjsify/adwaita-web Web Components.
+
+// Host: lay the scrim + box out as a full-cover overlay only while open.
+adw-alert-dialog {
+  display: none;
+
+  &.open {
+    display: block;
+  }
+}
+
+// The scrim — a fixed full-cover dimming layer behind the dialog box.
+.adw-alert-dialog-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+  background-color: rgba(0, 0, 6, 0.32);
+  // Centre the dialog box (the box is the scrim's flex child).
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-l);
+  // Mirror the AdwDialog present transition (a quick fade + scale).
+  animation: adw-alert-dialog-fade-in 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+// The dialog box — the AdwDialog "sheet": rounded window-colored surface with a
+// soft shadow + hairline outline, centred above the scrim.
+.adw-alert-dialog-box {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 1051;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 300px;
+  max-height: calc(100vh - 2 * var(--spacing-xl));
+  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 14px 2px rgba(0, 0, 6, 0.03),
+    0 0 5px 2px rgba(0, 0, 6, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+
+  font-family: var(--font-family);
+
+  animation: adw-alert-dialog-pop-in 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+// Wider layout when responses are laid out horizontally (prefer-wide-layout).
+.adw-alert-dialog-box:has(.adw-alert-dialog-responses.horizontal) {
+  max-width: 360px;
+}
+
+// The scrollable message area: heading + body + optional extra child.
+.adw-alert-dialog-message {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-l);
+  overflow-y: auto;
+}
+
+.adw-alert-dialog-heading {
+  margin: 0;
+  // Matches the GTK .title-2 typography style (bold heading).
+  font-size: 15pt;
+  font-weight: 800;
+  line-height: 1.3;
+  text-align: center;
+}
+
+.adw-alert-dialog-body {
+  margin: var(--spacing-s) 0 0;
+  font-size: var(--font-size-base);
+  line-height: 1.4;
+  text-align: center;
+}
+
+// Extra child slot, displayed below the body.
+.adw-alert-dialog-child {
+  margin-top: var(--spacing-m);
+
+  &:empty {
+    display: none;
+  }
+}
+
+// Response button area. Vertical (stacked) by default; horizontal when the
+// dialog opts into the wide layout.
+.adw-alert-dialog-responses {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  padding: var(--spacing-m) var(--spacing-l) var(--spacing-l);
+
+  &.horizontal {
+    flex-direction: row;
+    justify-content: stretch;
+
+    .adw-alert-dialog-response {
+      flex: 1 1 0;
+    }
+  }
+}
+
+// The response buttons — full-width pills within the stacked layout. They reuse
+// the .adw-button skin (incl. .suggested-action / .destructive-action), so only
+// the full width needs adding here. The default response is NOT accent-tinted —
+// libadwaita only colours suggested/destructive responses; the default one is
+// just the Enter-activated button and keeps the neutral button style.
+.adw-alert-dialog-response.adw-button {
+  width: 100%;
+  justify-content: center;
+}
+
+@keyframes adw-alert-dialog-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes adw-alert-dialog-pop-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

package/scss/_avatar.scss

@@ -0,0 +1,31 @@
+// _avatar.scss — adw-avatar styling (round, initials or fallback icon).
+// Reference: refs/adwaita-web/adwaita-web/scss/_avatar.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_avatar.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  box-sizing: border-box;
+  font-weight: 700;
+  user-select: none;
+  background-color: rgba(127, 127, 127, 0.25);
+  color: var(--window-fg-color);
+
+  .adw-avatar-text {
+    line-height: 1;
+    text-align: center;
+  }
+
+  .adw-avatar-icon {
+    background-color: currentColor;
+    opacity: 0.7;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+  }
+}

package/scss/_banner.scss

@@ -0,0 +1,46 @@
+// _banner.scss — adw-banner styling (full-width accent message strip).
+// Reference: refs/adwaita-web/adwaita-web/scss/_banner.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_banner.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-m);
+  padding: var(--spacing-xs) var(--spacing-m);
+  width: 100%;
+  box-sizing: border-box;
+  // Adw.Banner uses a neutral elevated surface, not the accent colour.
+  background-color: var(--sidebar-bg-color);
+  color: var(--window-fg-color);
+
+  // Adw.Banner stays hidden until revealed.
+  &:not(.revealed) {
+    display: none;
+  }
+
+  .adw-banner-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: var(--font-size-base);
+  }
+
+  .adw-banner-button {
+    flex-shrink: 0;
+    border: none;
+    border-radius: var(--button-radius);
+    padding: 4px 14px;
+    background: var(--button-bg-color);
+    color: var(--window-fg-color);
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    font-weight: 700;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--button-hover-color);
+    }
+  }
+}

package/scss/_bottom_sheet.scss

@@ -0,0 +1,113 @@
+// _bottom_sheet.scss — adw-bottom-sheet styling (a content area with a sheet
+// that slides up from the bottom edge over the content, with an overlaid drag
+// handle). Mirrors libadwaita's AdwBottomSheet CSS node tree: a persistent
+// content layer, a dimming layer that fades in over it while open (modal), and
+// the sheet itself anchored to the bottom edge with rounded top corners + the
+// pill-shaped drag handle.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_bottom-sheet.scss
+//   (dimming / sheet box-shadow / drag-handle pill / dialog top radius)
+// Reference: refs/libadwaita/src/adw-bottom-sheet.c (open / modal / can-close)
+// Copyright (c) 2023-2024 GNOME Foundation Inc. (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-bottom-sheet {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+
+  // --- Persistent content layer ---
+  .adw-bottom-sheet-content {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+  }
+
+  // --- Dimming layer (modal scrim over the content) ---
+  // libadwaita: > dimming { background: shade-color × 2 }. Non-interactive +
+  // transparent when the sheet is closed.
+  .adw-bottom-sheet-dimming {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    background-color: rgba(0, 0, 6, 0.32);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      opacity 200ms ease,
+      visibility 0s linear 200ms;
+
+    &.visible {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+      transition:
+        opacity 200ms ease,
+        visibility 0s;
+    }
+  }
+
+  // --- The slide-up sheet ---
+  // Anchored to the bottom edge, full-width, rounded top corners (dialog
+  // radius), slid off-screen when closed. The spring-driven AdwBottomSheet uses
+  // a translate; the web port uses an eased transform for the same effect.
+  .adw-bottom-sheet-sheet {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+    max-height: 100%;
+    overflow: auto;
+    background-color: var(--view-bg-color);
+    color: var(--view-fg-color);
+    border-top-left-radius: var(--window-radius);
+    border-top-right-radius: var(--window-radius);
+    box-shadow:
+      0 0 14px 2px rgba(0, 0, 6, 0.03),
+      0 0 5px 2px rgba(0, 0, 6, 0.1),
+      0 0 0 1px rgba(0, 0, 0, 0.05);
+    transform: translateY(100%);
+    transition:
+      transform 250ms ease,
+      box-shadow 250ms ease;
+    will-change: transform;
+  }
+
+  // --- Drag handle (overlaid pill at the top of the sheet) ---
+  // libadwaita: > drag-handle { min-width 54px; min-height 6px; margin 15px;
+  // border-radius 99px; background currentColor @ 25% }.
+  .adw-bottom-sheet-drag-handle {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: 54px;
+    min-height: 6px;
+    height: 6px;
+    margin: 15px auto;
+    border-radius: 99px;
+    background-color: color-mix(in srgb, currentColor 25%, transparent);
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 4px;
+    }
+  }
+
+  .adw-bottom-sheet-sheet-body {
+    box-sizing: border-box;
+  }
+
+  // --- Open state ---
+  &.open .adw-bottom-sheet-sheet {
+    transform: translateY(0);
+  }
+
+  // A non-modal sheet must not block the content beneath it.
+  &:not(.modal) .adw-bottom-sheet-dimming {
+    display: none;
+  }
+}