@gjsify/adwaita-web 0.10.0 → 0.12.0

package/scss/_button.scss

@@ -0,0 +1,168 @@
+// _button.scss — adw-button + Adwaita button styles + symbolic icons + .linked.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_buttons.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+// <adw-button> is a thin host that renders an inner <button class="adw-button">;
+// the class set is the real styling API and works on a plain <button> too.
+adw-button {
+  display: inline-flex;
+}
+
+.adw-button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 34px;
+  min-width: 34px;
+  margin: 0;
+  padding: 4px 14px;
+  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);
+  font-weight: 700;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  user-select: none;
+  -webkit-user-select: none;
+
+  &: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 {
+    opacity: 0.45;
+    cursor: default;
+  }
+
+  // Flat — no resting background; only reacts on hover/active. The header bar's
+  // navigation buttons use this.
+  &.flat {
+    background-color: transparent;
+
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+  }
+
+  // Suggested action — accent-coloured primary button.
+  &.suggested-action {
+    background-color: var(--accent-bg-color);
+    color: var(--accent-fg-color);
+
+    &:hover {
+      background-color: var(--accent-color);
+    }
+
+    &:active {
+      background-color: var(--accent-color);
+      filter: brightness(0.92);
+    }
+  }
+
+  // Destructive action — red.
+  &.destructive-action {
+    background-color: var(--destructive-bg-color);
+    color: var(--destructive-fg-color);
+
+    &:hover {
+      filter: brightness(1.06);
+    }
+
+    &:active {
+      filter: brightness(0.9);
+    }
+  }
+
+  // Icon-only square button (no label).
+  &.icon-only {
+    padding: 0;
+    width: 34px;
+  }
+
+  // Circular — round icon button.
+  &.circular {
+    padding: 0;
+    width: 34px;
+    border-radius: 9999px;
+  }
+
+  // Pill — fully-rounded ends.
+  &.pill {
+    padding: 6px 20px;
+    border-radius: 9999px;
+  }
+}
+
+// Symbolic icon rendered via a CSS mask so `currentColor` drives the fill,
+// keeping it theme-aware (same technique as the combo-row dropdown arrow).
+.adw-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  background-color: currentColor;
+  mask-size: 16px;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-size: 16px;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+
+  // `display: inline-block` (author CSS) otherwise beats the UA `[hidden]`
+  // rule, so a hidden icon (e.g. an avatar's fallback icon while initials
+  // show) would still render as a solid maskless square. Honor `hidden`.
+  &[hidden] {
+    display: none;
+  }
+}
+
+// The per-name `.adw-icon--<name>` mask classes are generated into
+// scss/_icons.generated.scss by scripts/build-scss.mjs (one entry per icon in
+// its ICONS map), so adding an icon is a single map edit.
+
+// Linked group — adjacent buttons share edges (segmented control).
+.adw-linked {
+  display: inline-flex;
+
+  > .adw-button,
+  > adw-button .adw-button {
+    border-radius: 0;
+  }
+
+  > :first-child .adw-button,
+  > .adw-button:first-child {
+    border-top-left-radius: var(--button-radius);
+    border-bottom-left-radius: var(--button-radius);
+  }
+
+  > :last-child .adw-button,
+  > .adw-button:last-child {
+    border-top-right-radius: var(--button-radius);
+    border-bottom-right-radius: var(--button-radius);
+  }
+
+  > * + * {
+    margin-left: 2px;
+  }
+}

package/scss/_button_content.scss

@@ -0,0 +1,48 @@
+// _button_content.scss — adw-button-content styling (icon + label box used as a
+// button child). Mirrors libadwaita's `buttoncontent > box > {image, label}`
+// node: a horizontal box with 6px spacing between icon and label and a bold
+// label, plus optional ellipsizing when `.can-shrink` is set.
+// Reference: refs/libadwaita/src/stylesheet/widgets/_buttons.scss (buttoncontent)
+// Reference: refs/libadwaita/src/adw-button-content.c (AdwButtonContent)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-button-content {
+  display: inline-flex;
+  align-items: center;
+  // Centered as a group, matching the box's halign:center in AdwButtonContent.
+  justify-content: center;
+  min-width: 0;
+
+  // The inner box holds the image + label nodes (border-spacing 6px upstream).
+  .adw-button-content-box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .adw-button-content-label {
+    // libadwaita: `buttoncontent > box > label { font-weight: bold; }` with a
+    // 2px trailing pad (LTR) so the label does not hug the button edge.
+    font-weight: 700;
+    line-height: 1;
+    padding-right: 2px;
+  }
+
+  // can-shrink — the label ellipsizes instead of forcing the button wider
+  // (Gtk.Label PANGO_ELLIPSIZE_END). The icon keeps its natural size.
+  &.can-shrink {
+    .adw-button-content-box {
+      min-width: 0;
+    }
+
+    .adw-button-content-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+    }
+  }
+}

