@gjsify/adwaita-web 0.51.1 → 0.53.0

package/README.md

@@ -151,6 +151,40 @@ surface + light/dark `color-scheme` by adding the `adw-root` class to `<body>`
 `--window-fg-color` + `color-scheme: light dark` to the page and changes nothing
 about the individual components.
 
+## Following the desktop's accent
+
+A page follows the desktop's accent and colour scheme from these sources, highest
+first ([ADR 0078](../../../docs/adr/0078-the-desktop-appearance-reaches-a-web-page-through-a-handoff.md)):
+
+1. **your own choice**: `applyAdwaitaAccent('green')`. Nothing below overrides it;
+   `clearAdwaitaAccent()` hands the page back.
+2. **a server handoff**: `<meta name="adw-accent" content="purple">` and
+   `<meta name="adw-color-scheme" content="dark">` in `<head>`, read on import and
+   whenever they change, or `applyDesktopAppearance(json)` for live updates. A gjsify
+   server writes the tags with `renderAppearanceMeta` from
+   `@gjsify/adwaita-app/appearance`.
+3. **the CSS system colour `AccentColor`**, once you call `applySystemAccent()` or
+   the tag says `content="system"` (#1821).
+4. **Adwaita blue**, the stylesheet's own value.
+
+```ts
+import { applyDesktopAppearance, applySystemAccent } from '@gjsify/adwaita-web';
+
+applySystemAccent(); // follow AccentColor where the engine resolves it; returns the accent or null
+new EventSource('/appearance').onmessage = (event) => applyDesktopAppearance(JSON.parse(event.data));
+```
+
+Every source is snapped to one of the nine accents with `nearestAccent`, as libadwaita
+does, so the page matches a native Adwaita window on the same desktop.
+`adwaitaAccentSource()` tells you which source won. Only `<html>` follows.
+
+`AccentColor` support differs between engines and has not been verified everywhere.
+Chrome announced shipping it only in 2026. On a GNOME desktop set to purple,
+Playwright's headless Firefox 151 resolved it to `rgb(0, 96, 223)` and headless
+Chromium 149 to `rgb(0, 117, 255)`: both blue, neither the desktop's accent. A page
+cannot tell such a default from a real accent, which is why the server handoff ranks
+above it.
+
 ## Icons, and the ones the stylesheet does not ship
 
 A `<gtk-image icon-name="go-next">` is a CSS mask: the box takes its colour from

package/dist/adwaita-web.css

@@ -292,6 +292,7 @@
   --entry-border-hover-color: rgba(0, 0, 6, 0.28);
   --destructive-bg-color: #e01b24;
   --destructive-fg-color: #ffffff;
+  --destructive-color: oklab(from var(--destructive-bg-color) min(l, 0.5) a b);
   --success-bg-color: #2ec27e;
   --success-fg-color: #ffffff;
   --success-color: oklab(from var(--success-bg-color) min(l, 0.5) a b);
@@ -311,7 +312,7 @@
   --spacing-m: 12px;
   --spacing-l: 18px;
   --spacing-xl: 24px;
-  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;
+  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --font-size-base: 11pt;
   --font-size-small: 9pt;
   --font-size-heading: 12pt;
@@ -321,7 +322,7 @@
   --disabled-opacity: 0.5;
   --document-font-family: var(--font-family);
   --document-font-size: var(--font-size-base);
-  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
+  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
   --monospace-font-size: var(--font-size-base);
 }
 
@@ -369,6 +370,7 @@
     --entry-border-hover-color: rgba(255, 255, 255, 0.26);
     --destructive-bg-color: #c01c28;
     --destructive-fg-color: #ffffff;
+    --destructive-color: oklab(from var(--destructive-bg-color) max(l, 0.85) a b);
     --success-bg-color: #26a269;
     --success-color: oklab(from var(--success-bg-color) max(l, 0.85) a b);
     --warning-bg-color: #cd9309;
@@ -377,7 +379,7 @@
     --error-color: oklab(from var(--error-bg-color) max(l, 0.85) a b);
     --switch-off-bg: rgba(255, 255, 255, 0.2);
     --switch-knob-bg: #deddda;
