@gjsify/adwaita-web 0.55.0 → 0.56.0

package/README.md

@@ -219,6 +219,14 @@ if (!isIconAvailable('dialog-error')) {
 <adw-status-page icon="dialog-error" title="Could not connect"></adw-status-page>
 ```
 
+A status page also takes libadwaita's `.compact` style class as a boolean attribute, for a
+narrow surface such as an extension popup — a 96px icon, 24px margins and the smaller
+`.title-2` heading (`style-classes.md` "Compact Status Page"):
+
+```html
+<adw-status-page compact icon="dialog-error" title="No results"></adw-status-page>
+```
+
 `registerIcon(name, svg)` takes the icon's **SVG source** — exactly what
 `@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

package/dist/adwaita-web.css

@@ -2066,7 +2066,8 @@ adw-card,
   box-shadow: inset 6px 0 6px -6px color-mix(in srgb, currentColor 6%, transparent);
 }
 
-adw-window {
+adw-window,
+adw-application-window {
   display: flex;
   flex-direction: column;
   background-color: var(--window-bg-color);
@@ -2079,7 +2080,9 @@ adw-window {
   outline: 1px solid rgba(255, 255, 255, 0.07);
   outline-offset: -1px;
 }
-adw-window.maximized, adw-window.fullscreen {
+adw-window.maximized, adw-window.fullscreen,
+adw-application-window.maximized,
+adw-application-window.fullscreen {
   --window-radius: 0px;
   outline: none;
   box-shadow: none;
@@ -2093,6 +2096,11 @@ adw-window.maximized, adw-window.fullscreen {
   min-width: 0;
 }
 
+.adw-window-content > gtk-box {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
 gtk-window,
 gtk-application-window {
   display: flex;
@@ -2234,7 +2242,8 @@ adw-header-bar .adw-header-btn:active {
 }
 
 .devel adw-header-bar,
-adw-window.devel adw-header-bar {
+adw-window.devel adw-header-bar,
+adw-application-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);
 }
 
@@ -3307,6 +3316,9 @@ adw-toggle-group {
   border-radius: var(--button-radius);
   background-color: var(--button-bg-color);
 }
+adw-toggle-group[disabled] {
+  background-color: color-mix(in srgb, var(--button-bg-color) var(--disabled-opacity), transparent);
+}
 adw-toggle-group .adw-toggle-group-inner {
   display: flex;
   align-items: stretch;
@@ -3345,6 +3357,13 @@ adw-toggle-group .adw-toggle:focus-visible {
   outline: 2px solid var(--accent-color);
   outline-offset: 1px;
 }
+adw-toggle-group .adw-toggle:disabled {
+  opacity: var(--disabled-opacity);
+  cursor: default;
+}
+adw-toggle-group .adw-toggle:disabled:hover, adw-toggle-group .adw-toggle:disabled:active {
+  background-color: transparent;
+}
 adw-toggle-group .adw-toggle.active {
   background-color: var(--active-toggle-bg-color);
   color: var(--active-toggle-fg-color);
@@ -3353,6 +3372,9 @@ adw-toggle-group .adw-toggle.active {
 adw-toggle-group .adw-toggle.active:hover {
   background-color: var(--active-toggle-bg-color);
 }
+adw-toggle-group .adw-toggle.active:disabled {
+  box-shadow: none;
+}
 adw-toggle-group.round {
   border-radius: 17px;
 }
@@ -5240,6 +5262,9 @@ adw-preferences-row {
 adw-preferences-row .adw-row-title {
   user-select: none;
 }
+adw-preferences-row .adw-row-title:has(~ .adw-preferences-row-content[hidden]) {
+  flex: 1 1 auto;
+}
 adw-preferences-row .adw-preferences-row-content {
   display: flex;
   align-items: center;
@@ -6284,6 +6309,10 @@ adw-combo-row:last-child {
   border-bottom: none;
 }
 
+[data-row-tooltip] {
+  align-self: stretch;
+}
+
 .adw-row-text {
   display: flex;
   flex-direction: column;
@@ -6318,7 +6347,10 @@ adw-combo-row:last-child {
   flex-shrink: 0;
 }
 
-adw-action-row {
+adw-action-row,
+adw-switch-row,
+adw-combo-row,
+adw-spin-row {
   display: flex;
   align-items: center;
   gap: var(--spacing-m);
@@ -6327,46 +6359,90 @@ adw-action-row {
   border-bottom: 1px solid var(--card-shade-color);
   color: var(--card-fg-color);
 }
-adw-action-row:last-child {
+adw-action-row:last-child,
+adw-switch-row:last-child,
+adw-combo-row:last-child,
+adw-spin-row:last-child {
   border-bottom: none;
 }
-adw-action-row.activatable {
+adw-action-row.activatable,
+adw-switch-row.activatable,
+adw-combo-row.activatable,
+adw-spin-row.activatable {
   cursor: pointer;
 }
-adw-action-row.activatable:hover {
+adw-action-row.activatable:hover,
+adw-switch-row.activatable:hover,
+adw-combo-row.activatable:hover,
+adw-spin-row.activatable:hover {
   background-color: var(--button-bg-color);
 }
-adw-action-row.activatable:active {
+adw-action-row.activatable:active,
+adw-switch-row.activatable:active,
+adw-combo-row.activatable:active,
+adw-spin-row.activatable:active {
   background-color: var(--button-active-color);
 }
 adw-action-row .adw-action-row-prefix,
-adw-action-row .adw-action-row-suffix {
+adw-action-row .adw-action-row-suffix,
+adw-action-row .adw-switch-row-prefix,
+adw-switch-row .adw-action-row-prefix,
+adw-switch-row .adw-action-row-suffix,
+adw-switch-row .adw-switch-row-prefix,
+adw-combo-row .adw-action-row-prefix,
+adw-combo-row .adw-action-row-suffix,
+adw-combo-row .adw-switch-row-prefix,
+adw-spin-row .adw-action-row-prefix,
+adw-spin-row .adw-action-row-suffix,
+adw-spin-row .adw-switch-row-prefix {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
   flex-shrink: 0;
 }
-adw-action-row .adw-action-row-text {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-adw-action-row .adw-row-title {
+adw-action-row .adw-row-title,
+adw-switch-row .adw-row-title,
+adw-combo-row .adw-row-title,
+adw-spin-row .adw-row-title {
   font-size: var(--font-size-base);
   color: var(--card-fg-color);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  white-space: normal;
+  overflow-wrap: break-word;
 }
-adw-action-row .adw-row-subtitle {
+adw-action-row .adw-row-subtitle,
+adw-switch-row .adw-row-subtitle,
+adw-combo-row .adw-row-subtitle,
+adw-spin-row .adw-row-subtitle {
   font-size: var(--font-size-small);
   opacity: var(--dim-opacity);
   color: var(--card-fg-color);
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+adw-action-row .adw-row-text.adw-row-clamp .adw-row-title,
+adw-action-row .adw-row-text.adw-row-clamp .adw-row-subtitle,
+adw-switch-row .adw-row-text.adw-row-clamp .adw-row-title,
+adw-switch-row .adw-row-text.adw-row-clamp .adw-row-subtitle,
+adw-combo-row .adw-row-text.adw-row-clamp .adw-row-title,
+adw-combo-row .adw-row-text.adw-row-clamp .adw-row-subtitle,
+adw-spin-row .adw-row-text.adw-row-clamp .adw-row-title,
+adw-spin-row .adw-row-text.adw-row-clamp .adw-row-subtitle {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: var(--adw-row-ellipsize-overflow, ellipsis);
+}
+adw-action-row .adw-row-text.adw-row-clamp .adw-row-title,
+adw-switch-row .adw-row-text.adw-row-clamp .adw-row-title,
+adw-combo-row .adw-row-text.adw-row-clamp .adw-row-title,
+adw-spin-row .adw-row-text.adw-row-clamp .adw-row-title {
+  -webkit-line-clamp: var(--adw-row-title-lines, 1);
+}
+adw-action-row .adw-row-text.adw-row-clamp .adw-row-subtitle,
+adw-switch-row .adw-row-text.adw-row-clamp .adw-row-subtitle,
+adw-combo-row .adw-row-text.adw-row-clamp .adw-row-subtitle,
+adw-spin-row .adw-row-text.adw-row-clamp .adw-row-subtitle {
+  -webkit-line-clamp: var(--adw-row-subtitle-lines, 1);
 }
 
 adw-action-row.property .adw-row-title,
@@ -6588,6 +6664,7 @@ adw-button-row .adw-button-row-contents {
   justify-content: center;
   gap: var(--spacing-xs);
   min-width: 0;
+  flex: 1 1 auto;
 }
 adw-button-row .adw-button-row-title {
   font-size: var(--font-size-base);
@@ -6656,9 +6733,28 @@ adw-expander-row .adw-expander-row-header:active {
 adw-expander-row .adw-row-title {
   font-size: var(--font-size-base);
   color: var(--card-fg-color);
-  white-space: nowrap;
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+adw-expander-row .adw-row-subtitle {
+  font-size: var(--font-size-small);
+  opacity: var(--dim-opacity);
+  color: var(--card-fg-color);
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+adw-expander-row .adw-row-text.adw-row-clamp .adw-row-title,
+adw-expander-row .adw-row-text.adw-row-clamp .adw-row-subtitle {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: var(--adw-row-ellipsize-overflow, ellipsis);
+}
+adw-expander-row .adw-row-text.adw-row-clamp .adw-row-title {
+  -webkit-line-clamp: var(--adw-row-title-lines, 1);
+}
+adw-expander-row .adw-row-text.adw-row-clamp .adw-row-subtitle {
+  -webkit-line-clamp: var(--adw-row-subtitle-lines, 1);
 }
 adw-expander-row .adw-expander-row-header > .adw-row-text {
   flex: 1;
@@ -10420,11 +10516,17 @@ adw-shortcuts-item + adw-shortcuts-item {
   margin-block: auto;
 }
 
-gtk-box:not([orientation=vertical]) > [hexpand],
-gtk-box[orientation=vertical] > [vexpand] {
+gtk-box:not([orientation=vertical]) > [hexpand]:not([hexpand=false]),
+gtk-box[orientation=vertical] > [vexpand]:not([vexpand=false]) {
   flex-grow: 1;
 }
 
+gtk-box:not([orientation=vertical]) > [hexpand=false],
+gtk-box[orientation=vertical] > [vexpand=false] {
+  flex-grow: 0;
+  flex-basis: auto;
+}
+
 [hidden] {
   display: none !important;
 }