@gjsify/adwaita-web 0.53.0 → 0.55.0

package/scss/_password_entry.scss

@@ -0,0 +1,83 @@
+// _password_entry.scss — <gtk-password-entry>: an `entry.password` box with a Caps Lock
+// warning leading and a peek button trailing.
+//
+// libadwaita styles `entry` and `entry.password` in ONE partial (_entries.scss:1-96), and the
+// password half is four rules: the entry shape itself, `> image { opacity: 70% }` for the
+// icons inside an entry (:42-61), and `&.password image.caps-lock-indicator { opacity:
+// $dimmer_opacity }` (:63-69). Everything else here is the box this package's
+// `_entry.scss` already gives `gtk-entry`, restated because the Caps Lock indicator is a
+// TEXT glyph rather than a masked icon and would otherwise take the entry's own padding.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_entries.scss:1-96
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-password-entry {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 34px;
+  padding: 0 9px;
+  border-radius: var(--button-radius);
+  background-color: var(--button-bg-color);
+  background-clip: padding-box;
+  caret-color: currentColor;
+
+  @media (prefers-contrast: more) {
+    box-shadow: inset 0 0 0 1px var(--border-color);
+  }
+
+  // The entry shape `_entry.scss` gives the inner input, narrowed to this widget's own parts.
+  .adw-entry {
+    flex: 1;
+    min-width: 0;
+    min-height: auto;
+    padding: 6px 0;
+    background-color: transparent;
+    box-shadow: none;
+
+    &:focus,
+    &:focus-visible {
+      box-shadow: none;
+    }
+  }
+
+  // `&.password image.caps-lock-indicator { opacity: $dimmer_opacity }` (:63-69). The glyph
+  // is text — `caps-lock-symbolic` is in no icon theme this renderer can compile — so it is
+  // DIMMED rather than masked, and it carries the canonical name in `data-icon-name`.
+  .adw-password-entry-caps-lock {
+    flex: none;
+    margin-right: 6px;
+    color: currentColor;
+    opacity: 0.45;
+    font-size: var(--font-size-base);
+    line-height: 1;
+
+    @media (prefers-contrast: more) {
+      opacity: 0.6;
+    }
+  }
+
+  // `> image { … &.right { margin-left: 6px } }` (:42-61): the icons inside an entry are at
+  // 70% and go to 100% on hover, which is the rule the peek button is a `gtk-image` for.
+  .adw-password-entry-peek {
+    flex: none;
+    margin-left: 6px;
+    opacity: 70%;
+    color: inherit;
+
+    @media (prefers-contrast: more) {
+      opacity: 85%;
+    }
+
+    &:hover {
+      opacity: 100%;
+    }
+
+    &:active {
+      opacity: 80%;
+    }
+  }
+}

package/scss/_picture.scss

