@gjsify/adwaita-web 0.53.0 → 0.55.0

package/scss/_spin_row.scss

@@ -1,16 +1,36 @@
 // _spin_row.scss — adw-spin-row styling.
 // Reference: refs/adwaita-web/adwaita-web/scss/_spin_button.scss
 // Reference: refs/libadwaita/src/stylesheet/widgets/_spin-button.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss (the `row.spin` block,
+//   :241-275, which is what the two stepper buttons are)
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Copyright (c) 2025 csm (adwaita-web). MIT License.
 // Modifications: Adapted for @gjsify/adwaita-web Web Components.
+//
+// NOT PORTED, and why:
+//   - `%button_basic`'s focus ring (`_buttons.scss:25`). `row.spin`'s OWN rule already
+//     takes the ring away from the entry (`&, &:focus { outline: none }`, :246-248) and
+//     asks the ROW to draw one instead (`row.entry, row.spin { @include focus-ring(...) }`,
+//     :277-279), so a per-button ring would double it.
+//   - `&:disabled { filter: Opacity(var(--disabled-opacity)) }` and the
+//     `&:disabled spinbutton > button… { filter: none }` that cancels it for these two
+//     buttons (:264-274). The port's steppers never get disabled: `AdwSpinRow` clamps at
+//     the bounds instead, and there is no `.disabled` to filter.
+//   - `font-weight: bold` from `%button_basic` (:23) — the glyphs here are text nodes, and
+//     `+`/`−` at bold weight is a different glyph size, not a bolder one.
+//   - The ENTRY still differs from upstream and is left alone here: `row.spin spinbutton`
+//     sets `background: none; box-shadow: none` (:242-244), so the native row's number
+//     field is flat card white, while `.adw-spin-control input` below still paints a
+//     10% grey fill and a 9px radius. A native pixel run over the row finds nothing but
+//     white between the title and the first stepper. That is the input's deviation, not
+//     the steppers', and it is a separate fix.
 
 adw-spin-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 50px;
-  padding: var(--spacing-s) var(--spacing-m);
+  min-height: 54px;
+  padding: 0 var(--spacing-m);
   gap: var(--spacing-m);
   border-bottom: 1px solid var(--card-shade-color);
 