-    --active-toggle-fg-color: rgba(0, 0, 6, 0.8);
+    --active-toggle-bg-color: rgb(255 255 255 / 20%);
   }
 }
 .theme-dark {
@@ -416,6 +418,7 @@
   --entry-border-hover-color: rgba(255, 255, 255, 0.26);
   --destructive-bg-color: #c01c28;
   --destructive-fg-color: #ffffff;
+  --destructive-color: oklab(from var(--destructive-bg-color) max(l, 0.85) a b);
   --success-bg-color: #26a269;
   --success-color: oklab(from var(--success-bg-color) max(l, 0.85) a b);
   --warning-bg-color: #cd9309;
@@ -424,7 +427,7 @@
   --error-color: oklab(from var(--error-bg-color) max(l, 0.85) a b);
   --switch-off-bg: rgba(255, 255, 255, 0.2);
   --switch-knob-bg: #deddda;
-  --active-toggle-fg-color: rgba(0, 0, 6, 0.8);
+  --active-toggle-bg-color: rgb(255 255 255 / 20%);
 }
 
 .theme-light {
@@ -465,6 +468,7 @@
   --entry-border-hover-color: rgba(0, 0, 6, 0.28);
   --destructive-bg-color: #e01b24;
   --destructive-fg-color: #ffffff;
+  --destructive-color: oklab(from var(--destructive-bg-color) min(l, 0.5) a b);
   --success-bg-color: #2ec27e;
   --success-fg-color: #ffffff;
   --success-color: oklab(from var(--success-bg-color) min(l, 0.5) a b);
@@ -484,7 +488,7 @@
   --spacing-m: 12px;
   --spacing-l: 18px;
   --spacing-xl: 24px;
-  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;
+  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --font-size-base: 11pt;
   --font-size-small: 9pt;
   --font-size-heading: 12pt;
@@ -494,7 +498,7 @@
   --disabled-opacity: 0.5;
   --document-font-family: var(--font-family);
   --document-font-size: var(--font-size-base);
-  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
+  --monospace-font-family: 'Adwaita Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
   --monospace-font-size: var(--font-size-base);
 }
 
@@ -506,7 +510,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, 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 {
+adw-about-dialog, adw-action-row, gtk-action-bar, adw-alert-dialog, adw-alert-response, adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-bottom-bar, adw-bottom-sheet-content, adw-bottom-sheet-sheet, gtk-box, 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-label, 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);
@@ -523,6 +527,20 @@ adw-about-dialog, adw-action-row, adw-alert-dialog, adw-alert-response, adw-avat
   text-shadow: none;
 }
 
