@gjsify/adwaita-web 0.36.0 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.36.0",
+    "version": "0.37.0",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -41,14 +41,14 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "^0.36.0",
-        "@gjsify/adwaita-fonts": "^0.36.0",
-        "@gjsify/adwaita-icons": "^0.36.0",
+        "@gjsify/adwaita-core": "^0.37.0",
+        "@gjsify/adwaita-fonts": "^0.37.0",
+        "@gjsify/adwaita-icons": "^0.37.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.36.0",
-        "@gjsify/unit": "^0.36.0",
+        "@gjsify/cli": "^0.37.0",
+        "@gjsify/unit": "^0.37.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/scss/_about_dialog.scss

@@ -89,8 +89,9 @@ adw-about-dialog {
     min-height: 47px;
   }
 
-  // The close button — a flat circular button drawing a "×" glyph (no
-  // window-close symbolic icon ships in @gjsify/adwaita-icons).
+  // The close button — a flat circular button drawing a "×" glyph: the generated
+  // `.adw-icon--<name>` mask classes come from the ICONS map in scripts/build-scss.mjs,
+  // which has no window-close entry (the SVG itself does exist in @gjsify/adwaita-icons).
   .adw-about-dialog-close {
     width: 34px;
     height: 34px;

package/scss/_action_row.scss

@@ -63,3 +63,36 @@ adw-action-row {
     text-overflow: ellipsis;
   }
 }
+
+// `.property` SWAPS the emphasis of a row: the title becomes the small dimmed
+// label and the subtitle carries the value at full weight — a read-only property
+// rather than an action (style-classes.md "Property Rows", `_lists.scss:426-455`).
+//
+// It is written against the shared `.adw-row-title` / `.adw-row-subtitle` nodes,
+// so it works on every row type that renders them (action, expander header,
+// entry, switch), which is the same reach upstream gives it.
+adw-action-row.property,
+adw-expander-row.property {
+  .adw-row-title {
+    font-size: var(--font-size-small);
+    opacity: var(--dim-opacity);
+  }
+
+  .adw-row-subtitle {
+    font-size: var(--font-size-base);
+    opacity: 1;
+  }
+
+  // `.monospace` on a property row monospaces the VALUE only — the label and any
+  // suffix widget stay in the UI font (`_lists.scss:445-455`). Put `.monospace`
+  // on the list instead to get all of it.
+  &.monospace {
+    font-family: inherit;
+    font-size: inherit;
+
+    .adw-row-subtitle {
+      font-family: var(--monospace-font-family);
+      font-size: var(--monospace-font-size);
+    }
+  }
+}

package/scss/_avatar.scss

@@ -28,4 +28,16 @@ adw-avatar {
     -webkit-mask-size: contain;
     mask-size: contain;
   }
+
+  // `custom-image`. The avatar's own `border-radius: 50%` + `overflow: hidden`
+  // already clip it, so the image only has to FILL the box — `cover`, not
+  // `contain`, because GTK scales the paintable to the widget and crops inside a
+  // rounded clip, where `contain` would letterbox a non-square photo inside the
+  // circle.
+  .adw-avatar-custom-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }

package/scss/_button.scss

@@ -112,34 +112,56 @@ adw-button {
     padding: 6px 20px;
     border-radius: 9999px;
   }
-}
 