@@ -0,0 +1,80 @@
+// _picture.scss — <gtk-picture>: the fit box, and the isolation boundary.
+//
+// libadwaita has NO `_picture.scss` of its own. Its only `picture` rule is a conditional
+// inside a card's selector (`refs/libadwaita/src/stylesheet/widgets/_tab-view.scss:216`,
+// `&.card > picture`), because a picture needs no styling of its own until a card asks for
+// rounded corners. So everything structural below comes from the C, and the header of
+// `gtk-picture.ts` says which C.
+//
+// WHY `object-fit` GOES ON THE CHILD AND NOT HERE. The four `GtkContentFit` members ARE
+// the four CSS `object-fit` values, including `scale-down` (gtkpicture.c:162-167), so the
+// mapping is exact rather than approximate — but `object-fit` applies to a REPLACED element's
+// content box, and `<gtk-picture>` is a `<div>` with no content of its own. The element
+// therefore writes `--gtk-picture-content-fit` and this rule hands it down with the explicit
+// `inherit` keyword, which takes the parent's computed value whether or not the property is
+// an inherited one.
+//
+// `can-shrink` IS THE MEASURE, AND `min-content` IS ITS OPPOSITE. A picture that may shrink
+// reports a minimum of ZERO on both axes whatever the paintable is (gtkpicture.c:245-248);
+// a picture that may not asks the paintable for a CONCRETE minimum — its own minimum at the
+// style's icon size (gtkpicture.c:249-254) — which is what `min-content` is for a replaced
+// element with an intrinsic size. The class is set from the NORMALIZED property, so a
+// `can-shrink="false"` attribute and `canShrink = false` agree, and an absent attribute is
+// TRUE (the C's own default, gtkpicture.c:554) rather than falling into the `min-content`
+// branch by accident.
+//
+// `isolation: isolate` IS `gtk_snapshot_push_isolation`. The property brackets the snapshot
+// (gtkpicture.c:148-149, :203-204), which stops the paintable's alpha compositing against
+// whatever is behind the widget WITHOUT changing how the widget is positioned or sized —
+// `contain: paint` would also establish a boundary and would additionally make the element a
+// containing block for fixed and absolutely positioned descendants, which
+// `push_isolation` does not do.
+//
+// `overflow: hidden` is not a styling choice: it is `gtk_widget_set_overflow (widget,
+// GTK_OVERFLOW_HIDDEN)` in `init` (gtkpicture.c:557), which is what makes `cover` clip its
+// overflow instead of painting outside the box.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_tab-view.scss:216 (the only upstream
+//   `picture` rule, a card's conditional rounded corner)
+// Reference: refs/gtk/gtk/gtkpicture.c:146-205,245-254,538-557
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-picture {
+  display: inline-flex;
+
+  // `gtk_widget_set_overflow (widget, GTK_OVERFLOW_HIDDEN)` (gtkpicture.c:557).
+  overflow: hidden;
+
+  // `GtkPicture:isolate-contents` (gtkpicture.c:538-549, :555) as the stacking boundary
+  // `gtk_snapshot_push_isolation` creates (gtkpicture.c:148-149).
+  isolation: isolate;
+
+  // The content fit, handed to the replaced child below. `fill` is the C's first branch
+  // (gtkpicture.c:146) and the initial value of the custom property, so a picture with no
+  // `content-fit` written yet and no stylesheet loaded behaves like the C's default arm
+  // rather than like a broken one.
+  --gtk-picture-content-fit: fill;
+
+  &:not(.can-shrink) {
+    // `gtk_picture_measure`'s `else` arm (gtkpicture.c:249-254): the paintable's own
+    // concrete minimum, which is `min-content` for a replaced element.
+    min-width: min-content;
+    min-height: min-content;
+  }
+
+  // The four `GtkContentFit` members are the four CSS values (gtkpicture.c:146-205). The
+  // replaced-element list is what `GdkPaintable` can stand in for here: an image, a video
+  // frame (which is exactly what `<gtk-video>` puts inside its own picture), a canvas, an
+  // inline SVG.
+  > :is(img, video, canvas, picture, svg) {
+    object-fit: var(--gtk-picture-content-fit);
+
+    // The element is `display: inline-flex`, so a replaced child is a flex item and gets
+    // `min-width: auto` — the same "never smaller than my content" floor a flex row gives,
+    // which would defeat `can-shrink` before `min-content` was ever consulted.
+    min-width: 0;
+    min-height: 0;
+  }
+}

package/scss/_popover_bin.scss