+:where(adw-about-dialog, adw-action-row, gtk-action-bar, adw-alert-dialog, adw-alert-response, adw-avatar, adw-banner, adw-bottom-sheet, adw-bottom-sheet-bottom-bar, adw-bottom-sheet-content, adw-bottom-sheet-sheet, gtk-box, 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-label, 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) :is(gtk-box, gtk-label, adw-button-content) {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-style: inherit;
+  font-variant: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  text-transform: inherit;
+  text-shadow: inherit;
+}
+
 adw-about-dialog *,
 adw-about-dialog *::before,
 adw-about-dialog *::after {
@@ -535,6 +553,12 @@ adw-action-row *::after {
   box-sizing: border-box;
 }
 
+gtk-action-bar *,
+gtk-action-bar *::before,
+gtk-action-bar *::after {
+  box-sizing: border-box;
+}
+
 adw-alert-dialog *,
 adw-alert-dialog *::before,
 adw-alert-dialog *::after {
@@ -565,6 +589,12 @@ adw-bottom-sheet *::after {
   box-sizing: border-box;
 }
 
+adw-bottom-sheet-bottom-bar *,
+adw-bottom-sheet-bottom-bar *::before,
+adw-bottom-sheet-bottom-bar *::after {
+  box-sizing: border-box;
+}
+
 adw-bottom-sheet-content *,
 adw-bottom-sheet-content *::before,
 adw-bottom-sheet-content *::after {
@@ -577,6 +607,12 @@ adw-bottom-sheet-sheet *::after {
   box-sizing: border-box;
 }
 
+gtk-box *,
+gtk-box *::before,
+gtk-box *::after {
+  box-sizing: border-box;
+}
+
 gtk-button *,
 gtk-button *::before,
 gtk-button *::after {
@@ -691,6 +727,12 @@ adw-inline-view-switcher *::after {
   box-sizing: border-box;
 }
 
+gtk-label *,
+gtk-label *::before,
+gtk-label *::after {
+  box-sizing: border-box;
+}
+
 gtk-menu-button *,
 gtk-menu-button *::before,
 gtk-menu-button *::after {
@@ -940,7 +982,50 @@ adw-wrap-box *::after {
   background-color: transparent;
 }
 
-.dimmed, .adw-data-grid .adw-data-grid-row.header .adw-data-grid-cell, gtk-progress-bar .adw-progress-bar-text {
+gtk-label {
+  display: flex;
+  align-items: var(--gtk-label-align-items, center);
+  white-space: pre;
+  caret-color: currentColor;
+  user-select: none;
+}
+gtk-label::before, gtk-label::after {
+  content: "";
+  flex-shrink: 1;
+  flex-basis: 0;
+}
+gtk-label::before {
+  flex-grow: var(--gtk-label-xalign, 0.5);
+}
+gtk-label::after {
+  flex-grow: calc(1 - var(--gtk-label-xalign, 0.5));
+}
+gtk-label[wrap] {
+  white-space: pre-wrap;
+}
+gtk-label .adw-label-text {
+  display: block;
+  max-width: 100%;
+}
+gtk-label[wrap-mode=char] .adw-label-text {
+  word-break: break-all;
+}
+gtk-label[wrap-mode=word-char] .adw-label-text {
+  overflow-wrap: anywhere;
+}
+gtk-label .adw-label-text.adw-label-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--gtk-label-lines, 1);
+  overflow: hidden;
+  text-overflow: var(--gtk-label-ellipsize-overflow, ellipsis);
+  white-space: normal;
+}
+gtk-label[selectable] {
+  user-select: text;
+  cursor: text;
+}
+.dimmed, .adw-data-grid .adw-data-grid-row.header .adw-data-grid-cell, gtk-progress-bar .adw-progress-bar-text, gtk-label.separator {
   opacity: var(--dim-opacity);
 }
 
@@ -1027,6 +1112,16 @@ adw-wrap-box *::after {
   font-variant-numeric: tabular-nums;
 }
 
+gtk-box {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+gtk-box[homogeneous] > * {
+  flex: 1 1 0;
+}
+
 /************
  * Surfaces *
  ************/
@@ -1368,6 +1463,38 @@ 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);
 }
 
+gtk-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  box-sizing: border-box;
+  background-color: var(--headerbar-bg-color);
+  color: var(--headerbar-fg-color);
+  box-shadow: inset 0 1px var(--headerbar-shade-color);
+  padding: 7px 6px 6px 6px;
+}
+gtk-action-bar[hidden] {
+  display: none;
+}
+gtk-action-bar > .adw-action-bar-start,
+gtk-action-bar > .adw-action-bar-end {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+gtk-action-bar > .adw-action-bar-start {
+  flex: 1 1 0;
+  justify-content: flex-start;
+}
+gtk-action-bar > .adw-action-bar-center {
+  display: flex;
+  align-items: center;
+}
+gtk-action-bar > .adw-action-bar-end {
+  flex: 1 1 0;
+  justify-content: flex-end;
+}
+
 adw-window-title {
   display: flex;
   flex-direction: column;
@@ -1376,6 +1503,11 @@ adw-window-title {
   line-height: 1.15;
   min-width: 0;
 }
+adw-window-title .adw-window-title-title,
+adw-window-title .adw-window-title-subtitle {
+  padding-left: 12px;
+  padding-right: 12px;
+}
 adw-window-title .adw-window-title-title {
   font-size: var(--font-size-base);
   font-weight: 700;
@@ -1458,14 +1590,21 @@ gtk-button {
   filter: brightness(0.92);
 }
 .adw-button.destructive-action {
-  background-color: var(--destructive-bg-color);
-  color: var(--destructive-fg-color);
+  --accent-bg-color: var(--destructive-bg-color);
+  --accent-fg-color: var(--destructive-fg-color);
+  --accent-color: var(--destructive-color);
+  color: var(--destructive-color);
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
 }
 .adw-button.destructive-action:hover {
-  filter: brightness(1.06);
+  background-color: color-mix(in srgb, currentColor 20%, transparent);
 }
 .adw-button.destructive-action:active {
-  filter: brightness(0.9);
+  background-color: color-mix(in srgb, currentColor 35%, transparent);
+}
+.adw-button.text-button {
+  padding-left: 17px;
+  padding-right: 17px;
 }
 .adw-button.icon-only {
   padding: 0;
@@ -1477,7 +1616,8 @@ gtk-button {
   border-radius: 9999px;
 }
 .adw-button.pill {
-  padding: 6px 20px;
+  min-height: 44px;
+  padding: 10px 32px;
   border-radius: 9999px;
 }
 .adw-button.raised {
@@ -1509,7 +1649,7 @@ gtk-button {
   background-color: color-mix(in srgb, black 48.75%, currentColor 16.25%);
 }
 
-.adw-button.image-text-button {
+.adw-button.image-text-button:not(.pill) {
   padding-left: 9px;
   padding-right: 9px;
 }
@@ -1758,9 +1898,9 @@ gtk-popover[data-position=bottom][data-align=end], gtk-popover[data-position=top
   align-items: center;
   justify-content: center;
   min-height: 34px;
-  width: 28px;
+  width: 24px;
   margin: 0;
-  padding: 0 var(--spacing-xs);
+  padding: 0 4px;
   border: none;
   border-left: 1px solid var(--separator-color);
   border-radius: 0 var(--button-radius) var(--button-radius) 0;
@@ -2629,12 +2769,15 @@ adw-banner .adw-banner-title {
   flex: 1 1 auto;
   min-width: 0;
   font-size: var(--font-size-base);
+  font-weight: 700;
 }
 adw-banner .adw-banner-button {
   flex-shrink: 0;
+  box-sizing: border-box;
+  min-height: 34px;
   border: none;
   border-radius: var(--button-radius);
-  padding: 4px 14px;
+  padding: 5px 17px;
   background: var(--button-bg-color);
   color: var(--window-fg-color);
   font-family: var(--font-family);
@@ -2659,40 +2802,45 @@ adw-status-page {
   align-items: center;
   justify-content: center;
   text-align: center;
-  gap: var(--spacing-m);
-  padding: var(--spacing-xl);
+  gap: 12px;
+  padding: 36px 12px;
   color: var(--window-fg-color);
 }
 adw-status-page .adw-status-page-icon {
-  width: 96px;
-  height: 96px;
+  width: 128px;
+  height: 128px;
+  margin-bottom: 24px;
   background-color: currentColor;
   opacity: 0.45;
   -webkit-mask-size: contain;
   mask-size: contain;
 }
 adw-status-page .adw-status-page-title {
-  font-size: 18pt;
   font-weight: 800;
+  font-size: 181%;
+  max-width: 600px;
 }
 adw-status-page .adw-status-page-description {
   font-size: var(--font-size-base);
   opacity: var(--dim-opacity);
-  max-width: 32ch;
+  max-width: 600px;
 }
 adw-status-page .adw-status-page-child {
-  margin-top: var(--spacing-s);
+  margin-top: 24px;
 }
 adw-status-page.compact {
-  gap: var(--spacing-s);
-  padding: var(--spacing-m);
+  padding: 24px 12px;
 }
 adw-status-page.compact .adw-status-page-icon {
-  width: 72px;
-  height: 72px;
+  width: 96px;
+  height: 96px;
+  margin-bottom: 12px;
 }
 adw-status-page.compact .adw-status-page-title {
-  font-size: 14pt;
+  font-size: 136%;
+}
+adw-status-page.compact .adw-status-page-child {
+  margin-top: 12px;
 }
 
 adw-switch-row,
@@ -2986,8 +3134,8 @@ adw-button-row {
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: 50px;
-  padding: var(--spacing-xs) var(--spacing-m);
+  min-height: 44px;
+  padding: 0 var(--spacing-m);
   border-bottom: 1px solid var(--card-shade-color);
   color: var(--card-fg-color);
   cursor: pointer;
@@ -3309,6 +3457,9 @@ adw-toolbar-view .adw-toolbar-view-content {
 adw-toolbar-view .adw-toolbar-view-content > :only-child {
   flex: 1 1 auto;
 }
+adw-toolbar-view .adw-toolbar-view-content > :only-child:is([valign=start], [valign=end], [valign=center]) {
+  flex-grow: 0;
+}
 adw-toolbar-view .adw-toolbar-view-top.raised,
 adw-toolbar-view .adw-toolbar-view-bottom.raised {
   background-color: var(--headerbar-bg-color);
@@ -3460,6 +3611,8 @@ adw-overlay-split-view {
   overflow: hidden;
 }
 adw-overlay-split-view .adw-osv-sidebar {
+  display: flex;
+  flex-direction: column;
   overflow-y: auto;
   flex-shrink: 0;
   z-index: 10;
@@ -3582,6 +3735,18 @@ adw-navigation-split-view .adw-nsv-content {
   flex: 1 1 auto;
   background-color: var(--window-bg-color);
 }
+adw-navigation-split-view .adw-nsv-sidebar > adw-navigation-page,
+adw-navigation-split-view .adw-nsv-content > adw-navigation-page {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+adw-navigation-split-view .adw-nsv-sidebar > adw-navigation-page > *,
+adw-navigation-split-view .adw-nsv-content > adw-navigation-page > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
 adw-navigation-split-view.sidebar-end .adw-nsv-content {
   order: 1;
 }
@@ -3607,6 +3772,7 @@ adw-navigation-split-view.collapsed .adw-nsv-sidebar[data-pane-visible=true] {
 adw-carousel {
   display: block;
   overflow: hidden;
+  contain: inline-size;
 }
 adw-carousel .adw-carousel-track {
   display: flex;
@@ -4334,6 +4500,7 @@ adw-bottom-sheet {
   color: var(--window-fg-color);
 }
 adw-bottom-sheet .adw-bottom-sheet-content {
+  display: grid;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
@@ -4385,9 +4552,41 @@ adw-bottom-sheet .adw-bottom-sheet-drag-handle {
 adw-bottom-sheet .adw-bottom-sheet-sheet-body {
   box-sizing: border-box;
 }
+adw-bottom-sheet .adw-bottom-sheet-bottom-bar {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  font: inherit;
+  font-weight: inherit;
+  color: inherit;
+  background: none;
+  box-shadow: none;
+  cursor: pointer;
+}
+adw-bottom-sheet .adw-bottom-sheet-bottom-bar:hover {
+  background-color: color-mix(in srgb, currentColor 5%, transparent);
+}
+adw-bottom-sheet .adw-bottom-sheet-bottom-bar:active {
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+}
+adw-bottom-sheet .adw-bottom-sheet-bottom-bar.inert {
+  cursor: default;
+}
+adw-bottom-sheet .adw-bottom-sheet-bottom-bar.inert:hover, adw-bottom-sheet .adw-bottom-sheet-bottom-bar.inert:active {
+  background: none;
+}
 adw-bottom-sheet.open .adw-bottom-sheet-sheet {
   transform: translateY(0);
 }
+adw-bottom-sheet.showing-bottom-bar .adw-bottom-sheet-sheet {
+  transform: translateY(0);
+  box-shadow: 0 0 0 1px rgba(0, 0, 6, 0.06), 0 2px 8px 2px rgba(0, 0, 6, 0.06), 0 3px 20px 10px rgba(0, 0, 6, 0.05);
+}
 adw-bottom-sheet:not(.modal) .adw-bottom-sheet-dimming {
   display: none;
 }
@@ -5164,6 +5363,35 @@ adw-dialog[data-presentation=bottom-sheet] .adw-dialog-box {
     transform: translateY(0);
   }
 }
+[halign=start] {
+  margin-inline-end: auto;
+}
+
+[halign=end] {
+  margin-inline-start: auto;
+}
+
+[halign=center] {
+  margin-inline: auto;
+}
+
+[valign=start] {
+  margin-block-end: auto;
+}
+
+[valign=end] {
+  margin-block-start: auto;
+}
+
+[valign=center] {
+  margin-block: auto;
+}
+
+gtk-box:not([orientation=vertical]) > [hexpand],
+gtk-box[orientation=vertical] > [vexpand] {
+  flex-grow: 1;
+}
+
 [hidden] {
   display: none !important;
 }