-// The symbolic icon (`.adw-icon`) used to be declared here, because the first
-// widget that needed one was the button. It is `scss/_icon.scss` now — every
-// other widget needs one too, and `<adw-icon>` is an element.
+  // Raised — the documented opt-OUT of the automatic flat appearance a button
+  // gets inside a `.toolbar` or a header bar (style-classes.md "Raised"). It is
+  // the default look, stated explicitly, so it must also beat `.flat` when both
+  // are present, the way `_toolbars.scss` treats it.
+  &.raised {
+    background-color: var(--button-bg-color);
 
-// Linked group — adjacent buttons share edges (segmented control).
-.adw-linked {
-  display: inline-flex;
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
 
-  > .adw-button,
-  > adw-button .adw-button {
-    border-radius: 0;
+    &:active {
+      background-color: var(--button-active-color);
+    }
   }
 
-  > :first-child .adw-button,
-  > .adw-button:first-child {
-    border-top-left-radius: var(--button-radius);
-    border-bottom-left-radius: var(--button-radius);
-  }
+  // OSD — a standalone button overlapping content (style-classes.md "OSD ›
+  // Overlay Buttons"). `_common.scss:44` excludes buttons from the generic OSD
+  // surface precisely so this can define what `.osd` means for one:
+  // `_buttons.scss:111-135` gives it a dark translucent background whose hover
+  // and active states mix TOWARDS the foreground rather than changing alpha, so
+  // it stays readable over any content. It composes with `.circular` / `.pill`.
+  &.osd {
+    min-height: 32px;
+    min-width: 32px;
+    color: rgb(255 255 255 / 90%);
+    background-color: rgb(0 0 0 / 65%);
+
+    @media (prefers-contrast: more) {
+      box-shadow: 0 0 0 1px currentColor;
+    }
 
-  > :last-child .adw-button,
-  > .adw-button:last-child {
-    border-top-right-radius: var(--button-radius);
-    border-bottom-right-radius: var(--button-radius);
-  }
+    &:hover {
+      color: #ffffff;
+      background-color: color-mix(in srgb, black calc(0.85 * 65%), currentColor calc(0.15 * 65%));
+    }
 
-  > * + * {
-    margin-left: 2px;
+    &:active {
+      color: #ffffff;
+      background-color: color-mix(in srgb, black calc(0.75 * 65%), currentColor calc(0.25 * 65%));
+    }
   }
 }
+
+// The symbolic icon (`.adw-icon`) used to be declared here, because the first
+// widget that needed one was the button. It is `scss/_icon.scss` now — every
+// other widget needs one too, and `<adw-icon>` is an element.
+
+// The linked group is `scss/_style_classes.scss` now, under libadwaita's own
+// `.linked` name (with `.adw-linked` kept as an alias): the documented class is
+// what a consumer reading style-classes.md reaches for, and it applies to
+// entries and drop-downs too, not only to buttons.

package/scss/_card.scss

@@ -1,20 +1,23 @@
 // _card.scss — adw-card styling.
+//
+// The card SURFACE (colours, radius, elevation) is `%card` in
+// `_style_classes.scss`, shared with the documented `.card` class and with
+// `.boxed-list`; this element adds only what makes it an element: a block box
+// and the padding a bare `.card` deliberately does not have.
+//
 // Reference: refs/adwaita-web/adwaita-web/scss/_card.scss
-// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss:197-236
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
+@use 'style_classes';
+
 adw-card,
 .adw-card {
+  @extend %card;
+
   display: block;
-  background-color: var(--card-bg-color);
-  color: var(--card-fg-color);
-  border-radius: var(--card-radius);
   padding: var(--spacing-l);
-  box-shadow:
-    0 0 0 1px rgb(0 0 6 / 3%),
-    0 1px 3px 1px rgb(0 0 6 / 7%),
-    0 2px 6px 2px rgb(0 0 6 / 3%);
   overflow: hidden;
 }

package/scss/_checks.scss

@@ -161,12 +161,10 @@ adw-radio {
     }
   }
 
-  // `&:disabled { filter: Opacity(var(--disabled-opacity)) }` (:62-64). This
-  // package defines no `--disabled-opacity`, so `--dim-opacity` stands in — the
-  // same substitution `_switch.scss` documents.
+  // `&:disabled { filter: Opacity(var(--disabled-opacity)) }` (:62-64).
   &[disabled] {
     cursor: not-allowed;
-    opacity: var(--dim-opacity);
+    opacity: var(--disabled-opacity);
   }
 
   // `@include focus-ring()` on `checkbutton` (:8). The ring follows the real

package/scss/_dialog.scss

@@ -108,8 +108,9 @@ adw-dialog {
     padding: 0 6px;
   }
 
-  // Round flat close button drawing a CSS "×" glyph (no window-close symbolic
-  // ships in @gjsify/adwaita-icons — same approach as <adw-preferences-dialog>).
+  // Round flat close button drawing a CSS "×" glyph: `windowCloseSymbolic` exists in
+  // @gjsify/adwaita-icons, but the generated `.adw-icon--<name>` mask classes come from
+  // the ICONS map in scripts/build-scss.mjs, which has no window-close entry.
   .adw-dialog-close {
     appearance: none;
     border: none;

package/scss/_headerbar.scss

@@ -76,3 +76,26 @@ adw-header-bar {
     }
   }
 }
+
+// `.devel` on the WINDOW gives every header bar inside it a striped background —
+// the marker for a nightly or unstable build (style-classes.md "Development
+// Window", `_toolbars.scss:345-354`).
+//
+// Upstream cross-fades a 5% recoloured SVG (`assets/devel-stripes.svg`) and
+// masks it so it fades out downwards. The stripe geometry is read off that
+// asset: a 64px tile, 32px of stripe per period, leaning left as it descends.
+//
+// The fade is the top LAYER here rather than a mask: `mask-image` on the bar
+// would fade its title and buttons with the stripes, and a masked pseudo-element
+// would paint over them. Washing the stripes out with the bar's own opaque
+// background colour renders identically and leaves the content alone.
+.devel adw-header-bar,
+adw-window.devel adw-header-bar {
+  background-image:
+    linear-gradient(to bottom, transparent 0%, var(--headerbar-bg-color) 100%),
+    repeating-linear-gradient(
+      116.565deg,
+      color-mix(in srgb, currentColor 5%, transparent) 0 32px,
+      transparent 32px 64px
+    );
+}

