@gjsify/adwaita-web 0.54.0 → 0.56.0

package/scss/_color_button.scss

@@ -0,0 +1,67 @@
+// _color_button.scss — `<gtk-color-dialog-button>`: the `button.color` node and the
+// swatch it holds.
+//
+// THE SWATCH IS NOT LIBADWAITA'S, and saying so is the point of this partial. GTK paints
+// the `GtkColorSwatch` from GTK's OWN theme — libadwaita's `_color-chooser.scss` styles the
+// `colorchooser` popover, and `grep` finds no rule for the swatch or for `colorbutton` at
+// all. So what upstream does have is this:
+//
+//   · the node `colorbutton > button.color` and the `.color` style class
+//     (gtkcolordialogbutton.c:63-70, :163) — which is what puts the button in the
+//     `.linked` group and makes it square;
+//
+// and what this partial adds is the geometry `gtk_color_dialog_button_init` asks for: a
+// swatch as wide as the word "Black" rendered at the base size and as tall as its line
+// (:139-148). 24x18 is that box at the base font size, so the button around it is the
+// usual 34px-tall button.
+//
+// THE TRANSLUCENT CLAUSE IS GTK's own drawing, keyed off the element's `data-translucent`:
+// `GtkColorSwatch` draws a checkerboard under a colour with alpha, and `rgba_to_gdk_rgba`
+// is how it decides. A browser has no such thing, and a translucent colour on a plain
+// background is unreadable without one.
+//
+// Reference: refs/gtk/gtk/gtkcolordialogbutton.c:63-70 (the node), :139-163 (the swatch,
+//   the `.color` class), :329-347 (the accessible name's rounding)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_linked.scss:6 (`colorbutton > button`)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web — the swatch is a `<span>` painted with
+//   `background-color`, and its checkerboard is this package's drawing of GtkColorSwatch.
+
+gtk-color-dialog-button {
+  display: inline-flex;
+}
+
+.color-button-swatch {
+  display: block;
+  width: 24px;
+  height: 18px;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px var(--shade-color);
+  // The checkerboard, only while the colour is translucent — the element writes
+  // `data-translucent` from `rgba[3] < 1`, which is GtkColorSwatch's own test.
+  &[data-translucent='true'] {
+    background-image:
+      linear-gradient(45deg, rgb(0 0 6 / 12%) 25%, transparent 25%),
+      linear-gradient(-45deg, rgb(0 0 6 / 12%) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, rgb(0 0 6 / 12%) 75%),
+      linear-gradient(-45deg, transparent 75%, rgb(0 0 6 / 12%) 75%);
+    background-position:
+      0 0,
+      0 4px,
+      4px -4px,
+      -4px 0;
+    background-size: 8px 8px;
+  }
+}
+
+// The chooser itself: visually nothing, and reachable only from the button's click, which
+// is why it is `aria-hidden` and out of the tab order rather than merely transparent.
+.color-button-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: none;
+  opacity: 0;
+  pointer-events: none;
+}

package/scss/_column_view.scss

