@gjsify/adwaita-web 0.1.6 → 0.1.8

package/{src/adwaita-css.ts → dist/adwaita-web.css}

@@ -1,70 +1,34 @@
-// Adwaita CSS subset for browser targets.
-// Colors from refs/libadwaita/src/stylesheet/_colors.scss (canonical).
-// Component styles adapted from Adwaita Web UI Framework (https://github.com/mclellac/adwaita-web).
-// Copyright (c) GNOME contributors (libadwaita), LGPLv2.1+.
-// Copyright (c) 2025 csm (adwaita-web). MIT License.
-// Modifications: Extracted as CSS-in-JS for @gjsify/adwaita-web.
-
-import { editPasteSymbolic, goDownSymbolic, sidebarShowSymbolic } from '@gjsify/adwaita-icons/actions';
-import { toDataUri } from '@gjsify/adwaita-icons/utils';
-
-const goDownDataUri = toDataUri(goDownSymbolic);
-const editPasteDataUri = toDataUri(editPasteSymbolic);
-const sidebarShowDataUri = toDataUri(sidebarShowSymbolic);
-
-export const adwaitaCSS = `
-/* ═══════════════════════════════════════════════════════════════
-   Adwaita CSS Custom Properties — Light Theme (default)
-   ═══════════════════════════════════════════════════════════════ */
 :root {
-  /* Icons (Adwaita symbolic, encoded as data-URIs) */
-  --icon-edit-paste: ${editPasteDataUri};
-  --icon-go-down: ${goDownDataUri};
-  --icon-sidebar-show: ${sidebarShowDataUri};
+  --icon-edit-paste: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%207%200%20c%20-0.554688%200%20-1%200.445312%20-1%201%20h%20-2%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%209%20c%200%201.644531%201.355469%203%203%203%20h%208%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-9%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20h%20-2%20c%200%20-0.554688%20-0.445312%20-1%20-1%20-1%20z%20m%20-3%203%20h%201%20v%201%20c%200%200.554688%200.445312%201%201%201%20h%204%20c%200.554688%200%201%20-0.445312%201%20-1%20v%20-1%20h%201%20c%200.570312%200%201%200.429688%201%201%20v%209%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-8%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-9%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
+  --icon-go-down: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%201%205%20c%200%20-0.265625%200.105469%20-0.519531%200.292969%20-0.707031%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20l%205.292969%205.292969%20l%205.292969%20-5.292969%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20c%200.1875%200.1875%200.292969%200.441406%200.292969%200.707031%20s%20-0.105469%200.519531%20-0.292969%200.707031%20l%20-6%206%20c%20-0.390625%200.390625%20-1.023437%200.390625%20-1.414062%200%20l%20-6%20-6%20c%20-0.1875%20-0.1875%20-0.292969%20-0.441406%20-0.292969%20-0.707031%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
+  --icon-sidebar-show: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cg%20fill%3D'currentColor'%3E%20%3Cpath%20d%3D'm%206%2013%20v%20-10%20h%20-3%20c%20-0.550781%200%20-1%200.449219%20-1%201%20v%208%20c%200%200.550781%200.449219%201%201%201%20z%20m%200%200'%20fill-opacity%3D'0.34902'%2F%3E%20%3Cpath%20d%3D'm%203%201%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%208%20c%200%201.644531%201.355469%203%203%203%20h%2010%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-8%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20z%20m%200%202%20h%203%20v%2010%20h%20-3%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-8%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%204%200%20h%206%20c%200.570312%200%201%200.429688%201%201%20v%208%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-6%20z%20m%200%200'%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
+}
 
-  /* Window */
+:root {
   --window-bg-color: #fafafb;
   --window-fg-color: rgba(0, 0, 6, 0.8);
-
-  /* Views */
   --view-bg-color: #ffffff;
   --view-fg-color: rgba(0, 0, 6, 0.8);
-
-  /* Header bar */
   --headerbar-bg-color: #ffffff;
   --headerbar-fg-color: rgba(0, 0, 6, 0.8);
   --headerbar-shade-color: rgba(0, 0, 6, 0.12);
-
-  /* Sidebar */
   --sidebar-bg-color: #ebebed;
-
-  /* Cards / boxed lists */
   --card-bg-color: #ffffff;
   --card-fg-color: rgba(0, 0, 6, 0.8);
   --card-shade-color: rgba(0, 0, 6, 0.07);
-
-  /* Accent */
   --accent-bg-color: #3584e4;
   --accent-fg-color: #ffffff;
   --accent-color: #1c71d8;
-
-  /* Switch */
   --switch-off-bg: rgba(0, 0, 0, 0.2);
   --switch-knob-bg: #ffffff;
-
-  /* Layout */
   --window-radius: 15px;
   --card-radius: 12px;
   --button-radius: 9px;
-
-  /* Spacing */
   --spacing-xs: 6px;
   --spacing-s: 9px;
   --spacing-m: 12px;
   --spacing-l: 18px;
   --spacing-xl: 24px;
-
-  /* Typography — GNOME default: Adwaita Sans 11 */
   --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;
   --font-size-base: 11pt;
   --font-size-small: 9pt;
@@ -72,9 +36,6 @@ export const adwaitaCSS = `
   --dim-opacity: 0.55;
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   Dark Theme — auto via prefers-color-scheme
-   ═══════════════════════════════════════════════════════════════ */
 @media (prefers-color-scheme: dark) {
   :root:not(.theme-light) {
     --window-bg-color: #222226;
@@ -93,8 +54,6 @@ export const adwaitaCSS = `
     --switch-knob-bg: #deddda;
   }
 }
-
-/* Dark theme manual override */
 :root.theme-dark {
   --window-bg-color: #222226;
   --window-fg-color: #ffffff;
@@ -112,11 +71,6 @@ export const adwaitaCSS = `
   --switch-knob-bg: #deddda;
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   Component Styles
-   ═══════════════════════════════════════════════════════════════ */
-
-/* --- adw-window --- */
 adw-window {
   display: flex;
   flex-direction: column;
@@ -125,16 +79,12 @@ adw-window {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   border-radius: var(--window-radius);
-  box-shadow:
-    0 0 14px 5px rgb(0 0 0 / 15%),
-    0 0 5px 2px rgb(0 0 0 / 10%),
-    0 0 0 1px rgb(0 0 0 / 5%);
+  box-shadow: 0 0 14px 5px rgba(0, 0, 0, 0.15), 0 0 5px 2px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
   overflow: hidden;
-  outline: 1px solid rgb(255 255 255 / 7%);
+  outline: 1px solid rgba(255, 255, 255, 0.07);
   outline-offset: -1px;
 }
 
-/* --- adw-header-bar --- */
 adw-header-bar {
   display: flex;
   align-items: center;
@@ -145,13 +95,11 @@ adw-header-bar {
   box-shadow: inset 0 -1px var(--headerbar-shade-color);
   flex-shrink: 0;
 }
-
 adw-header-bar .adw-header-bar-center {
   flex: 1;
   display: flex;
   justify-content: center;
 }
-
 adw-header-bar .adw-header-bar-title {
   font-weight: bold;
   font-size: var(--font-size-base);
@@ -159,21 +107,18 @@ adw-header-bar .adw-header-bar-title {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 adw-header-bar .adw-header-bar-start {
   display: flex;
   align-items: center;
   padding: 0 6px;
   gap: 4px;
 }
-
 adw-header-bar .adw-header-bar-end {
   display: flex;
   align-items: center;
   padding: 0 6px;
   gap: 4px;
 }
-
 adw-header-bar .adw-header-btn {
   position: relative;
   width: 34px;
@@ -187,24 +132,19 @@ adw-header-bar .adw-header-btn {
   margin: 0;
   flex-shrink: 0;
 }
-
 adw-header-bar .adw-header-btn:hover {
   background: rgba(128, 128, 128, 0.12);
 }
-
 adw-header-bar .adw-header-btn:active {
   background: rgba(128, 128, 128, 0.22);
 }
 
-/* --- adw-preferences-group --- */
 adw-preferences-group {
   display: block;
 }
-
 adw-preferences-group .adw-preferences-group-header {
   padding: var(--spacing-xs) 2px;
 }
-
 adw-preferences-group .adw-preferences-group-title {
   font-size: var(--font-size-small);
   font-weight: 700;
@@ -214,19 +154,25 @@ adw-preferences-group .adw-preferences-group-title {
   margin: 0;
   color: var(--window-fg-color);
 }
-
 adw-preferences-group .adw-preferences-group-listbox {
   background-color: var(--card-bg-color);
   color: var(--card-fg-color);
   border-radius: var(--card-radius);
-  box-shadow:
-    0 0 0 1px rgb(0 0 6 / 3%),
-    0 1px 3px 1px rgb(0 0 6 / 7%),
-    0 2px 6px 2px rgb(0 0 6 / 3%);
+  box-shadow: 0 0 0 1px rgba(0, 0, 6, 0.03), 0 1px 3px 1px rgba(0, 0, 6, 0.07), 0 2px 6px 2px rgba(0, 0, 6, 0.03);
+  overflow: hidden;
+}
+
+adw-card,
+.adw-card {
+  display: block;
+  background-color: var(--card-bg-color);
+  color: var(--card-fg-color);
+  border-radius: var(--card-radius);
+  padding: var(--spacing-l);
+  box-shadow: 0 0 0 1px rgba(0, 0, 6, 0.03), 0 1px 3px 1px rgba(0, 0, 6, 0.07), 0 2px 6px 2px rgba(0, 0, 6, 0.03);
   overflow: hidden;
 }
 
-/* --- Row base (shared by switch-row, combo-row) --- */
 adw-switch-row,
 adw-combo-row {
   display: flex;
@@ -237,19 +183,23 @@ adw-combo-row {
   gap: var(--spacing-m);
   border-bottom: 1px solid var(--card-shade-color);
 }
-
 adw-switch-row:last-child,
 adw-combo-row:last-child {
   border-bottom: none;
 }
 
-/* --- adw-switch-row --- */
+.adw-separator-vertical {
+  width: 1px;
+  align-self: stretch;
+  background-color: var(--card-shade-color);
+  flex-shrink: 0;
+}
+
 adw-switch-row .adw-row-title {
   flex: 1;
   font-size: var(--font-size-base);
   color: var(--card-fg-color);
 }
-
 adw-switch-row .adw-switch {
   position: relative;
   display: inline-block;
@@ -257,14 +207,12 @@ adw-switch-row .adw-switch {
   height: 24px;
   flex-shrink: 0;
 }
-
 adw-switch-row .adw-switch input {
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
 }
-
 adw-switch-row .adw-switch-slider {
   position: absolute;
   cursor: pointer;
@@ -273,7 +221,6 @@ adw-switch-row .adw-switch-slider {
   border-radius: 12px;
   transition: background-color 0.15s ease-out;
 }
-
 adw-switch-row .adw-switch-slider::before {
   content: "";
   position: absolute;
@@ -284,34 +231,28 @@ adw-switch-row .adw-switch-slider::before {
   background-color: var(--switch-knob-bg);
   border-radius: 50%;
   transition: transform 0.15s ease-out;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
-
 adw-switch-row .adw-switch input:checked + .adw-switch-slider {
   background-color: var(--accent-bg-color);
 }
-
 adw-switch-row .adw-switch input:checked + .adw-switch-slider::before {
   transform: translateX(20px);
 }
-
 adw-switch-row .adw-switch input:focus-visible + .adw-switch-slider {
   outline: 2px solid var(--accent-color);
   outline-offset: 2px;
 }
 
-/* --- adw-combo-row --- */
 adw-combo-row {
   position: relative;
   cursor: pointer;
 }
-
 adw-combo-row .adw-row-title {
   font-size: var(--font-size-base);
   color: var(--card-fg-color);
   pointer-events: none;
 }
-
 adw-combo-row select {
   appearance: none;
   -webkit-appearance: none;
@@ -323,11 +264,6 @@ adw-combo-row select {
   color: var(--card-fg-color);
   cursor: pointer;
   text-align: right;
-  background-image: ${goDownDataUri};
-  background-repeat: no-repeat;
-  background-position: right 4px center;
-  background-size: 12px 12px;
-  /* Stretch select over the entire row to make it clickable anywhere */
   position: absolute;
   inset: 0;
   opacity: 0;
@@ -335,7 +271,14 @@ adw-combo-row select {
   height: 100%;
   z-index: 1;
 }
-
+adw-combo-row select:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -1px;
+}
+adw-combo-row select option {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+}
 adw-combo-row .adw-row-value {
   font-size: var(--font-size-base);
   color: var(--card-fg-color);
@@ -344,36 +287,22 @@ adw-combo-row .adw-row-value {
   align-items: center;
   gap: 4px;
 }
-
 adw-combo-row .adw-row-value::after {
   content: "";
   display: inline-block;
   width: 12px;
   height: 12px;
-  background-image: ${goDownDataUri};
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-
-adw-combo-row select:focus-visible {
-  outline: 2px solid var(--accent-color);
-  outline-offset: -1px;
-}
-
-adw-combo-row select option {
-  background-color: var(--window-bg-color);
-  color: var(--window-fg-color);
-}
-
-/* --- Utility: separator --- */
-.adw-separator-vertical {
-  width: 1px;
-  align-self: stretch;
-  background-color: var(--card-shade-color);
-  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask-image: var(--icon-go-down);
+  mask-image: var(--icon-go-down);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
 }
 
-/* --- adw-spin-row --- */
 adw-spin-row {
   display: flex;
   align-items: center;
@@ -383,11 +312,9 @@ adw-spin-row {
   gap: var(--spacing-m);
   border-bottom: 1px solid var(--card-shade-color);
 }
-
 adw-spin-row:last-child {
   border-bottom: none;
 }
-
 adw-spin-row .adw-row-title {
   flex: 1;
   font-size: var(--font-size-base);
@@ -399,7 +326,6 @@ adw-spin-row .adw-row-title {
   align-items: center;
   gap: 2px;
 }
-
 .adw-spin-control button {
   width: 32px;
   height: 32px;
@@ -414,11 +340,9 @@ adw-spin-row .adw-row-title {
   justify-content: center;
   flex-shrink: 0;
 }
-
 .adw-spin-control button:hover {
   background: rgba(128, 128, 128, 0.15);
 }
-
 .adw-spin-control input {
   width: 56px;
   text-align: center;
@@ -430,14 +354,11 @@ adw-spin-row .adw-row-title {
   font-size: var(--font-size-base);
   padding: 4px 2px;
 }
-
 .adw-spin-control input:focus {
   outline: 2px solid var(--accent-color);
   outline-offset: -1px;
 }
 
-/* --- adw-toast-overlay ---
-   Reference: refs/adwaita-web/adwaita-web/scss/_toast_overlay.scss */
 adw-toast-overlay {
   position: fixed;
   bottom: 24px;
@@ -451,8 +372,6 @@ adw-toast-overlay {
   pointer-events: none;
 }
 
-/* --- adw-toast ---
-   Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss */
 .adw-toast {
   background-color: #3d3846;
   color: #ffffff;
@@ -468,35 +387,26 @@ adw-toast-overlay {
   pointer-events: auto;
   font-family: var(--font-family);
   font-size: var(--font-size-base);
-
   opacity: 0;
   transform: translateY(100%) scale(0.9);
-  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),
-              transform 0.2s cubic-bezier(0, 0, 0.2, 1);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);
   will-change: transform, opacity;
 }
-
 .adw-toast.visible {
   opacity: 1;
   transform: translateY(0) scale(1);
 }
-
 .adw-toast.hiding {
   opacity: 0;
   transform: translateY(100%) scale(0.9);
   transition-duration: 0.15s;
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
-
 .adw-toast .adw-toast-title {
   font-weight: normal;
   line-height: 1.3;
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   adw-overlay-split-view
-   Reference: Adw.OverlaySplitView from libadwaita
-   ═══════════════════════════════════════════════════════════════ */
 adw-overlay-split-view {
   display: flex;
   flex-direction: row;
@@ -505,7 +415,6 @@ adw-overlay-split-view {
   position: relative;
   overflow: hidden;
 }
-
 adw-overlay-split-view .adw-osv-sidebar {
   background-color: var(--sidebar-bg-color);
   overflow-y: auto;
@@ -514,7 +423,6 @@ adw-overlay-split-view .adw-osv-sidebar {
   z-index: 10;
   align-self: stretch;
 }
-
 adw-overlay-split-view .adw-osv-content {
   flex: 1;
   min-width: 0;
@@ -523,21 +431,14 @@ adw-overlay-split-view .adw-osv-content {
   flex-direction: column;
   align-self: stretch;
 }
-
-/* Docked mode (not collapsed) — sidebar beside content */
 adw-overlay-split-view:not(.collapsed) .adw-osv-sidebar {
   position: relative;
 }
-
-/* Docked hide: slide left and collapse space via negative margin.
-   Sidebar keeps its intrinsic width so internal elements don't reflow. */
 adw-overlay-split-view:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
   transform: translateX(-100%);
   opacity: 0;
   pointer-events: none;
 }
-
-/* Overlay mode (collapsed) — sidebar on top of content */
 adw-overlay-split-view.collapsed .adw-osv-sidebar {
   position: absolute;
   top: 0;
@@ -547,24 +448,19 @@ adw-overlay-split-view.collapsed .adw-osv-sidebar {
   opacity: 0;
   pointer-events: none;
 }
-
 adw-overlay-split-view.collapsed.sidebar-end .adw-osv-sidebar {
   left: auto;
   right: 0;
   transform: translateX(100%);
 }
-
 adw-overlay-split-view.collapsed.show-sidebar .adw-osv-sidebar {
   transform: translateX(0);
   opacity: 1;
   pointer-events: auto;
 }
-
-/* Backdrop — visible only in overlay mode when sidebar is open */
 adw-overlay-split-view .adw-osv-backdrop {
   display: none;
 }
-
 adw-overlay-split-view.collapsed.show-sidebar .adw-osv-backdrop {
   display: block;
   position: absolute;
@@ -573,9 +469,15 @@ adw-overlay-split-view.collapsed.show-sidebar .adw-osv-backdrop {
   z-index: 9;
 }
 
-/* Sidebar toggle button — sidebar-show-symbolic icon via CSS mask */
+.adw-sidebar-content {
+  padding: var(--spacing-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}
+
 .adw-sidebar-toggle-icon::after {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
   background-color: currentColor;
@@ -589,4 +491,4 @@ adw-overlay-split-view.collapsed.show-sidebar .adw-osv-backdrop {
   mask-position: center;
   pointer-events: none;
 }
-`;
+/*# sourceMappingURL=adwaita-web.css.map */

package/dist/adwaita-web.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_icons.generated.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_variables.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_theme.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_window.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_headerbar.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_preferences.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_card.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_switch_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_combo_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_spin_row.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_toast.scss","file:///__w/gjsify/gjsify/packages/web/adwaita-web/scss/_overlay_split_view.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;;;ACCF;EAEE;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;;AC/BF;EACE;IAlBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AAWF;EAxBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACbF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;EACA;EACA;;;ACdF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACxDN;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA,YACE;EAGF;;;ACzBJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,YACE;EAGF;;;ACXF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;;AClBA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;;ACvDJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;ACxDN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;ACpDJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAKF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","sourcesContent":["// _icons.generated.scss — auto-generated by scripts/build-scss.mjs\n// DO NOT EDIT — regenerated on every build from @gjsify/adwaita-icons.\n\n:root {\n  --icon-edit-paste: url(\"data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%207%200%20c%20-0.554688%200%20-1%200.445312%20-1%201%20h%20-2%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%209%20c%200%201.644531%201.355469%203%203%203%20h%208%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-9%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20h%20-2%20c%200%20-0.554688%20-0.445312%20-1%20-1%20-1%20z%20m%20-3%203%20h%201%20v%201%20c%200%200.554688%200.445312%201%201%201%20h%204%20c%200.554688%200%201%20-0.445312%201%20-1%20v%20-1%20h%201%20c%200.570312%200%201%200.429688%201%201%20v%209%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-8%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-9%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E\");\n  --icon-go-down: url(\"data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%201%205%20c%200%20-0.265625%200.105469%20-0.519531%200.292969%20-0.707031%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20l%205.292969%205.292969%20l%205.292969%20-5.292969%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20c%200.1875%200.1875%200.292969%200.441406%200.292969%200.707031%20s%20-0.105469%200.519531%20-0.292969%200.707031%20l%20-6%206%20c%20-0.390625%200.390625%20-1.023437%200.390625%20-1.414062%200%20l%20-6%20-6%20c%20-0.1875%20-0.1875%20-0.292969%20-0.441406%20-0.292969%20-0.707031%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E\");\n  --icon-sidebar-show: url(\"data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cg%20fill%3D'currentColor'%3E%20%3Cpath%20d%3D'm%206%2013%20v%20-10%20h%20-3%20c%20-0.550781%200%20-1%200.449219%20-1%201%20v%208%20c%200%200.550781%200.449219%201%201%201%20z%20m%200%200'%20fill-opacity%3D'0.34902'%2F%3E%20%3Cpath%20d%3D'm%203%201%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%208%20c%200%201.644531%201.355469%203%203%203%20h%2010%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-8%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20z%20m%200%202%20h%203%20v%2010%20h%20-3%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-8%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%204%200%20h%206%20c%200.570312%200%201%200.429688%201%201%20v%208%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-6%20z%20m%200%200'%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E\");\n}\n","// _variables.scss — Adwaita CSS custom properties (light theme defaults).\n// Reference: refs/libadwaita/src/stylesheet/_colors.scss (canonical color palette)\n// Reference: refs/adwaita-web/adwaita-web/scss/_variables.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Subset adapted for @gjsify/adwaita-web Web Components.\n\n:root {\n  // Window\n  --window-bg-color: #fafafb;\n  --window-fg-color: rgba(0, 0, 6, 0.8);\n\n  // Views\n  --view-bg-color: #ffffff;\n  --view-fg-color: rgba(0, 0, 6, 0.8);\n\n  // Header bar\n  --headerbar-bg-color: #ffffff;\n  --headerbar-fg-color: rgba(0, 0, 6, 0.8);\n  --headerbar-shade-color: rgba(0, 0, 6, 0.12);\n\n  // Sidebar\n  --sidebar-bg-color: #ebebed;\n\n  // Cards / boxed lists\n  --card-bg-color: #ffffff;\n  --card-fg-color: rgba(0, 0, 6, 0.8);\n  --card-shade-color: rgba(0, 0, 6, 0.07);\n\n  // Accent\n  --accent-bg-color: #3584e4;\n  --accent-fg-color: #ffffff;\n  --accent-color: #1c71d8;\n\n  // Switch\n  --switch-off-bg: rgba(0, 0, 0, 0.2);\n  --switch-knob-bg: #ffffff;\n\n  // Layout radii\n  --window-radius: 15px;\n  --card-radius: 12px;\n  --button-radius: 9px;\n\n  // Spacing scale\n  --spacing-xs: 6px;\n  --spacing-s: 9px;\n  --spacing-m: 12px;\n  --spacing-l: 18px;\n  --spacing-xl: 24px;\n\n  // Typography — GNOME default: Adwaita Sans 11\n  --font-family: 'Adwaita Sans', 'Cantarell', 'Inter', 'Segoe UI', sans-serif;\n  --font-size-base: 11pt;\n  --font-size-small: 9pt;\n  --font-size-heading: 12pt;\n  --dim-opacity: 0.55;\n}\n","// _theme.scss — Light/dark theme switching.\n// Auto via prefers-color-scheme + manual .theme-dark / .theme-light overrides.\n// Reference: refs/libadwaita/src/stylesheet/_colors.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\n@mixin dark-theme {\n  --window-bg-color: #222226;\n  --window-fg-color: #ffffff;\n  --view-bg-color: #1d1d20;\n  --view-fg-color: #ffffff;\n  --headerbar-bg-color: #2e2e32;\n  --headerbar-fg-color: #ffffff;\n  --headerbar-shade-color: rgba(0, 0, 6, 0.36);\n  --sidebar-bg-color: #2e2e32;\n  --card-bg-color: rgba(255, 255, 255, 0.08);\n  --card-fg-color: #ffffff;\n  --card-shade-color: rgba(0, 0, 6, 0.36);\n  --accent-color: #78aeed;\n  --switch-off-bg: rgba(255, 255, 255, 0.2);\n  --switch-knob-bg: #deddda;\n}\n\n// Auto dark theme via prefers-color-scheme — opt out with .theme-light\n@media (prefers-color-scheme: dark) {\n  :root:not(.theme-light) {\n    @include dark-theme;\n  }\n}\n\n// Manual override\n:root.theme-dark {\n  @include dark-theme;\n}\n","// _window.scss — adw-window styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_window.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_window.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-window {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--window-bg-color);\n  color: var(--window-fg-color);\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n  border-radius: var(--window-radius);\n  box-shadow:\n    0 0 14px 5px rgb(0 0 0 / 15%),\n    0 0 5px 2px rgb(0 0 0 / 10%),\n    0 0 0 1px rgb(0 0 0 / 5%);\n  overflow: hidden;\n  outline: 1px solid rgb(255 255 255 / 7%);\n  outline-offset: -1px;\n}\n","// _headerbar.scss — adw-header-bar styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_headerbar.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_header-bar.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-header-bar {\n  display: flex;\n  align-items: center;\n  min-height: 47px;\n  padding: 0 6px;\n  background-color: var(--headerbar-bg-color);\n  color: var(--headerbar-fg-color);\n  box-shadow: inset 0 -1px var(--headerbar-shade-color);\n  flex-shrink: 0;\n\n  .adw-header-bar-center {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n  }\n\n  .adw-header-bar-title {\n    font-weight: bold;\n    font-size: var(--font-size-base);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .adw-header-bar-start {\n    display: flex;\n    align-items: center;\n    padding: 0 6px;\n    gap: 4px;\n  }\n\n  .adw-header-bar-end {\n    display: flex;\n    align-items: center;\n    padding: 0 6px;\n    gap: 4px;\n  }\n\n  .adw-header-btn {\n    position: relative;\n    width: 34px;\n    height: 34px;\n    border: none;\n    border-radius: var(--button-radius);\n    background: transparent;\n    color: var(--headerbar-fg-color);\n    cursor: pointer;\n    padding: 0;\n    margin: 0;\n    flex-shrink: 0;\n\n    &:hover {\n      background: rgba(128, 128, 128, 0.12);\n    }\n\n    &:active {\n      background: rgba(128, 128, 128, 0.22);\n    }\n  }\n}\n","// _preferences.scss — adw-preferences-group styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_preferences.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_preferences.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-preferences-group {\n  display: block;\n\n  .adw-preferences-group-header {\n    padding: var(--spacing-xs) 2px;\n  }\n\n  .adw-preferences-group-title {\n    font-size: var(--font-size-small);\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    opacity: var(--dim-opacity);\n    margin: 0;\n    color: var(--window-fg-color);\n  }\n\n  .adw-preferences-group-listbox {\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    border-radius: var(--card-radius);\n    box-shadow:\n      0 0 0 1px rgb(0 0 6 / 3%),\n      0 1px 3px 1px rgb(0 0 6 / 7%),\n      0 2px 6px 2px rgb(0 0 6 / 3%);\n    overflow: hidden;\n  }\n}\n","// _card.scss — adw-card styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_card.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_misc.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-card,\n.adw-card {\n  display: block;\n  background-color: var(--card-bg-color);\n  color: var(--card-fg-color);\n  border-radius: var(--card-radius);\n  padding: var(--spacing-l);\n  box-shadow:\n    0 0 0 1px rgb(0 0 6 / 3%),\n    0 1px 3px 1px rgb(0 0 6 / 7%),\n    0 2px 6px 2px rgb(0 0 6 / 3%);\n  overflow: hidden;\n}\n","// _row.scss — Shared base styling for rows in preferences groups.\n// Reference: refs/adwaita-web/adwaita-web/scss/_row_types.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_action-row.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-switch-row,\nadw-combo-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 50px;\n  padding: var(--spacing-s) var(--spacing-m);\n  gap: var(--spacing-m);\n  border-bottom: 1px solid var(--card-shade-color);\n\n  &:last-child {\n    border-bottom: none;\n  }\n}\n\n// Utility separator (used by content layouts)\n.adw-separator-vertical {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--card-shade-color);\n  flex-shrink: 0;\n}\n","// _switch_row.scss — adw-switch-row styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_switch_row.scss\n// Reference: refs/adwaita-web/adwaita-web/scss/_switch.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_switch.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-switch-row {\n  .adw-row-title {\n    flex: 1;\n    font-size: var(--font-size-base);\n    color: var(--card-fg-color);\n  }\n\n  .adw-switch {\n    position: relative;\n    display: inline-block;\n    width: 44px;\n    height: 24px;\n    flex-shrink: 0;\n\n    input {\n      opacity: 0;\n      width: 0;\n      height: 0;\n      position: absolute;\n    }\n  }\n\n  .adw-switch-slider {\n    position: absolute;\n    cursor: pointer;\n    inset: 0;\n    background-color: var(--switch-off-bg);\n    border-radius: 12px;\n    transition: background-color 0.15s ease-out;\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      height: 20px;\n      width: 20px;\n      left: 2px;\n      bottom: 2px;\n      background-color: var(--switch-knob-bg);\n      border-radius: 50%;\n      transition: transform 0.15s ease-out;\n      box-shadow: 0 1px 2px rgb(0 0 0 / 20%);\n    }\n  }\n\n  .adw-switch input:checked + .adw-switch-slider {\n    background-color: var(--accent-bg-color);\n\n    &::before {\n      transform: translateX(20px);\n    }\n  }\n\n  .adw-switch input:focus-visible + .adw-switch-slider {\n    outline: 2px solid var(--accent-color);\n    outline-offset: 2px;\n  }\n}\n","// _combo_row.scss — adw-combo-row styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_combo_row.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_combo-row.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-combo-row {\n  position: relative;\n  cursor: pointer;\n\n  .adw-row-title {\n    font-size: var(--font-size-base);\n    color: var(--card-fg-color);\n    pointer-events: none;\n  }\n\n  // Hidden <select> overlay — stretches across the row to capture clicks\n  // anywhere. The visual dropdown arrow is rendered by .adw-row-value::after\n  // below, so the select itself doesn't need a background image.\n  select {\n    appearance: none;\n    -webkit-appearance: none;\n    background-color: transparent;\n    border: none;\n    padding: 6px 24px 6px 8px;\n    font-family: var(--font-family);\n    font-size: var(--font-size-base);\n    color: var(--card-fg-color);\n    cursor: pointer;\n    text-align: right;\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n\n    &:focus-visible {\n      outline: 2px solid var(--accent-color);\n      outline-offset: -1px;\n    }\n\n    option {\n      background-color: var(--window-bg-color);\n      color: var(--window-fg-color);\n    }\n  }\n\n  .adw-row-value {\n    font-size: var(--font-size-base);\n    color: var(--card-fg-color);\n    opacity: var(--dim-opacity);\n    display: flex;\n    align-items: center;\n    gap: 4px;\n\n    // Dropdown arrow — rendered via CSS mask so `currentColor` drives the\n    // fill, making the icon theme-aware (matches libadwaita's dark theme).\n    // Using background-image with a data-URI SVG would NOT resolve\n    // `currentColor` in most browsers.\n    &::after {\n      content: \"\";\n      display: inline-block;\n      width: 12px;\n      height: 12px;\n      background-color: currentColor;\n      -webkit-mask-image: var(--icon-go-down);\n      mask-image: var(--icon-go-down);\n      -webkit-mask-repeat: no-repeat;\n      mask-repeat: no-repeat;\n      -webkit-mask-size: contain;\n      mask-size: contain;\n      -webkit-mask-position: center;\n      mask-position: center;\n    }\n  }\n}\n","// _spin_row.scss — adw-spin-row styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_spin_button.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_spin-button.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-spin-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 50px;\n  padding: var(--spacing-s) var(--spacing-m);\n  gap: var(--spacing-m);\n  border-bottom: 1px solid var(--card-shade-color);\n\n  &:last-child {\n    border-bottom: none;\n  }\n\n  .adw-row-title {\n    flex: 1;\n    font-size: var(--font-size-base);\n    color: var(--card-fg-color);\n  }\n}\n\n.adw-spin-control {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n\n  button {\n    width: 32px;\n    height: 32px;\n    border: none;\n    border-radius: var(--button-radius);\n    background: transparent;\n    color: var(--card-fg-color);\n    cursor: pointer;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n\n    &:hover {\n      background: rgba(128, 128, 128, 0.15);\n    }\n  }\n\n  input {\n    width: 56px;\n    text-align: center;\n    border: none;\n    border-radius: var(--button-radius);\n    background: rgba(128, 128, 128, 0.1);\n    color: var(--card-fg-color);\n    font-family: var(--font-family);\n    font-size: var(--font-size-base);\n    padding: 4px 2px;\n\n    &:focus {\n      outline: 2px solid var(--accent-color);\n      outline-offset: -1px;\n    }\n  }\n}\n","// _toast.scss — adw-toast and adw-toast-overlay styling.\n// Reference: refs/adwaita-web/adwaita-web/scss/_toast.scss\n// Reference: refs/adwaita-web/adwaita-web/scss/_toast_overlay.scss\n// Reference: refs/libadwaita/src/stylesheet/widgets/_toast.scss\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Copyright (c) 2025 csm (adwaita-web). MIT License.\n// Modifications: Adapted for @gjsify/adwaita-web Web Components.\n\nadw-toast-overlay {\n  position: fixed;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 9999;\n  display: flex;\n  flex-direction: column-reverse;\n  gap: 9px;\n  align-items: center;\n  pointer-events: none;\n}\n\n.adw-toast {\n  background-color: #3d3846;\n  color: #ffffff;\n  padding: 9px 12px;\n  border-radius: var(--card-radius);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  width: max-content;\n  max-width: 400px;\n  min-height: 36px;\n  pointer-events: auto;\n  font-family: var(--font-family);\n  font-size: var(--font-size-base);\n\n  opacity: 0;\n  transform: translateY(100%) scale(0.9);\n  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1),\n              transform 0.2s cubic-bezier(0, 0, 0.2, 1);\n  will-change: transform, opacity;\n\n  &.visible {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  &.hiding {\n    opacity: 0;\n    transform: translateY(100%) scale(0.9);\n    transition-duration: 0.15s;\n    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n  }\n\n  .adw-toast-title {\n    font-weight: normal;\n    line-height: 1.3;\n  }\n}\n","// _overlay_split_view.scss — adw-overlay-split-view styling.\n// Reference: refs/libadwaita/src/adw-overlay-split-view.c\n// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.\n// Modifications: Implemented as Web Component for @gjsify/adwaita-web.\n\nadw-overlay-split-view {\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n  min-height: 0;\n  position: relative;\n  overflow: hidden;\n\n  .adw-osv-sidebar {\n    background-color: var(--sidebar-bg-color);\n    overflow-y: auto;\n    flex-shrink: 0;\n    transition: transform 0.2s ease, opacity 0.2s ease, margin 0.2s ease;\n    z-index: 10;\n    align-self: stretch;\n  }\n\n  .adw-osv-content {\n    flex: 1;\n    min-width: 0;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n  }\n\n  // Docked mode (not collapsed) — sidebar beside content\n  &:not(.collapsed) .adw-osv-sidebar {\n    position: relative;\n  }\n\n  // Docked hide: slide left and collapse via opacity. Sidebar keeps its\n  // intrinsic width so internal elements don't reflow.\n  &:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {\n    transform: translateX(-100%);\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  // Overlay mode (collapsed) — sidebar on top of content\n  &.collapsed .adw-osv-sidebar {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  &.collapsed.sidebar-end .adw-osv-sidebar {\n    left: auto;\n    right: 0;\n    transform: translateX(100%);\n  }\n\n  &.collapsed.show-sidebar .adw-osv-sidebar {\n    transform: translateX(0);\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  // Backdrop — visible only in overlay mode when sidebar is open\n  .adw-osv-backdrop {\n    display: none;\n  }\n\n  &.collapsed.show-sidebar .adw-osv-backdrop {\n    display: block;\n    position: absolute;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 9;\n  }\n}\n\n// Sidebar content layout helper — wraps the sidebar's children with the\n// standard Adwaita spacing scale (12px padding, 12px gap between groups).\n.adw-sidebar-content {\n  padding: var(--spacing-m);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-m);\n}\n\n// Sidebar toggle button — sidebar-show-symbolic icon via CSS mask\n.adw-sidebar-toggle-icon::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-color: currentColor;\n  -webkit-mask-image: var(--icon-sidebar-show);\n  mask-image: var(--icon-sidebar-show);\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 16px 16px;\n  mask-size: 16px 16px;\n  -webkit-mask-position: center;\n  mask-position: center;\n  pointer-events: none;\n}\n"]}

package/lib/types/elements/adw-card.d.ts

@@ -0,0 +1,3 @@
+export declare class AdwCard extends HTMLElement {
+    connectedCallback(): void;
+}

package/lib/types/index.d.ts

@@ -1,4 +1,5 @@
 import '@gjsify/adwaita-fonts';
+export { AdwCard } from './elements/adw-card.js';
 export { AdwWindow } from './elements/adw-window.js';
 export { AdwHeaderBar } from './elements/adw-header-bar.js';
 export { AdwPreferencesGroup } from './elements/adw-preferences-group.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/adwaita-web",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Adwaita/Libadwaita web components for browser targets",
   "type": "module",
   "main": "src/index.ts",
@@ -9,21 +9,36 @@
     ".": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"
-    }
+    },
+    "./style.css": {
+      "types": "./style.css.d.ts",
+      "default": "./dist/adwaita-web.css"
+    },
+    "./scss": "./scss/adwaita-skin.scss",
+    "./scss/*": "./scss/*"
   },
+  "files": [
+    "src",
+    "scss",
+    "dist",
+    "lib",
+    "style.css.d.ts"
+  ],
   "scripts": {
-    "clear": "rm -rf lib tsconfig.tsbuildinfo || exit 0",
+    "clear": "rm -rf lib dist tsconfig.tsbuildinfo scss/_icons.generated.scss || exit 0",
     "check": "tsc --noEmit",
-    "build": "yarn build:gjsify && yarn build:types",
+    "build": "yarn build:scss && yarn build:gjsify && yarn build:types",
+    "build:scss": "node scripts/build-scss.mjs",
     "build:gjsify": "gjsify build --library 'src/**/*.ts' --exclude 'src/**/*.spec.ts'",
     "build:types": "tsc"
   },
   "dependencies": {
-    "@gjsify/adwaita-fonts": "^0.1.6",
-    "@gjsify/adwaita-icons": "^0.1.6"
+    "@gjsify/adwaita-fonts": "^0.1.8",
+    "@gjsify/adwaita-icons": "^0.1.8"
   },
   "devDependencies": {
-    "@gjsify/cli": "^0.1.6",
+    "@gjsify/cli": "^0.1.8",
+    "sass": "^1.99.0",
     "typescript": "^6.0.2"
   }
 }