@@ -0,0 +1,53 @@
+// _popover_bin.scss — <gtk-popover-bin>: the container around a widget that owns a popover.
+//
+// libadwaita has NO `popoverbin` rule — the node is new in GTK 4.22
+// (`gtk_widget_class_set_css_name (widget_class, "popoverbin")`, gtkpopoverbin.c:382) and
+// libadwaita 1.10 never styles it. So this partial is small on purpose, and the claim it
+// makes is exactly what GTK does with the class GTK ITSELF puts on the child:
+//
+//   `on_popover_map` / `on_popover_unmap` (gtkpopoverbin.c:117-126) add and remove
+//   `.has-open-popup` on the bin's CHILD, and libadwaita's `_lists.scss:57` comments that
+//   class as "indicathing which row generated a popover" — a list row and a sidebar row
+//   (`:132`) both keep their selected tint while their popup is up.
+//
+// The rules below are therefore the two libadwaita ALREADY ships, restated against this
+// package's tokens, because this package spells a row as a custom element rather than as
+// GTK's `row` node. Both values are libadwaita's own:
+//
+//   row.activatable.has-open-popup        background-color: $view_hover_color;
+//   row.activatable:selected.has-open-popup  $view_selected_hover_color;
+//
+// A bin whose child is a `<gtk-list-box-row>` or a `<gtk-button>` therefore stays highlighted
+// while its menu is open, which is the whole reason the class exists and the reason this
+// element toggles it rather than merely mirroring GTK's signal wiring.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss:57, :64 (`row.has-open-popup`)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_sidebars.scss:132 (the sidebar row)
+// Reference: refs/gtk/gtk/gtkpopoverbin.c:117-126 (`.has-open-popup` on the child)
+// Copyright (c) GNOME contributors (GTK, libadwaita). LGPLv2.1+
+// Modifications: Adapted for the @gjsify/adwaita-web light-DOM custom elements.
+
+// The bin itself draws nothing: it is a bin layout holding one child and the popover, and
+// `gtk_popover_bin_compute_expand` (gtkpopoverbin.c:289-306) simply forwards the child's
+// expand to the bin. A `display: inline-flex` here would be an invented box, and the one
+// thing it must not do is take the popover out of flow — `_popover.scss` already positions
+// it absolutely against this element.
+.adw-popover-bin {
+  position: relative;
+}
+
+// `row.activatable.has-open-popup { background-color: $view_hover_color }`
+// (_lists.scss:57). `view-hover-color` is the token `_lists.scss` uses for an activatable
+// row under the pointer, which is the closest thing this package has to a row that is
+// "activated" by a popup it did not ask for.
+.adw-popover-bin > .has-open-popup {
+  background-color: var(--view-hover-color, var(--button-hover-color));
+}
+
+// `_lists.scss:64` — the same, for a row that is ALSO selected: libadwaita darkens to
+// `$view_selected_hover_color` rather than repeating the plain hover colour, which is what
+// keeps a selected row readable while its popup covers the list.
+.adw-popover-bin > .has-open-popup[aria-selected='true'],
+.adw-popover-bin > .has-open-popup.selected {
+  background-color: var(--view-selected-hover-color, var(--button-hover-color));
+}

package/scss/_popover_menu_bar.scss