@@ -0,0 +1,126 @@
+// _column_view.scss — <gtk-column-view>: a header of column buttons over the same rows a
+// list view draws, with one cell per column.
+//
+// Every number here is upstream's: the header button's `3px 6px` padding and its
+// `border-left: 1px solid transparent` (which `.column-separators` then COLOURS rather
+// than adds, so turning separators on cannot shift the layout), the cells' `8px 6px`, and
+// the header text at 40% of `currentColor` rising to 70% on hover
+// (_column-view.scss:12-48).
+//
+// `.separators` is deliberately the SAME class a list view uses: `show-row-separators` is
+// passed straight through to the inner list view upstream, whose node then carries
+// `.separators` — so the rule reads `columnview.separators > row`, one hop shorter than
+// the C's node tree and with the same meaning.
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_column-view.scss:1-112
+// Reference: refs/libadwaita/src/stylesheet/widgets/_labels.scss (.caption-heading)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+@use 'list_view';
+
+gtk-column-view {
+  display: block;
+  box-sizing: border-box;
+  color: var(--view-fg-color);
+  background-color: var(--view-bg-color);
+
+  .adw-column-view-header {
+    display: grid;
+  }
+
+  .adw-column-view-header-cell {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    // `> header > button { padding: 3px 6px; border-radius: 0; background: transparent }`.
+    padding: 3px 6px;
+    border: 0;
+    border-left: 1px solid transparent;
+    border-radius: 0;
+    background: transparent;
+    font: inherit;
+    font-size: var(--font-size-small);
+    font-weight: 700;
+    text-align: start;
+    color: color-mix(in srgb, currentColor 40%, transparent);
+    cursor: pointer;
+
+    &:first-child {
+      border-left-width: 0;
+    }
+
+    &:hover {
+      color: color-mix(in srgb, currentColor 70%, transparent);
+    }
+
+    &:active {
+      color: currentColor;
+    }
+
+    // A column with no sorter is not a button in any useful sense: upstream simply never
+    // activates it, and the cursor is what says so here.
+    &:disabled {
+      cursor: default;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: -2px;
+    }
+  }
+
+  .adw-column-view-header-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // `sort-indicator { min-height: 16px; min-width: 16px }`, drawn as pan-up when
+  // ascending — here one `go-down` icon turned over, the substitution the element header
+  // records.
+  .adw-column-view-sort-indicator {
+    flex: none;
+    margin-inline-start: auto;
+
+    &.ascending {
+      transform: rotate(180deg);
+    }
+  }
+
+  .adw-list-view-rows {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .adw-column-view-row {
+    @include list_view.adw-list-selectable;
+
+    // `> listview > row { padding: 0 }` — the padding moved to the cells.
+    display: grid;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  .adw-column-view-cell {
+    padding: 8px 6px;
+    box-sizing: border-box;
+    border-left: 1px solid transparent;
+
+    &:first-child {
+      border-left-width: 0;
+    }
+  }
+
+  &.column-separators {
+    .adw-column-view-cell,
+    .adw-column-view-header-cell {
+      border-left-color: var(--border-color);
+    }
+  }
+
+  &.separators .adw-column-view-row:not(:last-child) {
+    border-bottom: 1px solid var(--border-color);
+  }
+}

package/scss/_drag_icon.scss

@@ -0,0 +1,55 @@
+// _drag_icon.scss — <gtk-drag-icon>: the one widget whose CSS node libadwaita styles for
+// the WHOLE widget rather than for one state.
+//
+// `gtk_widget_class_set_css_name (widget_class, "dnd")` (gtkdragicon.c:383) is the whole
+// of the widget's styling, and libadwaita's only rule on that node is a foreground colour
+// (`_common.scss:30-32`). The second rule naming it — `dnd tab` in `_tab-view.scss` — is a
+// `GtkTabView` tab being dragged out of a tab view, which is that widget's node to style,
+// not a property of this one.
+//
+// EVERYTHING ELSE HERE IS GEOMETRY, and each value says which part of the C it stands in
+// for. The box is FIXED-POSITIONED because a drag icon has no parent to lay out in: it is
+// a `GtkRoot` with its own surface (:106-108), and `gtk_drag_icon_move_resize` (:138-150)
+// does the one thing a layout would have done — put the icon where the pointer is, at the
+// child's preferred size (`:180-188`).
+//
+// Reference: refs/gtk/gtk/gtkdragicon.c:106-108,138-150,180-188,380,386-390
+// Reference: refs/libadwaita/src/stylesheet/_common.scss:30-32
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-drag-icon {
+  // `dnd { color: var(--window-fg-color) }` — the whole of libadwaita's rule, and the
+  // reason a drag icon's LABEL is the window foreground rather than its own.
+  color: var(--window-fg-color);
+  // `gtk_widget_set_can_target (self, FALSE)` (:386-390) has no CSS of its own, but this
+  // is the layer it describes: an icon that is pointed at takes no pointer event.
+  pointer-events: none;
+  // The drag surface is a root of its own (:106-108), so it is placed against the
+  // VIEWPORT rather than a parent box. The element writes the position itself, on every
+  // `dragover` — which is `gtk_drag_icon_move_resize` (:138-150) on the surface.
+  position: fixed;
+  left: 0;
+  top: 0;
+  // Above the window chrome and below the toasts, which is where a drag image belongs: it
+  // is over the window it was dragged out of, and under a toast that arrived after it.
+  z-index: 5000;
+  // `surface_compute_size` (:180-188) sizes the surface to the child's PREFERRED size, so
+  // the icon is exactly as big as what it carries: `max-content` is the one CSS length that
+  // measures content rather than a box.
+  width: max-content;
+  height: max-content;
+
+  // The `GtkColorSwatch` `createWidgetForValue` builds for a `GdkRGBA`
+  // (gtkdragicon.c:544-553), which is a square of the colour it carries — nothing else,
+  // because `set_can_drag`/`set_can_drop` are FALSE and the two states are the only thing
+  // a swatch has that this one does not need. The large size is `ICON_SIZE_LARGE`, which
+  // is the 32px `.large-icons` sets (_common.scss:38-41).
+  .adw-drag-icon-swatch {
+    display: block;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+  }
+}

package/scss/_drawing.scss

@@ -0,0 +1,85 @@
+// _drawing.scss — <gtk-drawing-area>, and the page's other hand-drawn surfaces.
+//
+// THERE IS NO UPSTREAM FILE TO PORT. `GtkDrawingArea` sets no CSS name of its own, so
+// its node is the default `widget` node (gtkwidget.c:1982), and libadwaita's stylesheet
+// has no rule for it — nor for `glarea`, which sets no name either, nor for
+// `graphicsoffload`, whose only rule is the widget-node layout GTK gives a bin. So this
+// partial is GEOMETRY, and every value in it is transcribed from a measure function in
+// the C rather than from a stylesheet upstream does not have. Saying that is the point:
+// the rules below are not a re-skin, they are the measurement written out.
+//
+// CONTENT-WIDTH IS A FLOOR, NOT A SIZE. `gtk_drawing_area_measure` returns
+// `content_width` as the minimum AND the natural width (gtkdrawingarea.c:210-231), so a
+// parent may hand the area MORE than it asked for — which is what `width: <length>`
+// means for a block box — and cannot hand it less, which is `min-width`. The zero default
+// is "no intrinsic size", and `auto` is the block box's own answer to that.
+//
+// Reference: refs/gtk/gtk/gtkdrawingarea.c:210-231,240-267
+// Copyright (c) The GTK Team. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-drawing-area {
+  display: block;
+  // The natural half: a parent with room to spare gives the area more, and a parent
+  // without gives it exactly the floor below.
+  width: var(--adw-drawing-width, auto);
+  height: var(--adw-drawing-height, auto);
+  // The minimum half — the same number, which is why both read one custom property.
+  min-width: var(--adw-drawing-width, 0);
+  min-height: var(--adw-drawing-height, 0);
+
+  // The cairo region GTK hands the draw function is the whole allocation
+  // (gtkdrawingarea.c:248-262), so the canvas is the whole box rather than a scaled
+  // child of it.
+  .adw-drawing-area-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// <gtk-gl-area> — `GtkGLArea` sets no CSS name (no `gtk_widget_class_set_css_name` in
+// gtkglarea.c), so its node is the generic `widget` node and libadwaita has no rule for
+// it. It also has NO measure function, which is the rule that shapes what follows: the
+// area reports no intrinsic size on either axis, so a parent gives it one.
+gtk-gl-area {
+  display: block;
+  position: relative;
+
+  .adw-gl-area-canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  // `gtk_gl_area_draw_error_screen` (:701-723): the error message laid out across the
+  // widget's width and centred vertically — `pango_layout_set_width (width *
+  // PANGO_SCALE)` and `PANGO_ALIGN_CENTER`, at `(height - layout_height) / 2`. The
+  // canvas stays behind it, as GTK's snapshot replaces a frame's contents rather than
+  // the widget's node.
+  .adw-gl-area-error {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 12px;
+  }
+}
+// <gtk-graphics-offload> — `GTK_TYPE_BIN_LAYOUT` (gtkgraphicsoffload.c:290) gives the
+// child the whole allocation, and the black rectangle `black_background` paints over that
+// allocation BEFORE the child (:222-229) is a BACKGROUND rather than a layer: what the
+// letterbox bars need is the wrapper black exactly where the child does not cover it.
+gtk-graphics-offload {
+  display: block;
+  position: relative;
+  // No `overflow: hidden` here: GTK's subsurface is rectangular and a rounded corner or a
+  // clip is one of the things that PROHIBITS offload (:66-68), so clipping this box would
+  // be the very condition the widget exists to avoid. It does not clip.
+  .adw-graphics-offload-child {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}

package/scss/_emoji_chooser.scss

@@ -0,0 +1,213 @@
+// _emoji_chooser.scss — <gtk-emoji-chooser> styling, mirroring libadwaita's
+// `_emoji-chooser.scss` node for node.
+//
+// The upstream partial is short because GTK does the work: `popover.emoji-picker > contents`
+// gets no padding, the two boxes get theirs, and the section buttons are circular flat
+// image buttons. What it does NOT style is the list itself — GTK's `.view` scrolled
+// window and `GtkFlowBox` do that — so the flow box, the headings and the empty page are
+// spelled out here from the `.ui` instead (6px margins and spacing, a heading label per
+// section, and the `edit-find` glyph at 72px over "No Results Found").
+//
+// Reference: refs/libadwaita/src/stylesheet/widgets/_emoji-chooser.scss:1-57
+//   (`popover.emoji-picker > contents`, `.emoji-searchbar`, `.emoji-toolbar`,
+//   `button.emoji-section.image-button` as a 32px circular flat button,
+//   `popover.emoji-picker emoji` at `font-size: x-large` with 6px padding and
+//   `$button_radius` corners, hover/active fills and a high-contrast outline,
+//   `scrolledwindow.view` with undershoot shading)
+// Reference: refs/gtk/gtk/ui/gtkemojichooser.ui (6px margins and spacing, the headings,
+//   the empty page's 72px glyph, `max-content-height: 320`)
+// Copyright (c) 2021-2024 The GTK authors. LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+gtk-emoji-chooser {
+  // `popover.emoji-picker > contents { padding: 0 }` — the surface carries no padding
+  // of its own; the searchbar and the toolbar bring theirs.
+  padding: 0;
+
+  .emoji-picker-root {
+    display: flex;
+    flex-direction: column;
+    min-width: 260px;
+  }
+
+  .emoji-searchbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px;
+  }
+
+  .emoji-search-icon {
+    flex: 0 0 auto;
+  }
+
+  .emoji-search-entry {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 6px 8px;
+    font: inherit;
+    color: inherit;
+    background-color: var(--entry-bg-color);
+    border: 1px solid var(--entry-border-color);
+    border-radius: 9px;
+
+    &:focus {
+      outline: none;
+      border-color: var(--accent-color);
+    }
+  }
+
+  .emoji-stack {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  // `scrolledwindow.view` (`max-content-height: 320`) with the undershoot shading the
+  // upstream rule draws at the two ends the scroll position is not at.
+  .emoji-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-height: 320px;
+    overflow-y: auto;
+    padding: 6px;
+    background-color: var(--view-bg-color);
+    color: var(--view-fg-color);
+  }
+
+  .emoji-heading {
+    font-weight: 500;
+    text-align: start;
+    padding: 2px 0;
+  }
+
+  // `GtkFlowBox` with `homogeneous: 1`: every emoji the same width, wrapping by row.
+  .emoji-flowbox {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  // `popover.emoji-picker emoji` — `font-size: x-large`, 6px padding, the button radius.
+  .emoji {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    min-height: 32px;
+    padding: 6px;
+    font-size: 1.5em;
+    line-height: 1;
+    border-radius: var(--button-radius);
+    border: none;
+    background-color: transparent;
+    color: inherit;
+
+    &:focus,
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    @media (prefers-contrast: more) {
+      &:focus,
+      &:hover,
+      &:active {
+        box-shadow: inset 0 0 0 1px var(--border-color);
+      }
+    }
+  }
+
+  .emoji-recent-box {
+    margin-bottom: 2px;
+  }
+
+  // The `empty` stack page: `dim-label` throughout, the glyph at 72px.
+  .emoji-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 18px 12px;
+    color: var(--dim-label-color, var(--window-fg-color));
+    opacity: 0.6;
+  }
+
+  .emoji-empty-icon {
+    width: 72px;
+    height: 72px;
+  }
+
+  .emoji-empty-title {
+    font-weight: bold;
+    font-size: 1.4em;
+  }
+
+  .emoji-empty-hint {
+    font-size: 0.95em;
+  }
+
+  // `emoji-toolbar`: 3px of padding, because the flow box children already carry 3px.
+  .emoji-toolbar {
+    display: flex;
+    align-items: center;
+    padding: 3px;
+    border-top: 1px solid var(--separator-color);
+  }
+
+  // `button.emoji-section.image-button` — circular, flat, 32x32, unchecked by default and
+  // checked for the section the list is scrolled into.
+  .emoji-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    border-radius: 999px;
+    background-color: transparent;
+    color: inherit;
+
+    &:hover:not(:disabled) {
+      background-color: var(--button-hover-color);
+    }
+
+    &:checked,
+    &.checked {
+      background-color: var(--button-active-color);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+    }
+  }
+
+  .emoji-section-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  // `show_variations` (:508-548): a `view`-backed box beside the emoji holding the six
+  // variants, so the second click on an emoji with skin tones lands somewhere.
+  .emoji-variations {
+    position: absolute;
+    z-index: 1;
+    padding: 6px;
+    border-radius: var(--button-radius);
+    background-color: var(--popover-bg-color);
+    color: var(--popover-fg-color);
+    box-shadow:
+      0 1px 4px rgba(0, 0, 6, 0.2),
+      0 2px 8px rgba(0, 0, 6, 0.12);
+  }
+
+  .emoji-variations-row {
+    display: flex;
+    gap: 2px;
+  }
+}