package/scss/_popover.scss

@@ -74,7 +74,13 @@ adw-popover {
 
   // `popover.menu > contents { padding: 0 }` + `$menu_margin` on the item box
   // (_menus.scss:58-66), flattened onto the single surface node.
-  &[menu] {
+  //
+  // `[menu]` is the attribute the element sets; `.menu` is the name libadwaita
+  // DOCUMENTS for the same thing (style-classes.md "Menu Popovers"). Both are
+  // accepted, because a consumer following the upstream documentation reaches
+  // for the class and would otherwise get an 8px inset and no explanation.
+  &[menu],
+  &.menu {
     padding: 6px;
   }
 
@@ -165,9 +171,7 @@ adw-popover {
   }
 
   &[disabled] {
-    // `--disabled-opacity` is libadwaita's own variable (_colors.scss:320,
-    // 50%); this port does not define it yet, so the fallback carries the value.
-    opacity: var(--disabled-opacity, 0.5);
+    opacity: var(--disabled-opacity);
     pointer-events: none;
   }
 }

package/scss/_preferences.scss

@@ -5,6 +5,8 @@
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
 
+@use 'style_classes';
+
 adw-preferences-group {
   display: block;
 
@@ -74,14 +76,12 @@ adw-preferences-group {
     color: var(--window-fg-color);
   }
 
+  // A preferences group's list IS a boxed list — same card surface, same clip
+  // for the rounding of the first and last row. It used to carry its own copy of
+  // the five card declarations.
   .adw-preferences-group-listbox {
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
-    border-radius: var(--card-radius);
-    box-shadow:
-      0 0 0 1px rgb(0 0 6 / 3%),
-      0 1px 3px 1px rgb(0 0 6 / 7%),
-      0 2px 6px 2px rgb(0 0 6 / 3%);
+    @extend %card;
+
     overflow: hidden;
   }
 }

package/scss/_progress_bar.scss

@@ -84,11 +84,9 @@ adw-progress-bar {
     font-size: smaller;
   }
 
-  // `&:disabled { filter: Opacity(var(--disabled-opacity)) }` (:23-25). This
-  // package defines no `--disabled-opacity`, so `--dim-opacity` stands in — the
-  // same substitution `_switch.scss` documents, not a fourth invented token.
+  // `&:disabled { filter: Opacity(var(--disabled-opacity)) }` (:23-25).
   &[disabled] {
-    opacity: var(--dim-opacity);
+    opacity: var(--disabled-opacity);
   }
 
   // Fill from the far end. GTK spells this `:inverted`; flexbox handles the
@@ -104,8 +102,13 @@ adw-progress-bar {
   }
 
   // The `.osd` variant (:59-83): a hairline bar with no trough at all, the way
-  // it is drawn under a header bar.
-  &[osd] {
+  // it is drawn under a header bar. `[osd]` is the attribute this element takes;
+  // `.osd` is libadwaita's DOCUMENTED spelling for the same variant, and
+  // `_style_classes.scss` excludes `adw-progress-bar` from the generic OSD
+  // surface exactly so the class lands here instead of turning the bar into a
+  // dark translucent box.
+  &[osd],
+  &.osd {
     min-width: 2px;
 
     .adw-progress-bar-trough {

package/scss/_reset.scss

@@ -39,7 +39,7 @@ $adw-components:
   adw-navigation-split-view, adw-navigation-view, adw-overlay-split-view,
   adw-password-entry-row, adw-popover, adw-preferences-dialog,
   adw-preferences-group, adw-preferences-page, adw-progress-bar, adw-radio,
-  adw-sidebar, adw-sidebar-item,
+  adw-shortcut-label, adw-sidebar, adw-sidebar-item,
   adw-sidebar-section, adw-source-view, adw-spinner, adw-spin-row,
   adw-split-button, adw-status-page, adw-switch, adw-switch-row,
   adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group,

package/scss/_shortcut_label.scss

@@ -0,0 +1,80 @@
+// _shortcut_label.scss — <adw-shortcut-label> and its keycaps.
+//
+// TWO SOURCES, AND WHY ONLY ONE IS FOLLOWED. libadwaita styles the widget in
+// `_shortcuts-dialog.scss:33-58`: a 6px `border-spacing` at both levels (between
+// the boxes AND between the keycaps inside one), keycaps filled with 10% of the
+// current colour, an inset bottom shadow that reads as a key's edge, a 6px
+// radius, 6px padding and a 20px minimum width — plus `> .dimmed { padding: 6px
+// 0 }` so a separator lines up with the caps beside it.
+//
+// `refs/adwaita-web/adwaita-web/scss/_shortcut_label.scss` styles ONE outlined
+// tag for the whole shortcut: monospace, a border, small text, and an empty
+// `kbd, .keycap {}` block with a comment saying the real thing has per-keycap
+// styling. It is a placeholder for this widget, not a port of it, so nothing is
+// taken from it — the geometry above is libadwaita's.
+//
+// The keycap fill is `currentColor`-relative, so a shortcut label inside a
+// dimmed or coloured context stays legible without a second token.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_shortcuts-dialog.scss:33-58
+// Reference: refs/adwaita-web/adwaita-web/scss/_shortcut_label.scss (NOT followed — see above)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components; GTK's
+//   `border-spacing` on a box becomes flex `gap`.
+
+adw-shortcut-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 6px;
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 1px;
+  }
+
+  // One combination — the keycaps of a single accelerator. Its own 6px gap is
+  // the second `border-spacing` in `&, > box { border-spacing: 6px }` (:37-39).
+  .adw-shortcut-label-keys {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .keycap {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 20px;
+    padding: 6px;
+    border-radius: 6px;
+    background: color-mix(in srgb, currentColor 10%, transparent);
+    box-shadow: inset 0 -2px var(--card-shade-color);
+
+    @media (prefers-contrast: more) {
+      box-shadow:
+        inset 0 -2px var(--card-shade-color),
+        0 0 0 1px var(--border-color);
+    }
+  }
+
+  // The `L` / `R` of a sided modifier key — `%s <small><b>%s</b></small>` in the
+  // C (adw-shortcut-label.c:195), i.e. smaller and bold, riding along inside the
+  // same keycap rather than being a cap of its own.
+  .adw-shortcut-label-side {
+    margin-inline-start: 2px;
+    font-size: 82%;
+    font-weight: 700;
+    // `<sub>` lowers the baseline by default; the marker is part of the key's
+    // label, not a subscript of a formula.
+    vertical-align: baseline;
+    bottom: 0;
+  }
+
+  // `> .dimmed { padding: 6px 0 }` (:55-57) — the separators and the
+  // disabled-text placeholder, aligned with the keycaps' text.
+  > .dimmed {
+    padding: 6px 0;
+  }
+}

package/scss/_sidebar.scss

@@ -218,3 +218,60 @@ adw-sidebar {
     }
   }
 }
+
+// `.navigation-sidebar` — the documented class a consumer puts on its OWN list
+// to get the sidebar look without `<adw-sidebar>`: transparent background,
+// rounded and padded items, and a NEUTRAL selection instead of an accent one
+// (style-classes.md "Sidebars", `_sidebars.scss:113-205`).
+//
+// `<adw-sidebar>` renders the same look from its own structure classes above; it
+// is not rewritten in terms of this class, because its rows carry an icon,
+// title, subtitle and arrow that a bare list does not have. What IS shared is
+// the metric: `$menu_margin` (6px) around the list and on each row, and
+// `$button_radius` corners.
+.navigation-sidebar {
+  &,
+  &.view,
+  &.view:disabled {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  &.background {
+    background-color: var(--window-bg-color);
+    color: var(--window-fg-color);
+  }
+
+  padding-top: var(--spacing-xs);
+  // 6px minus the last row's own 2px margin, upstream's `$menu_margin - 2px`.
+  padding-bottom: 4px;
+
+  > * {
+    margin: 0 var(--spacing-xs) 2px;
+    padding: 3px 14px;
+    border-radius: var(--button-radius);
+  }
+
+  > .activatable {
+    &:hover {
+      background-color: color-mix(in srgb, currentColor 7%, transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in srgb, currentColor 16%, transparent);
+    }
+  }
+
+  > [aria-selected='true'],
+  > .selected {
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+
+    &:hover {
+      background-color: color-mix(in srgb, currentColor 13%, transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in srgb, currentColor 19%, transparent);
+    }
+  }
+}

package/scss/_status_page.scss

@@ -37,4 +37,24 @@ adw-status-page {
   .adw-status-page-child {
     margin-top: var(--spacing-s);
   }
+
+  // `.compact` — the documented smaller status page, for a sidebar or a popover
+  // (style-classes.md "Compact Status Page"). Upstream drops the outer margins
+  // 36px → 24px, the icon 128px → 96px and the title from `.title-1` to
+  // `.title-2` (`_misc.scss:154-172`); this port's resting icon is already 96px
+  // because it renders at the size the vendored web port used, so `.compact`
+  // steps down from there in the same proportion.
+  &.compact {
+    gap: var(--spacing-s);
+    padding: var(--spacing-m);
+
+    .adw-status-page-icon {
+      width: 72px;
+      height: 72px;
+    }
+
+    .adw-status-page-title {
+      font-size: 14pt;
+    }
+  }
 }