package/scss/_button_row.scss

@@ -0,0 +1,100 @@
+// _button_row.scss — adw-button-row styling (a boxed-list row that acts as a
+// button: centered title + optional start icon, with suggested/destructive
+// recoloring).
+// Reference: refs/libadwaita/src/stylesheet/widgets/_lists.scss (row.button)
+// Reference: refs/adwaita-web/adwaita-web/scss/_button_row.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-button-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 50px;
+  padding: var(--spacing-xs) var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+  color: var(--card-fg-color);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  // Contents are centered as a group (libadwaita's GtkBox halign:center), with
+  // the start icon hugging the title via a small gap (border-spacing 6px).
+  .adw-button-row-contents {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-xs);
+    min-width: 0;
+  }
+
+  .adw-button-row-title {
+    font-size: var(--font-size-base);
+    font-weight: 700;
+    text-align: center;
+    color: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // Default (no style class): button-like hover/active feedback.
+  &.activatable {
+    &:hover {
+      background-color: var(--button-hover-color);
+    }
+
+    &:active {
+      background-color: var(--button-active-color);
+    }
+  }
+
+  // Suggested action — accent-coloured, full-bleed (no separator line).
+  &.suggested-action {
+    background-color: var(--accent-bg-color);
+    color: var(--accent-fg-color);
+    border-bottom: none;
+
+    &.activatable {
+      &:hover {
+        background-color: var(--accent-bg-color);
+        background-image: linear-gradient(
+          color-mix(in srgb, currentColor 10%, transparent),
+          color-mix(in srgb, currentColor 10%, transparent)
+        );
+      }
+
+      &:active {
+        background-color: var(--accent-bg-color);
+        background-image: linear-gradient(rgba(0, 0, 6, 0.2), rgba(0, 0, 6, 0.2));
+      }
+    }
+  }
+
+  // Destructive action — red, same full-bleed treatment as suggested.
+  &.destructive-action {
+    background-color: var(--destructive-bg-color);
+    color: var(--destructive-fg-color);
+    border-bottom: none;
+
+    &.activatable {
+      &:hover {
+        background-color: var(--destructive-bg-color);
+        background-image: linear-gradient(
+          color-mix(in srgb, currentColor 10%, transparent),
+          color-mix(in srgb, currentColor 10%, transparent)
+        );
+      }
+
+      &:active {
+        background-color: var(--destructive-bg-color);
+        background-image: linear-gradient(rgba(0, 0, 6, 0.2), rgba(0, 0, 6, 0.2));
+      }
+    }
+  }
+}

package/scss/_carousel.scss

@@ -0,0 +1,130 @@
+// _carousel.scss — adw-carousel + its dot/line page indicators.
+//
+// A horizontal scroll-snap pager (adw-carousel) plus two indicator widgets that
+// bind to it. The indicators reproduce libadwaita's snapshot drawing as CSS: a
+// per-marker `--adw-carousel-progress` (0 = inactive, 1 = focused) lerps between
+// the inactive and selected size/opacity exactly as AdwCarousel does.
+//
+// Dots:  DOTS_RADIUS 3 → DOTS_RADIUS_SELECTED 4 (6px → 8px), DOTS_SPACING 7,
+//        DOTS_OPACITY 0.3 → DOTS_OPACITY_SELECTED 0.9, active fill = accent.
+// Lines: LINE_LENGTH 35, LINE_WIDTH 3, LINE_SPACING 5, LINE_OPACITY 0.3 →
+//        LINE_OPACITY_ACTIVE 0.9, active fill = accent.
+//
+// Reference: refs/libadwaita/src/adw-carousel.c
+// Reference: refs/libadwaita/src/adw-carousel-indicator-dots.c
+// Reference: refs/libadwaita/src/adw-carousel-indicator-lines.c
+// Reference: refs/adwaita-web/adwaita-web/scss/_carousel_indicators.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-carousel {
+  display: block;
+  overflow: hidden;
+
+  .adw-carousel-track {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    // Hide the scrollbar — the carousel is paged, not scrolled by chrome.
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .adw-carousel-page {
+    flex: 0 0 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+  }
+}
+
+// Shared layout for both indicator kinds — a centered, horizontally-laid-out
+// row of markers (matching the AdwCarouselIndicator* widgets).
+adw-carousel-indicator-dots,
+adw-carousel-indicator-lines {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xs);
+
+  // The clickable marker resets the button chrome — the visible shape is drawn
+  // by the per-kind rules below.
+  button {
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+    flex: 0 0 auto;
+  }
+}
+
+// Dots — DOTS_SPACING 7px between centers; base diameter 6px (radius 3) growing
+// to 8px (radius 4) on the focused dot, opacity ramping 0.3 → 0.9.
+adw-carousel-indicator-dots {
+  gap: 7px;
+
+  .adw-carousel-dot {
+    width: 8px;
+    height: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // The painted disc lives in ::before so the 8px hit-target stays constant
+    // while the visible dot grows from 6px → 8px with progress.
+    &::before {
+      content: '';
+      display: block;
+      // 6px + (8px - 6px) * progress
+      width: calc(6px + 2px * var(--adw-carousel-progress, 0));
+      height: calc(6px + 2px * var(--adw-carousel-progress, 0));
+      border-radius: 50%;
+      background-color: var(--window-fg-color);
+      // 0.3 + (0.9 - 0.3) * progress
+      opacity: calc(0.3 + 0.6 * var(--adw-carousel-progress, 0));
+      transition:
+        width 0.2s ease,
+        height 0.2s ease,
+        opacity 0.2s ease,
+        background-color 0.2s ease;
+    }
+
+    &.active::before {
+      background-color: var(--window-fg-color);
+    }
+  }
+}
+
+// Lines — LINE_LENGTH 35px, LINE_WIDTH 3px, LINE_SPACING 5px; opacity ramps
+// 0.3 → 0.9; the active line recolors to the accent.
+adw-carousel-indicator-lines {
+  gap: 5px;
+
+  .adw-carousel-line {
+    width: 35px;
+    height: 3px;
+    border-radius: 1.5px;
+    background-color: var(--window-fg-color);
+    // 0.3 + (0.9 - 0.3) * progress
+    opacity: calc(0.3 + 0.6 * var(--adw-carousel-progress, 0));
+    transition:
+      opacity 0.2s ease,
+      background-color 0.2s ease;
+
+    &.active {
+      background-color: var(--window-fg-color);
+    }
+  }
+}