package/scss/_entry.scss

@@ -22,7 +22,12 @@ gtk-entry {
   color: var(--view-fg-color);
   font-family: var(--font-family);
   font-size: var(--font-size-base);
-  box-shadow: inset 0 0 0 1px var(--entry-border-color);
+  // NO FRAME. `%entry_basic` (_entries.scss:1-11) draws a fill and a radius and
+  // nothing else: the one-pixel border appears ONLY under `prefers-contrast: more`
+  // (:13-15). The frame sat here unconditionally, so every entry — entry, search entry,
+  // password entry, the text view — read as an outlined box where libadwaita draws a
+  // flat grey one. Confirmed against the native reference: a focused entry carries the
+  // accent ring, an unfocused one carries no edge at all.
   transition: box-shadow 0.1s ease;
 
   &::placeholder {
@@ -30,10 +35,6 @@ gtk-entry {
     opacity: var(--dim-opacity);
   }
 
-  &:hover {
-    box-shadow: inset 0 0 0 1px var(--entry-border-hover-color);
-  }
-
   &:focus,
   &:focus-visible {
     outline: none;
@@ -44,6 +45,13 @@ gtk-entry {
   &:disabled {
     opacity: 0.45;
     cursor: default;
+  }
+
+  @media (prefers-contrast: more) {
     box-shadow: inset 0 0 0 1px var(--entry-border-color);
+
+    &:hover {
+      box-shadow: inset 0 0 0 1px var(--entry-border-hover-color);
+    }
   }
 }

package/scss/_entry_row.scss

@@ -10,7 +10,7 @@ adw-entry-row {
   align-items: center;
   gap: var(--spacing-m);
   min-height: 50px;
-  padding: var(--spacing-xs) var(--spacing-m);
+  padding: 0 var(--spacing-m);
   border-bottom: 1px solid var(--card-shade-color);
 
   &:last-child {