@gjsify/adwaita-web 0.32.0 → 0.34.0

package/dist/adwaita-web.css

@@ -234,6 +234,15 @@
   --headerbar-shade-color: rgba(0, 0, 6, 0.12);
   --separator-color: rgba(0, 0, 6, 0.1);
   --sidebar-bg-color: #ebebed;
+  --sidebar-fg-color: rgba(0, 0, 6, 0.8);
+  --sidebar-backdrop-color: #f2f2f4;
+  --sidebar-shade-color: rgba(0, 0, 6, 0.07);
+  --sidebar-border-color: rgba(0, 0, 6, 0.07);
+  --secondary-sidebar-bg-color: #f3f3f5;
+  --secondary-sidebar-fg-color: rgba(0, 0, 6, 0.8);
+  --secondary-sidebar-backdrop-color: #f6f6fa;
+  --secondary-sidebar-shade-color: rgba(0, 0, 6, 0.07);
+  --secondary-sidebar-border-color: rgba(0, 0, 6, 0.07);
   --card-bg-color: #ffffff;
   --card-fg-color: rgba(0, 0, 6, 0.8);
   --card-shade-color: rgba(0, 0, 6, 0.07);
@@ -293,6 +302,15 @@
     --headerbar-shade-color: rgba(0, 0, 6, 0.36);
     --separator-color: rgba(255, 255, 255, 0.08);
     --sidebar-bg-color: #2e2e32;
+    --sidebar-fg-color: #ffffff;
+    --sidebar-backdrop-color: #28282c;
+    --sidebar-shade-color: rgba(0, 0, 6, 0.25);
+    --sidebar-border-color: rgba(0, 0, 6, 0.36);
+    --secondary-sidebar-bg-color: #28282c;
+    --secondary-sidebar-fg-color: #ffffff;
+    --secondary-sidebar-backdrop-color: #252529;
+    --secondary-sidebar-shade-color: rgba(0, 0, 6, 0.25);
+    --secondary-sidebar-border-color: rgba(0, 0, 6, 0.36);
     --card-bg-color: rgba(255, 255, 255, 0.08);
     --card-fg-color: #ffffff;
     --card-shade-color: rgba(0, 0, 6, 0.36);
@@ -330,6 +348,15 @@
   --headerbar-shade-color: rgba(0, 0, 6, 0.36);
   --separator-color: rgba(255, 255, 255, 0.08);
   --sidebar-bg-color: #2e2e32;
+  --sidebar-fg-color: #ffffff;
+  --sidebar-backdrop-color: #28282c;
+  --sidebar-shade-color: rgba(0, 0, 6, 0.25);
+  --sidebar-border-color: rgba(0, 0, 6, 0.36);
+  --secondary-sidebar-bg-color: #28282c;
+  --secondary-sidebar-fg-color: #ffffff;
+  --secondary-sidebar-backdrop-color: #252529;
+  --secondary-sidebar-shade-color: rgba(0, 0, 6, 0.25);
+  --secondary-sidebar-border-color: rgba(0, 0, 6, 0.36);
   --card-bg-color: rgba(255, 255, 255, 0.08);
   --card-fg-color: #ffffff;
   --card-shade-color: rgba(0, 0, 6, 0.36);
@@ -2040,26 +2067,19 @@ adw-clamp {
 }
 
 adw-spinner {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   width: 16px;
   height: 16px;
-  border: 2px solid rgba(127, 127, 127, 0.25);
-  border-top-color: currentColor;
-  border-radius: 50%;
-  animation: adw-spinner-spin 0.8s linear infinite;
+  color: inherit;
 }
