@gjsify/adwaita-web 0.15.1 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.15.1",
+    "version": "0.16.1",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -33,20 +33,22 @@
         "check": "gjsify run build:scss && gjsify tsc --noEmit",
         "build": "gjsify run build:scss && gjsify run build:types",
         "build:scss": "node scripts/build-scss.mjs",
-        "build:types": "gjsify tsc"
+        "build:types": "gjsify tsc",
+        "build:test:browser": "gjsify run build:scss && gjsify build src/test.browser.mts --app browser --outfile dist/test.browser.mjs"
     },
     "dependencies": {
-        "@codemirror/commands": "^6.0.0",
-        "@codemirror/language": "^6.0.0",
-        "@codemirror/state": "^6.0.0",
-        "@codemirror/view": "^6.0.0",
-        "@gjsify/adwaita-fonts": "^0.15.1",
-        "@gjsify/adwaita-icons": "^0.15.1",
-        "@lezer/highlight": "^1.0.0"
+        "@codemirror/commands": "^6.10.4",
+        "@codemirror/language": "^6.12.4",
+        "@codemirror/state": "^6.7.0",
+        "@codemirror/view": "^6.43.4",
+        "@gjsify/adwaita-fonts": "^0.16.1",
+        "@gjsify/adwaita-icons": "^0.16.1",
+        "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.15.1",
-        "sass": "^1.100.0",
+        "@gjsify/cli": "^0.16.1",
+        "@gjsify/unit": "^0.16.1",
+        "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },
     "gjsify": {

package/scss/_data_grid.scss

@@ -0,0 +1,144 @@
+// _data_grid.scss — adw-data-grid: a slim, aligned numeric grid for genuinely
+// tabular data (an accounting BWA / P&L statement, invoice line-items). The web
+// mirror of the native Gtk.Grid the Buchhaltung app fills for its financial
+// statements — labels left, amounts right-aligned with tabular figures so
+// columns of numbers line up, plus the section / subtotal / total emphasis a
+// statement needs. NOT a Gtk.ColumnView (no sorting, no zebra striping); boxed
+// lists stay the default for record lists. Uses CSS subgrid so each row is a
+// real element (hover, hairline rules, activation) while columns stay aligned.
+// Reference: refs/libadwaita/src/stylesheet/_colors.scss (separator / card / dim tokens)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss (boxed-list density)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented for @gjsify/adwaita-web Web Components.
+
+.adw-data-grid {
+  display: block;
+  box-sizing: border-box;
+  color: var(--card-fg-color);
+  font-size: var(--font-size-base);
+
+  // Optional title above the grid.
+  .adw-data-grid-caption {
+    font-size: var(--font-size-heading);
+    font-weight: 700;
+    color: var(--window-fg-color);
+    margin: 0 0 var(--spacing-s);
+    padding: 0 var(--spacing-xs);
+  }
+
+  // Horizontal scroll is CONTAINED here — a wide statement (many month columns)
+  // scrolls sideways within the grid instead of overflowing the page.
+  .adw-data-grid-scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  // The grid owns the column tracks; each row is a subgrid spanning them, so
+  // figures in the same column line up across every row. `min-width: max-content`
+  // keeps columns from crushing — they overflow into the scroller instead.
+  .adw-data-grid-table {
+    display: grid;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: max-content;
+    // grid-template-columns is set inline from the column descriptors.
+  }
+
+  .adw-data-grid-row {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: center;
+  }
+
+  // Airy Adwaita cell density (matching the boxed-list row rhythm), single-line.
+  .adw-data-grid-cell {
+    box-sizing: border-box;
+    min-width: 0;
+    padding: var(--spacing-s) var(--spacing-m);
+    white-space: nowrap;
+    text-align: left;
+
+    &.align-end {
+      text-align: right;
+    }
+
+    &.align-center {
+      text-align: center;
+    }
+
+    // Tabular figures are the WHOLE POINT vs a boxed list — numbers line up.
+    &.numeric {
+      font-variant-numeric: tabular-nums;
+    }
+
+    &.mono {
+      font-family: 'Adwaita Mono', 'Cantarell', ui-monospace, 'SF Mono', 'Menlo', monospace;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  // Header row — dim, small, uppercase caps with a hairline underline (Adwaita
+  // list-column headings), never sortable.
+  .adw-data-grid-row.header {
+    .adw-data-grid-cell {
+      font-size: var(--font-size-small);
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      opacity: var(--dim-opacity);
+      border-bottom: 1px solid var(--separator-color);
+    }
+  }
+
+  // A section header spans all columns as a bold group title (a BWA's sections).
+  .adw-data-grid-row.variant-section {
+    .section-cell {
+      font-weight: 700;
+      color: var(--window-fg-color);
+      padding-top: var(--spacing-m);
+    }
+  }
+
+  // A subtotal is bold with a hairline rule above it (Gesamtleistung, Rohertrag…).
+  .adw-data-grid-row.variant-subtotal {
+    border-top: 1px solid var(--separator-color);
+
+    .adw-data-grid-cell {
+      font-weight: 700;
+    }
+  }
+
+  // The final total is bold with a STRONGER rule above (the accounting result —
+  // Betriebsergebnis), plus a thin rule below to evoke the ruled grand-total line.
+  .adw-data-grid-row.variant-total {
+    border-top: 2px solid var(--separator-color);
+    border-bottom: 1px solid var(--separator-color);
+
+    .adw-data-grid-cell {
+      font-weight: 800;
+      color: var(--window-fg-color);
+    }
+  }
+
+  // Optional interactive rows (master-detail). Hairline separators only where
+  // Adwaita would — NOT zebra striping — so no default row borders; the hover /
+  // focus affordance carries the interaction.
+  .adw-data-grid-row.interactive {
+    cursor: pointer;
+    border-radius: var(--button-radius);
+
+    &:hover {
+      background-color: var(--button-bg-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: -2px;
+    }
+  }
+}

package/scss/_dialog.scss

@@ -0,0 +1,220 @@
+// _dialog.scss — adw-dialog: a generic adaptive dialog. A full-cover scrim with
+// a floating window-coloured "sheet" centred on wide viewports, re-anchored as a
+// bottom sheet (full-width, rounded top corners) on narrow ones. Mirrors the
+// AdwDialog floating-sheet + bottom-sheet presentations.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_dialogs.scss (floating sheet)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_bottom-sheet.scss (bottom radius)
+// Copyright (c) 2023-2024 GNOME Foundation Inc. (libadwaita). LGPLv2.1+.
+// Modifications: Implemented for @gjsify/adwaita-web Web Components.
+
+// Bottom-sheet layout — shared by the explicit mode and the auto/narrow query.
+@mixin adw-dialog-bottom-sheet {
+  .adw-dialog-scrim {
+    align-items: flex-end;
+    justify-content: stretch;
+    padding: 0;
+  }
+
+  .adw-dialog-box {
+    width: 100%;
+    max-width: none;
+    // Rounded only along the top edge — it hugs the bottom viewport edge.
+    border-top-left-radius: var(--window-radius);
+    border-top-right-radius: var(--window-radius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    animation: adw-dialog-slide-up 0.25s cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+// Host: contributes nothing to layout while closed; the `open` class reveals it.
+adw-dialog {
+  display: none;
+
+  &.open {
+    display: block;
+  }
+
+  // The full-cover scrim — a flex container centring the box; a dimming wash
+  // behind it. Clicking the scrim (outside the box) attempts to dismiss.
+  .adw-dialog-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 1050;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-l);
+    background-color: var(--dialog-scrim-color, rgba(0, 0, 6, 0.32));
+    animation: adw-dialog-fade-in 0.2s cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  // The dialog box ("sheet"): a rounded window-coloured surface with a soft
+  // layered shadow + hairline outline. Sized by the content-width/height props.
+  .adw-dialog-box {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: min(var(--adw-dialog-content-width, 360px), calc(100vw - 2 * var(--spacing-l)));
+    max-height: min(var(--adw-dialog-content-height, 100vh), calc(100vh - 2 * var(--spacing-l)));
+    overflow: hidden;
+
+    background-color: var(--window-bg-color);
+    color: var(--window-fg-color);
+    border-radius: var(--window-radius);
+    outline: 1px solid var(--separator-color);
+    outline-offset: -1px;
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.05),
+      0 0 5px 2px rgba(0, 0, 6, 0.1),
+      0 0 14px 2px rgba(0, 0, 6, 0.03);
+
+    font-family: var(--font-family);
+    animation: adw-dialog-pop-in 0.2s cubic-bezier(0, 0, 0.2, 1);
+
+    &:focus {
+      outline: 1px solid var(--separator-color);
+    }
+  }
+
+  // Flat header bar — transparent over the window background, title strictly
+  // centred against the trailing close button (the AdwHeaderBar idiom).
+  .adw-dialog-header {
+    display: flex;
+    align-items: center;
+    min-height: 47px;
+    padding: 0 6px;
+    flex-shrink: 0;
+  }
+
+  .adw-dialog-header-side {
+    display: flex;
+    align-items: center;
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .adw-dialog-header-side--end {
+    justify-content: flex-end;
+  }
+
+  .adw-dialog-title {
+    flex: 0 0 auto;
+    font-weight: bold;
+    font-size: var(--font-size-base);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 6px;
+  }
+
+  // Round flat close button drawing a CSS "×" glyph (no window-close symbolic
+  // ships in @gjsify/adwaita-icons — same approach as <adw-preferences-dialog>).
+  .adw-dialog-close {
+    appearance: none;
+    border: none;
+    margin: 0;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: 50%;
+    background-color: transparent;
+    color: var(--window-fg-color);
+    cursor: pointer;
+    position: relative;
+    flex: none;
+    transition: background-color 0.1s ease;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 12px;
+      height: 1.5px;
+      background-color: currentColor;
+      border-radius: 1px;
+    }
+
+    &::before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 1px;
+    }
+
+    &.locked {
+      opacity: var(--dim-opacity);
+      cursor: default;
+    }
+  }
+
+  // Content area — the author's markup; scrolls when it exceeds the box height.
+  .adw-dialog-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--spacing-m) var(--spacing-l) var(--spacing-l);
+  }
+
+  // A header-less dialog pads the content on all sides.
+  .adw-dialog-header[hidden] + .adw-dialog-content {
+    padding-top: var(--spacing-l);
+  }
+
+  // --- Explicit bottom-sheet presentation ---
+  &[data-presentation='bottom-sheet'] {
+    @include adw-dialog-bottom-sheet;
+  }
+}
+
+// --- Adaptive (auto) presentation: bottom sheet on narrow viewports ---
+@media (max-width: 550px) {
+  adw-dialog[data-presentation='auto'] {
+    @include adw-dialog-bottom-sheet;
+  }
+}
+
+@keyframes adw-dialog-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes adw-dialog-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes adw-dialog-slide-up {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}

package/scss/_drop_down.scss

@@ -0,0 +1,185 @@
+// _drop_down.scss — adw-drop-down: a standalone dropdown selector (the web
+// counterpart of Gtk.DropDown). A normal Adwaita button showing the current
+// selection + a `pan-down` chevron, dropping an elevated Adwaita popover list of
+// options. The popover reproduces libadwaita's popover.menu > contents surface
+// (soft triple shadow), the items its modelbutton rows, matching <adw-menu-button>.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_popovers.scss (popover > contents)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_menus.scss (modelbutton rows)
+// Reference: refs/libadwaita/src/stylesheet/widgets/_drop-down.scss (dropdown button)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Implemented for @gjsify/adwaita-web Web Components.
+
+.adw-drop-down {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  vertical-align: middle;
+
+  // The selection button — a normal Adwaita button (label + dim chevron).
+  .adw-drop-down-button {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    min-width: 100px;
+    min-height: 34px;
+    margin: 0;
+    padding: 0 8px 0 12px;
+    border: none;
+    border-radius: var(--button-radius);
+    background-color: var(--button-bg-color);
+    color: var(--window-fg-color);
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: 1px;
+    }
+
+    &:disabled {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
+  .adw-drop-down-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // The chevron — a smaller, dimmed down-glyph after the label.
+  .adw-drop-down-arrow {
+    width: 12px;
+    height: 12px;
+    mask-size: 12px;
+    -webkit-mask-size: 12px;
+    flex: none;
+    opacity: var(--dim-opacity);
+  }
+
+  &.disabled {
+    opacity: 0.55;
+  }
+
+  // --- Popover list ---
+  // The elevated surface below the button. Reproduces popover.menu > contents.
+  .adw-drop-down-popover {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    max-width: 320px;
+    padding: var(--spacing-xs);
+    border-radius: var(--card-radius);
+    background-color: var(--popover-bg-color, var(--window-bg-color, #fff));
+    color: var(--popover-fg-color, var(--window-fg-color));
+    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);
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  // Search entry atop the popover (enable-search). It reuses the .adw-entry skin
+  // but needs its own bottom margin to separate it from the list.
+  .adw-drop-down-search {
+    margin-bottom: var(--spacing-xs);
+  }
+
+  // Scrollable column of option rows.
+  .adw-drop-down-list {
+    display: flex;
+    flex-direction: column;
+    max-height: 320px;
+    overflow-y: auto;
+  }
+
+  // An option row — a flat rounded row with the label and a trailing check on
+  // the selected one; fills on hover/focus like a modelbutton.
+  .adw-drop-down-item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-s);
+    width: 100%;
+    min-height: 32px;
+    margin: 0;
+    padding: var(--spacing-xs) var(--spacing-s);
+    border: none;
+    border-radius: calc(var(--button-radius) - 2px);
+    background-color: transparent;
+    color: inherit;
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    text-align: start;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--accent-color);
+      outline-offset: -2px;
+    }
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  .adw-drop-down-item-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // The selected-row check — a CSS checkmark, shown only on `.selected`.
+  .adw-drop-down-item-check {
+    position: relative;
+    width: 16px;
+    height: 16px;
+    flex: none;
+  }
+
+  .adw-drop-down-item.selected .adw-drop-down-item-check::after {
+    content: '';
+    position: absolute;
+    left: 5px;
+    top: 2px;
+    width: 4px;
+    height: 8px;
+    border: solid var(--accent-color);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+}