package/scss/_clamp.scss

@@ -0,0 +1,11 @@
+// _clamp.scss — adw-clamp styling (max-width + centered).
+// Reference: refs/adwaita-web/adwaita-web/scss/_clamp.scss
+// Reference: refs/libadwaita (Adw.Clamp)
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-clamp {
+  display: block;
+  width: 100%;
+  margin-inline: auto;
+}

package/scss/_entry.scss

@@ -0,0 +1,49 @@
+// _entry.scss — adw-entry / .adw-entry text input (e.g. a browser URL bar).
+// Reference: refs/libadwaita/src/stylesheet/widgets/_entries.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+// <adw-entry> hosts an inner <input class="adw-entry">; it fills its flex slot.
+adw-entry {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+
+.adw-entry {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 34px;
+  margin: 0;
+  padding: 5px 12px;
+  border: none;
+  border-radius: var(--button-radius);
+  background-color: var(--entry-bg-color);
+  color: var(--view-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  box-shadow: inset 0 0 0 1px var(--entry-border-color);
+  transition: box-shadow 0.1s ease;
+
+  &::placeholder {
+    color: var(--view-fg-color);
+    opacity: var(--dim-opacity);
+  }
+
+  &:hover {
+    box-shadow: inset 0 0 0 1px var(--entry-border-hover-color);
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--accent-color);
+  }
+
+  // Dimmed disabled state, mirroring .adw-button:disabled.
+  &:disabled {
+    opacity: 0.45;
+    cursor: default;
+    box-shadow: inset 0 0 0 1px var(--entry-border-color);
+  }
+}

package/scss/_entry_row.scss

@@ -0,0 +1,54 @@
+// _entry_row.scss — adw-entry-row styling (inline editable boxed-list row).
+// Reference: refs/adwaita-web/adwaita-web/scss/_entry_row.scss
+// Reference: refs/libadwaita/src/stylesheet/widgets/_entries.scss
+// Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+// Copyright (c) 2025 csm (adwaita-web). MIT License.
+// Modifications: Adapted for @gjsify/adwaita-web Web Components.
+
+adw-entry-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-m);
+  min-height: 50px;
+  padding: var(--spacing-xs) var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  // Focus ring matching libadwaita's row focus (inset accent outline).
+  &:focus-within {
+    box-shadow: inset 0 0 0 2px var(--accent-color);
+  }
+
+  // Filled Adw.EntryRow layout: a small floating title above the value,
+  // both left-aligned in a column.
+  .adw-entry-row-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    gap: 1px;
+  }
+
+  .adw-row-title {
+    font-size: var(--font-size-small);
+    color: var(--card-fg-color);
+    opacity: var(--dim-opacity);
+  }
+
+  .adw-entry-row-input {
+    width: 100%;
+    min-width: 0;
+    border: none;
+    background: transparent;
+    color: var(--card-fg-color);
+    font-family: var(--font-family);
+    font-size: var(--font-size-base);
+    text-align: left;
+    outline: none;
+    padding: 0;
+  }
+}