-@media (prefers-reduced-motion: reduce) {
-  adw-spinner {
-    animation: none;
-  }
+adw-spinner svg {
+  display: block;
+  flex: none;
 }
 
-@keyframes adw-spinner-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
 adw-avatar {
   display: inline-flex;
   align-items: center;
@@ -2360,6 +2380,13 @@ adw-combo-row .adw-row-value::after {
   mask-position: center;
 }
 
+adw-combo-row[data-presents-chooser=false] .adw-row-value::after {
+  display: none;
+}
+adw-combo-row[data-presents-chooser=false] select {
+  cursor: default;
+}
+
 adw-spin-row {
   display: flex;
   align-items: center;
@@ -2813,6 +2840,10 @@ adw-wrap-box {
   align-content: flex-start;
 }
 
+adw-wrap-box > * {
+  flex-shrink: var(--adw-wrap-box-child-shrink, 0);
+}
+
 adw-wrap-box[data-line-justify=fill] > *:not(:only-child) {
   flex-grow: 1;
 }
@@ -2835,6 +2866,21 @@ adw-wrap-box[orientation=vertical][data-line-justify=spread][data-last-line-just
   margin-top: calc(-1 * var(--adw-wrap-box-child-spacing, 0px));
 }
 
+.sidebar-pane {
+  background-color: var(--sidebar-bg-color);
+  color: var(--sidebar-fg-color);
+}
+
+.sidebar-pane .sidebar-pane {
+  background-color: transparent;
+  color: inherit;
+}
+
+.overlay-pane {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+}
+
 adw-overlay-split-view {
   display: flex;
   flex-direction: row;
@@ -2844,16 +2890,15 @@ adw-overlay-split-view {
   overflow: hidden;
 }
 adw-overlay-split-view .adw-osv-sidebar {
-  background-color: var(--sidebar-bg-color);
   overflow-y: auto;
   flex-shrink: 0;
-  transition: transform 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
   z-index: 10;
   align-self: stretch;
+  transition: opacity 0.2s ease;
 }
 adw-overlay-split-view .adw-osv-content {
   flex: 1;
-  min-width: 0;
+  min-width: min-content;
   min-height: 0;
   display: flex;
   flex-direction: column;
@@ -2862,49 +2907,65 @@ adw-overlay-split-view .adw-osv-content {
 adw-overlay-split-view:not(.collapsed) .adw-osv-sidebar {
   position: relative;
 }
-adw-overlay-split-view:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
-  transform: translateX(-100%);
-  opacity: 0;
-  pointer-events: none;
-}
 adw-overlay-split-view:not(.collapsed).sidebar-end .adw-osv-content {
   order: 1;
 }
 adw-overlay-split-view:not(.collapsed).sidebar-end .adw-osv-sidebar {
   order: 2;
-  border-inline-start: 1px solid var(--separator-color);
 }
-adw-overlay-split-view:not(.collapsed):not(.show-sidebar).sidebar-end .adw-osv-sidebar {
-  transform: translateX(100%);
+adw-overlay-split-view:not(.collapsed) .adw-osv-sidebar {
+  border-inline-end: none;
+  border-inline-start: none;
+}
+adw-overlay-split-view:not(.collapsed).sidebar-at-visual-start .adw-osv-sidebar {
+  border-right: 1px solid var(--separator-color);
+}
+adw-overlay-split-view:not(.collapsed):not(.sidebar-at-visual-start) .adw-osv-sidebar {
+  border-left: 1px solid var(--separator-color);
 }
 adw-overlay-split-view.collapsed .adw-osv-sidebar {
   position: absolute;
   top: 0;
   bottom: 0;
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
+}
+adw-overlay-split-view.collapsed.sidebar-at-visual-start .adw-osv-sidebar {
   left: 0;
-  transform: translateX(-100%);
+  right: auto;
+}
+adw-overlay-split-view.collapsed:not(.sidebar-at-visual-start) .adw-osv-sidebar {
+  left: auto;
+  right: 0;
+}
+adw-overlay-split-view.collapsed:not(.show-sidebar) .adw-osv-sidebar {
   opacity: 0;
   pointer-events: none;
 }
-adw-overlay-split-view.collapsed.sidebar-end .adw-osv-sidebar {
+adw-overlay-split-view.collapsed:not(.show-sidebar).sidebar-at-visual-start .adw-osv-sidebar {
   left: auto;
-  right: 0;
-  transform: translateX(100%);
+  right: 100%;
 }
-adw-overlay-split-view.collapsed.show-sidebar .adw-osv-sidebar {
-  transform: translateX(0);
-  opacity: 1;
-  pointer-events: auto;
+adw-overlay-split-view.collapsed:not(.show-sidebar):not(.sidebar-at-visual-start) .adw-osv-sidebar {
+  left: 100%;
+  right: auto;
+}
+adw-overlay-split-view:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
 }
 adw-overlay-split-view .adw-osv-backdrop {
   display: none;
 }
-adw-overlay-split-view.collapsed.show-sidebar .adw-osv-backdrop {
+adw-overlay-split-view.collapsed .adw-osv-backdrop:not([hidden]) {
   display: block;
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.3);
   z-index: 9;
+  transition: opacity 0.2s ease;
 }
 
 .adw-sidebar-content {
@@ -2942,27 +3003,35 @@ adw-navigation-split-view .adw-nsv-sidebar {
   flex-direction: column;
   min-height: 0;
   flex-shrink: 0;
-  border-right: 1px solid var(--separator-color);
-  background-color: var(--sidebar-bg-color);
 }
 adw-navigation-split-view .adw-nsv-content {
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-width: min-content;
   min-height: 0;
   flex: 1 1 auto;
   background-color: var(--window-bg-color);
 }
-adw-navigation-split-view.collapsed.show-content .adw-nsv-sidebar {
-  display: none;
+adw-navigation-split-view.sidebar-end .adw-nsv-content {
+  order: 1;
 }
-adw-navigation-split-view.collapsed:not(.show-content) .adw-nsv-content {
+adw-navigation-split-view.sidebar-end .adw-nsv-sidebar {
+  order: 2;
+}
+adw-navigation-split-view.sidebar-at-visual-start .adw-nsv-sidebar {
+  border-right: 1px solid var(--separator-color);
+}
+adw-navigation-split-view:not(.sidebar-at-visual-start) .adw-nsv-sidebar {
+  border-left: 1px solid var(--separator-color);
+}
+adw-navigation-split-view.collapsed [data-pane-visible=false] {
   display: none;
 }
-adw-navigation-split-view.collapsed:not(.show-content) .adw-nsv-sidebar {
+adw-navigation-split-view.collapsed .adw-nsv-sidebar[data-pane-visible=true] {
   flex: 1 1 auto;
   max-width: none;
   border-right: none;
+  border-left: none;
 }
 
 adw-carousel {
@@ -3154,18 +3223,11 @@ adw-tab-view .adw-tab-icon[hidden],
 adw-tab-view .adw-tab-indicator[hidden] {
   display: none;
 }
-adw-tab-view .adw-tab-icon.loading {
-  background: none;
-  mask-image: none;
-  border: 2px solid rgba(127, 127, 127, 0.25);
-  border-top-color: currentColor;
-  border-radius: 50%;
-  animation: adw-spinner-spin 0.8s linear infinite;
+adw-tab-view .adw-tab-spinner {
+  flex: none;
 }
-@media (prefers-reduced-motion: reduce) {
-  adw-tab-view .adw-tab-icon.loading {
-    animation: none;
-  }
+adw-tab-view .adw-tab-spinner[hidden] {
+  display: none;
 }
 adw-tab-view .adw-tab.pinned {
   padding: 0 var(--spacing-xs);
@@ -3644,6 +3706,8 @@ adw-navigation-view {
 }
 adw-navigation-view .adw-navigation-view-pages {
   flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
   position: relative;
   box-sizing: border-box;
   min-height: 0;
@@ -3651,8 +3715,8 @@ adw-navigation-view .adw-navigation-view-pages {
 }
 adw-navigation-view .adw-navigation-page {
   box-sizing: border-box;
-  position: absolute;
-  inset: 0;
+  position: relative;
+  flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   overflow: auto;
@@ -3797,7 +3861,6 @@ adw-sidebar .adw-sidebar-item {
   display: flex;
   align-items: center;
   gap: var(--spacing-m);
-  width: 100%;
   min-height: 36px;
   margin: 0 var(--spacing-xs) 2px;
   padding: 3px 14px;