@gjsify/adwaita-web 0.44.0 → 0.46.0

package/README.md

@@ -1,6 +1,8 @@
 # @gjsify/adwaita-web
 
-Browser Adwaita UI components as Custom Elements, bringing the Libadwaita look (light/dark) to the web with no GJS dependencies. Provides `AdwWindow`, `AdwHeaderBar`, `AdwButton`, `AdwEntry`, `AdwPreferencesGroup`, `AdwCard`, `AdwSwitchRow`, `AdwComboRow`, `AdwSpinRow`, `AdwToastOverlay`, and `AdwOverlaySplitView` (plus a `.adw-linked` button-group helper), backed by SCSS that mirrors the upstream `refs/adwaita-web` and `refs/libadwaita` color/sizing tokens.
+Browser Adwaita UI components as Custom Elements, bringing the Libadwaita look (light/dark) to the web with no GJS dependencies. Backed by SCSS that mirrors the upstream `refs/adwaita-web` and `refs/libadwaita` color/sizing tokens.
+
+Write the tags — `<adw-window>`, `<adw-header-bar>`, `<gtk-button>`, `<gtk-entry>`, `<adw-preferences-group>`, `<adw-switch-row>`, `<adw-overlay-split-view>` and the rest — or reach the classes through the GIR namespace the tag names: `Adw.Window`, `Gtk.Button`, `Adw.OverlaySplitView`. Each tag carries the prefix of the library that owns its GType, and the namespace member is that split read back (ADR 0034). There are no `AdwWindow`/`GtkButton` class exports at the package root; the elements with no GTK counterpart at all — `AdwCard`, `AdwDataGrid`, the declarative page and slot wrappers — keep their flat name, because it is their only one.
 
 Part of the [gjsify](https://github.com/gjsify/gjsify) project — Node.js and Web APIs for GJS (GNOME JavaScript).
 
@@ -63,7 +65,7 @@ identical child written in the markup.
 
 ```typescript
 const row = document.querySelector('adw-action-row')!;
-const toggle = document.createElement('adw-switch');
+const toggle = document.createElement('gtk-switch');
 toggle.setAttribute('slot', 'suffix');
 row.append(toggle); // lands in the suffix section, exactly as a declared one does
 ```
@@ -151,7 +153,7 @@ about the individual components.
 
 ## Icons, and the ones the stylesheet does not ship
 
-An `<adw-icon icon-name="go-next">` is a CSS mask: the box takes its colour from
+A `<gtk-image icon-name="go-next">` is a CSS mask: the box takes its colour from
 `currentColor` and a generated `.adw-icon--<name>` class supplies the `mask-image`, so the
 glyph re-themes with whatever contains it. The names that resolve are a **chosen subset** of
 [`@gjsify/adwaita-icons`](../adwaita-icons) — a few dozen of them, plus one glyph drawn
@@ -178,7 +180,7 @@ if (!isIconAvailable('dialog-error')) {
 ```
 
 ```html
-<adw-icon icon-name="dialog-error"></adw-icon>
+<gtk-image icon-name="dialog-error"></gtk-image>
 <!-- …or any widget attribute that takes an icon name -->
 <adw-status-page icon="dialog-error" title="Could not connect"></adw-status-page>
 ```
@@ -187,7 +189,7 @@ if (!isIconAvailable('dialog-error')) {
 `@gjsify/adwaita-icons` exports, and equally any symbolic SVG of your own drawn on the 16px
 Adwaita grid with `fill="currentColor"`. It writes the same pair the build writes: a
 `--icon-<name>` custom property on the document element and a `.adw-icon--<name>` mask rule,
-so from then on the name is indistinguishable from a compiled one — in `<adw-icon>`, in a
+so from then on the name is indistinguishable from a compiled one — in `<gtk-image>`, in a
 widget attribute, in a hand-written `class="adw-icon adw-icon--dialog-error"`, and in your
 own CSS as `var(--icon-dialog-error)`.
 
@@ -204,7 +206,7 @@ Notes worth having:
   comes off, and what is left has to be a single CSS token. `registerIcon` *throws* on a name
   that is not (`org.gnome.Builder`, `a b`), because a call that silently registers nothing is
   the failure this whole area exists to end — and because there is no mask class such a name
-  could be given. `<adw-icon>` stays lenient with the same input: the name came from markup,
+  could be given. `<gtk-image>` stays lenient with the same input: the name came from markup,
   so it draws `image-missing` rather than taking the page down.
 - **Re-registering replaces the glyph** rather than adding a second rule, so a runtime theme
   switch can call it as often as it likes.

package/dist/adwaita-web.css

@@ -506,7 +506,7 @@
   font-size: var(--font-size-base);
 }
 
-adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-content, adw-bottom-sheet-sheet, adw-button, adw-button-content, adw-button-row, adw-card, adw-carousel, adw-carousel-indicator-dots, adw-carousel-indicator-lines, adw-checkbox, adw-clamp, adw-combo-row, adw-data-grid, adw-dialog, adw-drop-down, adw-entry, adw-entry-row, adw-expander-row, adw-header-bar, adw-icon, adw-inline-view-switcher, adw-menu-button, adw-navigation-page, 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-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, adw-toolbar-view, adw-view-stack, adw-view-stack-page, adw-view-switcher, adw-view-switcher-bar, adw-view-switcher-page, adw-window, adw-window-title, adw-wrap-box {
+adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-content, adw-bottom-sheet-sheet, gtk-button, adw-button-content, adw-button-row, adw-card, adw-carousel, adw-carousel-indicator-dots, adw-carousel-indicator-lines, gtk-check-button, adw-clamp, adw-combo-row, adw-data-grid, adw-dialog, gtk-drop-down, gtk-entry, adw-entry-row, adw-expander-row, adw-header-bar, gtk-image, adw-inline-view-switcher, gtk-menu-button, adw-navigation-page, adw-navigation-split-view, adw-navigation-view, adw-overlay-split-view, adw-password-entry-row, gtk-popover, adw-preferences-dialog, adw-preferences-group, adw-preferences-page, gtk-progress-bar, adw-radio, 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, gtk-switch, adw-switch-row, adw-tab-page, adw-tab-view, adw-toast-overlay, adw-toggle, adw-toggle-group, adw-toolbar-view, adw-view-stack, adw-view-stack-page, adw-view-switcher, adw-view-switcher-bar, adw-view-switcher-page, adw-window, adw-window-title, adw-wrap-box {
   box-sizing: border-box;
   color: var(--window-fg-color);
   font-family: var(--font-family);
@@ -577,9 +577,9 @@ adw-bottom-sheet-sheet *::after {
   box-sizing: border-box;
 }
 
-adw-button *,
-adw-button *::before,
-adw-button *::after {
+gtk-button *,
+gtk-button *::before,
+gtk-button *::after {
   box-sizing: border-box;
 }
 
@@ -619,9 +619,9 @@ adw-carousel-indicator-lines *::after {
   box-sizing: border-box;
 }
 
-adw-checkbox *,
-adw-checkbox *::before,
-adw-checkbox *::after {
+gtk-check-button *,
+gtk-check-button *::before,
+gtk-check-button *::after {
   box-sizing: border-box;
 }
 
@@ -649,15 +649,15 @@ adw-dialog *::after {
   box-sizing: border-box;
 }
 
-adw-drop-down *,
-adw-drop-down *::before,
-adw-drop-down *::after {
+gtk-drop-down *,
+gtk-drop-down *::before,
+gtk-drop-down *::after {
   box-sizing: border-box;
 }
 
-adw-entry *,
-adw-entry *::before,
-adw-entry *::after {
+gtk-entry *,
+gtk-entry *::before,
+gtk-entry *::after {
   box-sizing: border-box;
 }
 
@@ -679,9 +679,9 @@ adw-header-bar *::after {
   box-sizing: border-box;
 }
 
-adw-icon *,
-adw-icon *::before,
-adw-icon *::after {
+gtk-image *,
+gtk-image *::before,
+gtk-image *::after {
   box-sizing: border-box;
 }
 
@@ -691,9 +691,9 @@ adw-inline-view-switcher *::after {
   box-sizing: border-box;
 }
 
-adw-menu-button *,
-adw-menu-button *::before,
-adw-menu-button *::after {
+gtk-menu-button *,
+gtk-menu-button *::before,
+gtk-menu-button *::after {
   box-sizing: border-box;
 }
 
@@ -727,9 +727,9 @@ adw-password-entry-row *::after {
   box-sizing: border-box;
 }
 
-adw-popover *,
-adw-popover *::before,
-adw-popover *::after {
+gtk-popover *,
+gtk-popover *::before,
+gtk-popover *::after {
   box-sizing: border-box;
 }
 
@@ -751,9 +751,9 @@ adw-preferences-page *::after {
   box-sizing: border-box;
 }
 
-adw-progress-bar *,
-adw-progress-bar *::before,
-adw-progress-bar *::after {
+gtk-progress-bar *,
+gtk-progress-bar *::before,
+gtk-progress-bar *::after {
   box-sizing: border-box;
 }
 
@@ -817,9 +817,9 @@ adw-status-page *::after {
   box-sizing: border-box;
 }
 
-adw-switch *,
-adw-switch *::before,
-adw-switch *::after {
+gtk-switch *,
+gtk-switch *::before,
+gtk-switch *::after {
   box-sizing: border-box;
 }
 
@@ -940,7 +940,7 @@ adw-wrap-box *::after {
   background-color: transparent;
 }
 
-.dimmed, .adw-data-grid .adw-data-grid-row.header .adw-data-grid-cell, adw-progress-bar .adw-progress-bar-text {
+.dimmed, .adw-data-grid .adw-data-grid-row.header .adw-data-grid-cell, gtk-progress-bar .adw-progress-bar-text {
   opacity: var(--dim-opacity);
 }
 
@@ -1023,7 +1023,7 @@ adw-wrap-box *::after {
   font-size: var(--monospace-font-size);
 }
 
-.numeric, .adw-data-grid .adw-data-grid-cell.mono, adw-progress-bar .adw-progress-bar-text {
+.numeric, .adw-data-grid .adw-data-grid-cell.mono, gtk-progress-bar .adw-progress-bar-text {
   font-variant-numeric: tabular-nums;
 }
 
@@ -1119,45 +1119,45 @@ adw-card,
   gap: 6px;
   padding: 6px;
 }
-.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button.icon-only,
-.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):has(adw-button-content) .adw-button,
-.toolbar adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button.icon-only,
+.toolbar gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):has(adw-button-content) .adw-button,
+.toolbar gtk-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
 .toolbar adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button {
   background-color: transparent;
 }
-.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button.icon-only:hover,
-.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):has(adw-button-content) .adw-button:hover,
-.toolbar adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button.icon-only:hover,
+.toolbar gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):has(adw-button-content) .adw-button:hover,
+.toolbar gtk-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
 .toolbar adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover {
   background-color: var(--button-hover-color);
 }
-.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button.icon-only:active,
-.toolbar adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):has(adw-button-content) .adw-button:active,
-.toolbar adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button.icon-only:active,
+.toolbar gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque):has(adw-button-content) .adw-button:active,
+.toolbar gtk-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
 .toolbar adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active {
   background-color: var(--button-active-color);
 }
-.toolbar .linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
-.toolbar .linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar .linked gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar .linked gtk-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
 .toolbar .linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
-.toolbar .adw-linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
-.toolbar .adw-linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar .adw-linked gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
+.toolbar .adw-linked gtk-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button,
 .toolbar .adw-linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button {
   background-color: var(--button-bg-color);
 }
-.toolbar .linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
-.toolbar .linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar .linked gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar .linked gtk-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
 .toolbar .linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
-.toolbar .adw-linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
-.toolbar .adw-linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar .adw-linked gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
+.toolbar .adw-linked gtk-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover,
 .toolbar .adw-linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:hover {
   background-color: var(--button-hover-color);
 }
-.toolbar .linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
-.toolbar .linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar .linked gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar .linked gtk-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
 .toolbar .linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
-.toolbar .adw-linked adw-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
-.toolbar .adw-linked adw-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar .adw-linked gtk-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
+.toolbar .adw-linked gtk-menu-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active,
 .toolbar .adw-linked adw-split-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) .adw-button:active {
   background-color: var(--button-active-color);
 }
@@ -1181,7 +1181,7 @@ adw-card,
 /*******
  * OSD *
  *******/
-.osd:not(adw-progress-bar):not(adw-button):not(adw-menu-button):not(adw-split-button):not(adw-inline-view-switcher) {
+.osd:not(gtk-progress-bar):not(gtk-button):not(gtk-menu-button):not(adw-split-button):not(adw-inline-view-switcher) {
   --accent-bg-color: rgb(255 255 255 / 75%);
   --accent-fg-color: rgb(0 0 0 / 75%);
   --accent-color: oklab(from var(--accent-bg-color) max(l, 0.85) a b);
@@ -1395,7 +1395,7 @@ adw-window-title .adw-window-title-subtitle {
   max-width: 100%;
 }
 
-adw-button {
+gtk-button {
   display: inline-flex;
 }
 
@@ -1547,7 +1547,7 @@ adw-button-content.can-shrink .adw-button-content-label {
   min-width: 0;
 }
 
-adw-popover {
+gtk-popover {
   --popover-radius: 15px;
   position: absolute;
   z-index: 10;
@@ -1562,31 +1562,31 @@ adw-popover {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 5px 1px rgba(0, 0, 0, 0.09), 0 2px 14px 3px rgba(0, 0, 0, 0.05);
 }
 @media (prefers-contrast: more) {
-  adw-popover {
+  gtk-popover {
     box-shadow: 0 0 0 1px var(--separator-color), 0 1px 5px 1px rgba(0, 0, 0, 0.09), 0 2px 14px 3px rgba(0, 0, 0, 0.05);
   }
 }
-adw-popover[menu], adw-popover.menu {
+gtk-popover[menu], gtk-popover.menu {
   padding: 6px;
 }
-adw-popover[data-position=bottom] {
+gtk-popover[data-position=bottom] {
   top: calc(100% + 6px);
 }
-adw-popover[data-position=top] {
+gtk-popover[data-position=top] {
   bottom: calc(100% + 6px);
 }
-adw-popover[data-position=start] {
+gtk-popover[data-position=start] {
   top: 0;
   right: calc(100% + 6px);
 }
-adw-popover[data-position=end] {
+gtk-popover[data-position=end] {
   top: 0;
   left: calc(100% + 6px);
 }
-adw-popover[data-position=bottom][data-align=start], adw-popover[data-position=top][data-align=start] {
+gtk-popover[data-position=bottom][data-align=start], gtk-popover[data-position=top][data-align=start] {
   left: 0;
 }
-adw-popover[data-position=bottom][data-align=end], adw-popover[data-position=top][data-align=end] {
+gtk-popover[data-position=bottom][data-align=end], gtk-popover[data-position=top][data-align=end] {
   right: 0;
 }
 
@@ -2067,7 +2067,7 @@ adw-toggle-group.flat.round .adw-toggle {
   cursor: not-allowed;
 }
 
-adw-entry {
+gtk-entry {
   display: flex;
   flex: 1;
   min-width: 0;
@@ -2105,7 +2105,7 @@ adw-entry {
   box-shadow: inset 0 0 0 1px var(--entry-border-color);
 }
 
-adw-checkbox,
+gtk-check-button,
 adw-radio {
   position: relative;
   display: inline-flex;
@@ -2116,7 +2116,7 @@ adw-radio {
   cursor: pointer;
   user-select: none;
 }
-adw-checkbox .adw-check-input,
+gtk-check-button .adw-check-input,
 adw-radio .adw-check-input {
   position: absolute;
   width: 0;
@@ -2124,7 +2124,7 @@ adw-radio .adw-check-input {
   margin: 0;
   opacity: 0;
 }
-adw-checkbox .adw-check-indicator,
+gtk-check-button .adw-check-indicator,
 adw-radio .adw-check-indicator {
   box-sizing: content-box;
   width: 14px;
@@ -2135,12 +2135,12 @@ adw-radio .adw-check-indicator {
   transition: background 200ms ease-out, box-shadow 200ms ease-out;
 }
 @media (prefers-contrast: more) {
-  adw-checkbox .adw-check-indicator,
+  gtk-check-button .adw-check-indicator,
   adw-radio .adw-check-indicator {
     box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent);
   }
 }
-adw-checkbox .adw-check-indicator::after,
+gtk-check-button .adw-check-indicator::after,
 adw-radio .adw-check-indicator::after {
   content: "";
   display: block;
@@ -2154,56 +2154,56 @@ adw-radio .adw-check-indicator::after {
   -webkit-mask-position: center;
   -webkit-mask-size: 14px;
 }
-adw-checkbox:not([checked]):not([indeterminate]):not([disabled]):hover .adw-check-indicator,
+gtk-check-button:not([checked]):not([indeterminate]):not([disabled]):hover .adw-check-indicator,
 adw-radio:not([checked]):not([indeterminate]):not([disabled]):hover .adw-check-indicator {
   box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent);
 }
 @media (prefers-contrast: more) {
-  adw-checkbox:not([checked]):not([indeterminate]):not([disabled]):hover .adw-check-indicator,
+  gtk-check-button:not([checked]):not([indeterminate]):not([disabled]):hover .adw-check-indicator,
   adw-radio:not([checked]):not([indeterminate]):not([disabled]):hover .adw-check-indicator {
     box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 60%, transparent);
   }
 }
-adw-checkbox:not([checked]):not([indeterminate]):not([disabled]):active .adw-check-indicator,
+gtk-check-button:not([checked]):not([indeterminate]):not([disabled]):active .adw-check-indicator,
 adw-radio:not([checked]):not([indeterminate]):not([disabled]):active .adw-check-indicator {
   background-color: color-mix(in srgb, currentColor 25%, transparent);
   box-shadow: none;
 }
 @media (prefers-contrast: more) {
-  adw-checkbox:not([checked]):not([indeterminate]):not([disabled]):active .adw-check-indicator,
+  gtk-check-button:not([checked]):not([indeterminate]):not([disabled]):active .adw-check-indicator,
   adw-radio:not([checked]):not([indeterminate]):not([disabled]):active .adw-check-indicator {
     background-color: color-mix(in srgb, currentColor 60%, transparent);
   }
 }
-adw-checkbox[checked] .adw-check-indicator, adw-checkbox[indeterminate] .adw-check-indicator,
+gtk-check-button[checked] .adw-check-indicator, gtk-check-button[indeterminate] .adw-check-indicator,
 adw-radio[checked] .adw-check-indicator,
 adw-radio[indeterminate] .adw-check-indicator {
   background-color: var(--accent-bg-color);
   color: var(--accent-fg-color);
   box-shadow: none;
 }
-adw-checkbox[checked]:not([disabled]):hover .adw-check-indicator, adw-checkbox[indeterminate]:not([disabled]):hover .adw-check-indicator,
+gtk-check-button[checked]:not([disabled]):hover .adw-check-indicator, gtk-check-button[indeterminate]:not([disabled]):hover .adw-check-indicator,
 adw-radio[checked]:not([disabled]):hover .adw-check-indicator,
 adw-radio[indeterminate]:not([disabled]):hover .adw-check-indicator {
   background-image: linear-gradient(color-mix(in srgb, currentColor 10%, transparent), color-mix(in srgb, currentColor 10%, transparent));
 }
-adw-checkbox[checked]:not([disabled]):active .adw-check-indicator, adw-checkbox[indeterminate]:not([disabled]):active .adw-check-indicator,
+gtk-check-button[checked]:not([disabled]):active .adw-check-indicator, gtk-check-button[indeterminate]:not([disabled]):active .adw-check-indicator,
 adw-radio[checked]:not([disabled]):active .adw-check-indicator,
 adw-radio[indeterminate]:not([disabled]):active .adw-check-indicator {
   background-image: linear-gradient(rgba(0, 0, 6, 0.2), rgba(0, 0, 6, 0.2));
 }
-adw-checkbox[disabled],
+gtk-check-button[disabled],
 adw-radio[disabled] {
   cursor: not-allowed;
   opacity: var(--disabled-opacity);
 }
-adw-checkbox .adw-check-input:focus-visible ~ .adw-check-indicator,
+gtk-check-button .adw-check-input:focus-visible ~ .adw-check-indicator,
 adw-radio .adw-check-input:focus-visible ~ .adw-check-indicator {
   outline: 2px solid var(--accent-color);
   outline-offset: 2px;
 }
 
-adw-checkbox .adw-check-indicator {
+gtk-check-button .adw-check-indicator {
   border-radius: 6px;
 }
 
@@ -2211,7 +2211,7 @@ adw-radio .adw-check-indicator {
   border-radius: 100%;
 }
 
-adw-checkbox[checked] .adw-check-indicator::after {
+gtk-check-button[checked] .adw-check-indicator::after {
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='black' d='m 12.599609,2.1992188 a 1,1 0 0 0 -1.40039,0.2011718 L 5.890625,9.4765625 2.7070313,6.2929687 a 1,1 0 0 0 -1.4140626,0 1,1 0 0 0 0,1.4140625 l 4,3.9999998 A 1.0001,1.0001 0 0 0 6.8007812,11.599609 L 12.800781,3.5996094 A 1,1 0 0 0 12.599609,2.1992188 Z'/%3E%3C/svg%3E");
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='black' d='m 12.599609,2.1992188 a 1,1 0 0 0 -1.40039,0.2011718 L 5.890625,9.4765625 2.7070313,6.2929687 a 1,1 0 0 0 -1.4140626,0 1,1 0 0 0 0,1.4140625 l 4,3.9999998 A 1.0001,1.0001 0 0 0 6.8007812,11.599609 L 12.800781,3.5996094 A 1,1 0 0 0 12.599609,2.1992188 Z'/%3E%3C/svg%3E");
 }
@@ -2221,33 +2221,33 @@ adw-radio[checked] .adw-check-indicator::after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='black' d='M 7 3 c -2.207 0 -4 1.793 -4 4 s 1.793 4 4 4 c 2.208 0 4 -1.793 4 -4 s -1.792 -4 -4 -4 z'/%3E%3C/svg%3E");
 }
 
-adw-checkbox[indeterminate] .adw-check-indicator::after,
+gtk-check-button[indeterminate] .adw-check-indicator::after,
 adw-radio[indeterminate] .adw-check-indicator::after {
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='black' d='M 3 5 A 2 2 0 0 0 1 7 A 2 2 0 0 0 3 9 L 11 9 A 2 2 0 0 0 13 7 A 2 2 0 0 0 11 5 Z'/%3E%3C/svg%3E");
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='black' d='M 3 5 A 2 2 0 0 0 1 7 A 2 2 0 0 0 3 9 L 11 9 A 2 2 0 0 0 13 7 A 2 2 0 0 0 11 5 Z'/%3E%3C/svg%3E");
 }
 
-adw-checkbox.selection-mode,
+gtk-check-button.selection-mode,
 adw-radio.selection-mode {
   border-radius: 100px;
 }
-adw-checkbox.selection-mode .adw-check-indicator,
+gtk-check-button.selection-mode .adw-check-indicator,
 adw-radio.selection-mode .adw-check-indicator {
   padding: 7px;
   border-radius: 100px;
 }
-adw-checkbox.selection-mode .adw-check-label,
+gtk-check-button.selection-mode .adw-check-label,
 adw-radio.selection-mode .adw-check-label {
   margin-inline-end: 6px;
 }
 
-adw-progress-bar {
+gtk-progress-bar {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
   min-width: 150px;
 }
-adw-progress-bar .adw-progress-bar-trough {
+gtk-progress-bar .adw-progress-bar-trough {
   position: relative;
   display: flex;
   overflow: hidden;
@@ -2257,49 +2257,49 @@ adw-progress-bar .adw-progress-bar-trough {
   transition: background 200ms ease-out;
 }
 @media (prefers-contrast: more) {
-  adw-progress-bar .adw-progress-bar-trough {
+  gtk-progress-bar .adw-progress-bar-trough {
     background-color: color-mix(in srgb, currentColor 30%, transparent);
   }
 }
-adw-progress-bar .adw-progress-bar-progress {
+gtk-progress-bar .adw-progress-bar-progress {
   height: 100%;
   border-radius: 99px;
   background-color: var(--accent-bg-color);
   color: var(--accent-fg-color);
   transition: width 200ms ease-out, background 200ms ease-out;
 }
-adw-progress-bar .adw-progress-bar-text {
+gtk-progress-bar .adw-progress-bar-text {
   font-size: smaller;
 }
-adw-progress-bar[disabled] {
+gtk-progress-bar[disabled] {
   opacity: var(--disabled-opacity);
 }
-adw-progress-bar[inverted] .adw-progress-bar-trough {
+gtk-progress-bar[inverted] .adw-progress-bar-trough {
   justify-content: flex-end;
 }
-adw-progress-bar .adw-progress-bar-trough.empty .adw-progress-bar-progress {
+gtk-progress-bar .adw-progress-bar-trough.empty .adw-progress-bar-progress {
   all: unset;
 }
-adw-progress-bar[osd], adw-progress-bar.osd {
+gtk-progress-bar[osd], gtk-progress-bar.osd {
   min-width: 2px;
 }
-adw-progress-bar[osd] .adw-progress-bar-trough, adw-progress-bar.osd .adw-progress-bar-trough {
+gtk-progress-bar[osd] .adw-progress-bar-trough, gtk-progress-bar.osd .adw-progress-bar-trough {
   height: 2px;
   border-radius: 0;
   background-color: transparent;
   box-shadow: none;
 }
-adw-progress-bar[osd] .adw-progress-bar-progress, adw-progress-bar.osd .adw-progress-bar-progress {
+gtk-progress-bar[osd] .adw-progress-bar-progress, gtk-progress-bar.osd .adw-progress-bar-progress {
   border-radius: 0;
 }
-adw-progress-bar[pulsing] .adw-progress-bar-progress {
+gtk-progress-bar[pulsing] .adw-progress-bar-progress {
   position: absolute;
   inset-block: 0;
   width: 30%;
   animation: adw-progress-bar-indeterminate 1.5s infinite ease-in-out;
 }
 @media (prefers-reduced-motion: reduce) {
-  adw-progress-bar[pulsing] .adw-progress-bar-progress {
+  gtk-progress-bar[pulsing] .adw-progress-bar-progress {
     left: 0;
     width: 100%;
     animation: none;