@@ -27,14 +47,36 @@ adw-spin-row {
 .adw-spin-control {
   display: flex;
   align-items: center;
-  gap: 2px;
+  // `border-spacing: 6px` (refs/libadwaita/src/stylesheet/widgets/_lists.scss:242). GTK
+  // spreads the spinbutton's three boxes with it, so this is the 6px between the entry and
+  // the first stepper AND the 6px between the two — which, with the 2px margins below,
+  // is the 10px the native circles actually stand apart.
+  gap: 6px;
 
+  // `row.spin spinbutton > button.image-button.up/.down` (_lists.scss:250-262) extends
+  // `%button_basic` AND `%circular_button` (_buttons.scss:19-27, :312-320). It was a
+  // 32px rounded SQUARE on a transparent background, so both steppers read as flat
+  // 32px squares beside a GTK render of the same `.blp`. Measured natively
+  // (Adw.SpinRow, libadwaita 1.9.3, light, `Adw.PreferencesGroup` capture): each button is
+  // allocated 34x50 with min = nat, its painted area a 30px circle of flat
+  // rgb(235,235,235) with an rgb(47,47,52) glyph. 34x50 = the 30px floor plus
+  // `margin: 10px 2px`; and in a 54px row those margins put the circle at y=12..41,
+  // which is exactly where the native capture paints it.
   button {
-    width: 32px;
-    height: 32px;
+    // A FLOOR, not a size: upstream sets `min-width`/`min-height`, and a glyph wider than
+    // 30px grows the circle rather than overflowing it.
+    min-width: 30px;
+    min-height: 30px;
+    margin: 10px 2px;
+    padding: 0;
     border: none;
-    border-radius: var(--button-radius);
-    background: transparent;
+    // `%circular_button`'s `border-radius: 9999px`, beating `%button_basic`'s
+    // `var(--button-radius)`, which is what the 32px square drew before.
+    border-radius: 9999px;
+    // `%button_basic` pulls in `%button_basic_raised`'s background through the same nested
+    // `@at-root`, so these buttons are FILLED at rest — this is upstream's
+    // `$button_color` (_buttons.scss:1), the mix that resolves to the measured 235.
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
     color: var(--card-fg-color);
     cursor: pointer;
     font-size: 16px;
@@ -43,8 +85,14 @@ adw-spin-row {
     justify-content: center;
     flex-shrink: 0;
 
+    // `$button_hover_color` / `$button_active_color` (_buttons.scss:2-3). The rest state
+    // was transparent, so only the hover existed before and it was an unblended grey.
     &:hover {
-      background: rgba(128, 128, 128, 0.15);
+      background-color: color-mix(in srgb, currentColor 15%, transparent);
+    }
+
+    &:active {
+      background-color: color-mix(in srgb, currentColor 30%, transparent);
     }
   }
 

package/scss/_spinner.scss

@@ -1,7 +1,10 @@
-// _spinner.scss — adw-spinner styling.
+// _spinner.scss — the two spinners: <adw-spinner> and <gtk-spinner>. ONE partial
+// because upstream merges them too (refs/libadwaita/src/stylesheet/widgets/
+// _spinner.scss styles `spinner` and `image.spinner` in the same file), and because
+// they are two answers to one question rather than two widgets.
 //
-// Almost nothing is left here on purpose. The ring is an SVG the element draws
-// per frame from `@gjsify/adwaita-core`'s `spinnerArc`, because the arc BREATHES
+// Almost nothing is left for <adw-spinner> on purpose. The ring is an SVG the element
+// draws per frame from `@gjsify/adwaita-core`'s `spinnerArc`, because the arc BREATHES
 // (2.7 to 102.8 degrees) and CSS cannot express that: the `border-top-color`
 // chase this file used to carry was a fixed 90-degree quarter-circle at 0.8s
 // against libadwaita's 1.2s, with a hardcoded grey track and square-cut ends.
@@ -11,7 +14,7 @@
 // (adw-spinner.c:95-99 hands the widget's real size to the paintable, which caps
 // only the radius).
 //
-// There is deliberately NO `prefers-reduced-motion` rule. The C opts out of the
+// There is deliberately NO `prefers-reduced-motion` rule for it. The C opts out of the
 // animation setting explicitly (`adw_animation_set_follow_enable_animations_setting
 // (…, FALSE)`, adw-spinner-paintable.c:537) — a frozen busy indicator reads as a
 // hang. This file used to stop the animation there.
@@ -44,3 +47,81 @@ adw-spinner {
     flex: none;
   }
 }
+
+// <gtk-spinner> is the GTK picture, and it is CSS's job in a way the Adw one is not:
+// `process-working-symbolic.svg` is a STATIC quarter arc on a faint ring, and all
+// `GtkSvg` does is turn it (gtkspinner.c:158-171). So the geometry is fixed here and
+// only the rotation is animated — which is why this widget needs no per-frame ticker
+// and no `spinnerArc`.
+gtk-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  // GTK measures the `icon-size` CSS property and reports it as BOTH minimum and
+  // natural (gtkspinner.c:110-123); 16px is that icon's own intrinsic size.
+  width: 16px;
+  height: 16px;
+  color: inherit;
+
+  // `spinner:disabled { opacity: var(--disabled-opacity) }`
+  // (refs/libadwaita/src/stylesheet/widgets/_spinner.scss:1-3).
+  &[disabled] {
+    opacity: var(--disabled-opacity);
+  }
+
+  .adw-spinner-ring {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+  // Both strokes are `url(#gpa:foreground)` in the icon, i.e. the widget's text colour;
+  // `stroke-width: 2` and round caps are the icon's own, on a 16-unit viewBox.
+  .adw-spinner-track,
+  .adw-spinner-arc {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  // The icon's track path carries `stroke-opacity: 0.2`.
+  .adw-spinner-track {
+    stroke-opacity: 0.2;
+  }
+
+  // GTK puts the `:checked` pseudoclass on the node while `spinning` is set
+  // (gtkspinner.c:59-63), which is the only thing that distinguishes the turning arc
+  // from the standing one; the element writes `.checked` for exactly that.
+  //
+  // THE PERIOD IS THIS PORT'S. `GtkSvg` cycles the `.gpa`'s frames on the frame clock
+  // and the frame count lives in the icon, not in `gtkspinner.c`, so one turn per second
+  // is the honest place to land rather than a number quoted from nowhere.
+  &.checked .adw-spinner-arc {
+    animation: gtk-spinner-rotate 1s linear infinite;
+    transform-origin: center;
+  }
+
+  // Under reduced motion GTK loads `sand-watch.svg` — a STATIC hourglass — instead of
+  // the turning arc (gtkspinner.c:145-161). A browser has no icon loader, so the
+  // equivalent is holding the arc still. Note this is the OPPOSITE of <adw-spinner>
+  // above, and deliberately so.
+  @media (prefers-reduced-motion: reduce) {
+    &.checked .adw-spinner-arc {
+      animation: none;
+    }
+  }
+}
+
+@keyframes gtk-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}