@@ -0,0 +1,104 @@
+// _popover_menu_bar.scss — <gtk-popover-menu-bar>: a horizontal bar of items that pop up
+// a menu when clicked.
+//
+// libadwaita styles `menubar` in ONE place — the tail of `_menus.scss:244-269`, beside the
+// `popover.menu` rules rather than in a file of its own — so this partial holds that block
+// and nothing else. The values are libadwaita's:
+//
+//   menubar                  box-shadow: inset 0 -1px $border_color; padding-bottom: 1px;
+//   menubar > item           min-height: 16px; padding: 4px 8px;
+//                            border-radius: $button_radius (9px, `_common.scss:8`);
+//   menubar > item:selected  background-color: $selected_color, plus the
+//                            `prefers-contrast: more` inset hairline.
+//
+// `:selected` is GTK's keyboard-highlight pseudo-class, which has no DOM counterpart: it is
+// the SELECTED item (`set_active_item` sets and unsets `GTK_STATE_FLAG_SELECTED`,
+// gtkpopovermenubar.c:145-152), and this package spells it `.selected` for the same reason
+// `.checked` stands in for `:checked` elsewhere. The hover and focus states are this
+// element's own addition, not libadwaita's: the upstream rule keys only on `:selected`
+// (with the comment "seems like it :hover even with keyboard focus"), and a DOM item takes
+// real focus where a GTK item is merely highlighted, so without them a keyboard reader would
+// see nothing move at all.
+//
+// NOTHING ELSE IS HERE, and the omissions are load-bearing. Each item's popover is a
+// `<gtk-popover-menu>`, so its surface, its 15px radius and its item rows are
+// `_popover.scss`'s — which is the point of this partial being small. The NESTED SUBMENU
+// rules libadwaita adds under `> item` (`popover.menu popover.menu` drops its top radius,
+// _menus.scss:257-263) are NOT ported: they exist to flatten the seam where two popovers
+// OVERLAP, and this port's surfaces never do — placement is the `position`/`align` pair
+// with a 6px gap, so there is no seam to flatten.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_menus.scss:244-269 (`menubar`)
+// Reference: refs/libadwaita/src/stylesheet/_common.scss:8 ($button_radius)
+// Reference: refs/gtk/gtk/gtkpopovermenubar.c:38-51 (the node tree and `.active`)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+
+// Modifications: Adapted for the @gjsify/adwaita-web light-DOM custom elements —
+//   `menubar > item` becomes `.adw-popover-menu-bar-item`, whose BUTTON is the `item`, and
+//   `:selected` becomes `.selected`.
+
+.adw-popover-menu-bar {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  box-shadow: inset 0 -1px var(--separator-color, rgba(0, 0, 0, 0.15));
+  padding-bottom: 1px;
+
+  // The wrapper carries GTK's `item` NODE, which is the positioning context the popover
+  // hangs off — `<gtk-popover>` places itself against `parentElement`, and this is it.
+  .adw-popover-menu-bar-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .adw-popover-menu-bar-button {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    min-height: 16px;
+    padding: 4px 8px;
+    margin: 0;
+    border: none;
+    border-radius: var(--button-radius);
+    background-color: transparent;
+    color: inherit;
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+
+    // The two states libadwaita and the DOM each contribute: `.selected` for GTK's
+    // `:selected`, `:hover`/`:focus` because a DOM item takes focus where a GTK item is
+    // merely highlighted.
+    &.selected,
+    &:hover,
+    &:focus {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    @media (prefers-contrast: more) {
+      &.selected,
+      &:hover,
+      &:focus,
+      &:active {
+        box-shadow: inset 0 0 0 1px var(--separator-color);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 1px;
+    }
+  }
+
+  // `.active` is the item whose POPOVER IS OPEN, not the selected one
+  // (gtkpopovermenubar.c:50-51), so hovering the bar selects without lighting anything and
+  // the bar looks lit exactly while its menu is up.
+  .adw-popover-menu-bar-item.active > .adw-popover-menu-bar-button {
+    background-color: var(--button-active-color);
+  }
+}

package/scss/_preferences_row.scss

@@ -0,0 +1,51 @@
+// _preferences_row.scss — <adw-preferences-row>, the base of every boxed-list row.
+//
+// The row is a GTK `row` node inside the group's list, so its box comes from two places
+// in `_lists.scss`: `row` itself (a focus ring, `background-clip: padding-box`, and the
+// hover/active/selected colours under `.activatable`) and `list > row { padding: 2px }`
+// (:23-25). The metrics below are this package's shared row floor — the 50px minimum and
+// the card-fg hairline every `_row.scss` row uses — because libadwaita's own row height
+// is its theme's and a browser needs the number written down.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss:1-90 (`row`, `list > row`)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_preferences.scss (the group's card)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components — the GTK `row` node
+//   becomes the tag, and `:selected` becomes the row surface `<adw-preferences-group>`'s
+//   list box already paints.
+
+adw-preferences-row {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: var(--spacing-s) var(--spacing-m);
+  gap: var(--spacing-m);
+  background-clip: padding-box;
+  color: var(--card-fg-color);
+  // The hairline between rows, which `_lists.scss` draws as
+  // `&:not(.horizontal) > row:not(.separator) { border-bottom: 1px solid $border_color }`
+  // (:32-34) — on the row, from the list it belongs to.
+  border-bottom: 1px solid var(--card-shade-color);
+
+  // `Gtk.Label:selectable` is `user-select: text`, and the element writes it on the
+  // title span itself; this is the row-level floor so a copyable title survives a
+  // stylesheet that resets selection.
+  .adw-row-title {
+    user-select: none;
+  }
+
+  // The slot the `child` property lands in: the preference's own controls, which sit
+  // after the title and take the rest of the row.
+  .adw-preferences-row-content {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-m);
+    flex: 1 1 auto;
+    min-width: 0;
+    justify-content: flex-end;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+}