spiderly 19.11.9 → 19.12.1

package/styles/components/spiderly-data-table/spiderly-data-table.component.scss

@@ -6,15 +6,6 @@
   align-items: center;
 }
 
-// The active-filter header icon (the projected filtericon template). Bare on purpose:
-// scoping it under PrimeNG's .p-datatable-column-filter-button would compile to a
-// descendant selector requiring OUR _ngcontent on the button, which is PrimeNG-rendered
-// markup — the rule would die silently. Only elements authored in this component's
-// template can match, and the icon is the only .pi-filter-fill here.
-.pi-filter-fill {
-  color: var(--p-primary-color);
-}
-
 @media (max-width: 640px) {
   .table-header {
     display: flex;
@@ -59,12 +50,9 @@
   cursor: pointer;
 }
 .column-chooser-reset {
+  @include bare-button();
   margin-top: 4px;
-  padding: 0;
-  border: none;
-  background: none;
   color: var(--p-primary-color);
-  cursor: pointer;
   align-self: flex-start;
   font-size: 0.875rem;
 
@@ -73,6 +61,37 @@
   }
 }
 
+// Teleported with its popover, so top level — the same rule the chooser follows above.
+.column-menu {
+  display: flex;
+  flex-direction: column;
+  min-width: 11rem;
+}
+
+.column-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  // The label takes the slack so a trailing check sits at the far edge rather than beside the
+  // text, where it would read as part of it.
+  .column-menu-item-label {
+    flex: 1;
+  }
+  @include bare-button();
+  text-align: left;
+  padding: 6px 10px;
+  border-radius: var(--p-content-border-radius);
+
+  &:hover:not(:disabled) {
+    background: var(--p-content-hover-background);
+  }
+
+  &:disabled {
+    color: var(--p-text-muted-color);
+    cursor: default;
+  }
+}
+
 :host {
   // In-template content only — rules for teleported overlay content go at top level (see above).
 
@@ -89,22 +108,135 @@
     text-decoration: underline;
   }
 
+  // Only ink on hover or focus: a chevron on every header at rest is noise across nineteen of
+  // them, and the header already carries a name and a sort icon.
+  .column-menu-button {
+    @include bare-button();
+    color: var(--p-text-muted-color);
+    padding: 0 2px;
+    opacity: 0;
+    font-size: 0.75rem;
+  }
+
+  th:hover .column-menu-button,
+  .column-menu-button:focus-visible {
+    opacity: 1;
+  }
+
+  // Tabs, above the bar: a view names the question, the bar shows what it resolved to. Shopify
+  // puts saved order views in the same place for the same reason.
+  .table-views {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding-top: 8px;
+  }
+
+  .table-view {
+    @include bare-button();
+    color: var(--p-text-muted-color);
+    padding: 4px 10px;
+    border-radius: var(--p-content-border-radius);
+
+    &:hover {
+      background: var(--p-content-hover-background);
+    }
+  }
+
+  .table-view-active {
+    color: var(--p-primary-color);
+    font-weight: 600;
+    background: var(--p-content-hover-background);
+  }
+
+  // The left edge that survives a horizontal scroll. Geometry only here: the opaque background
+  // lives on the BODY cells below, because the header th already gets an opaque
+  // header.cell.background from PrimeNG's own th rule. Painting the row palette on the whole
+  // class put the pinned th on the row colour and let the hover rule tint it whenever the pointer
+  // crossed ANY header cell — the locked column reacting on its own, again ("na hover ostalih
+  // hoveruje i locked kolone", Filip, 2026-09-05) — and overrode PrimeNG's per-cell sortable
+  // header hover, which is the hover a th should have.
+  .frozen-column {
+    position: sticky;
+    z-index: 1;
+  }
+
+  // Body cells: the background must be OPAQUE and must track hover and striping, or rows show
+  // through the pinned cells as they pass underneath — which is the one thing that makes a sticky
+  // column look broken rather than merely unstyled. It inherits rather than naming a colour so
+  // PrimeNG's own row states keep working.
+  td.frozen-column {
+    background: var(--p-datatable-row-background, var(--p-content-background));
+    // The row fades between its two backgrounds and this repainted instantly, so the pinned
+    // columns changed shade a beat before the rest of the row — which reads as the locked column
+    // reacting on its own rather than as one row highlighting (Filip, on /tags). Same duration
+    // token PrimeNG's own row uses, so the two are one movement.
+    transition: background-color var(--p-transition-duration, 0.2s);
+  }
+
+  tr:hover > td.frozen-column {
+    background: var(--p-datatable-row-hover-background, inherit);
+  }
+
+  // The seam. NN/g calls for a shadow so the pinned columns read as floating ABOVE the rest
+  // rather than as the first two columns of a table that happens not to move.
+  //
+  // `:last-of-type` shipped here first and drew NOTHING: it means "last th among its siblings",
+  // and the frozen cells are the FIRST ones — it was written for "the last frozen column", which
+  // is a concept the markup never expressed. The class does.
+  .frozen-column-last {
+    box-shadow: 2px 0 4px -2px rgb(0 0 0 / 15%);
+  }
+
+  // The grab handle on a header's right edge. The th is position:relative through PrimeNG's own
+  // styles; the strip is wider than the line it draws so it can actually be hit.
+  th {
+    position: relative;
+  }
+
+  .column-resizer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 8px;
+    height: 100%;
+    cursor: col-resize;
+    user-select: none;
+  }
+
+  // The select-all counter. A smaller step than the body text because it is a parenthetical, and
+  // because it is what decides how narrow the checkbox column can be.
+  .selection-count {
+    font-size: 0.75rem;
+    color: var(--p-text-muted-color);
+  }
+
   // Belt to onSelectionCellMouseDown's preventDefault (shift+click text-selection suppression).
   td.selection-cell {
     user-select: none;
   }
 
+  // The operator's per-column wrap (header menu) travels as inherited custom properties, because
+  // the library cannot style a projected spiderlyCellTemplate directly (CLAUDE.md → Column
+  // widths). Unset, the var()s below fall back to the clamp; a wrapped td flips both, and any
+  // consumer clamp written against the same vars follows — that is the whole contract. Only these
+  // two: text-overflow needs no property, since it has no effect once overflow is visible.
+  td.cell-wrap {
+    --spiderly-cell-overflow: visible;
+    --spiderly-cell-white-space: normal;
+  }
+
   // The cost the fixed layout would otherwise hand over: text no longer widens its column, so
   // it wraps inside it and a long value grows the row — which pushes every row below it, a worse
   // shift than the horizontal one the fixed layout removes. One line, ellipsis, whole value still
-  // in the DOM to select and copy.
-  //
-  // Default cell only; why it cannot reach a consumer's cell template: CLAUDE.md → Column widths.
+  // in the DOM to select and copy. The clamp stays the default precisely because a row that grows
+  // by content costs more than the line saves — wrapping is a choice someone makes about one
+  // column (td.cell-wrap above), not a shape every table inherits.
   .cell-text {
     display: block;
-    overflow: hidden;
+    overflow: var(--spiderly-cell-overflow, hidden);
     text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: var(--spiderly-cell-white-space, nowrap);
   }
 
   // PrimeNG-rendered markup, so ::ng-deep is the only way in; the mixin carries the contract.

package/styles/filters/spiderly-filter-bar.component.scss

@@ -0,0 +1,163 @@
+@use "../styles/layout/mixins" as *;
+
+// Not teleported, so `:host` scoping holds here — unlike the column chooser, whose rules must sit
+// at top level because PrimeNG moves its popover into document.body (Angular/CLAUDE.md → overlay
+// styling). Colours come from the PrimeNG theme's variables so the bar follows the admin's theme
+// rather than carrying a second palette.
+:host {
+  display: block;
+}
+
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0 0;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: 999px;
+  background: var(--p-content-background);
+  // The chip is two buttons in one pill; the padding lives on them so both halves are fully
+  // clickable rather than leaving a dead ring around the text.
+  padding: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.filter-chip-edit {
+  @include bare-button();
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 4px 4px 10px;
+  border-radius: 999px 0 0 999px;
+
+  &:hover .filter-chip-value {
+    text-decoration: underline;
+  }
+}
+
+.filter-chip-label {
+  color: var(--p-text-muted-color);
+}
+
+.filter-chip-value {
+  font-weight: 600;
+}
+
+.filter-chip-remove {
+  @include bare-button();
+  color: var(--p-text-muted-color);
+  font-size: 1.05rem;
+  line-height: 1;
+  padding: 4px 9px 5px 4px;
+  border-radius: 0 999px 999px 0;
+
+  &:hover {
+    color: var(--p-primary-color);
+  }
+}
+
+// PrimeNG's button owns the look; only placement belongs here.
+.filter-add {
+  flex: none;
+}
+
+// The add menu is teleported into document.body with its popover, so its rules must sit at TOP
+// LEVEL — `:host` nesting dies on teleport, exactly as the column chooser's do (Angular/CLAUDE.md
+// → overlay styling). The editor is in-template and could be nested, but the two are kept together
+// so nobody has to remember which is which.
+.filter-add-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 2px;
+  min-width: 14rem;
+  // Nineteen filters is taller than a popover should ever be; the list scrolls and the search box
+  // above it does not move with it.
+  max-height: 20rem;
+  overflow-y: auto;
+}
+
+.filter-add-search {
+  margin-bottom: 4px;
+  position: sticky;
+  top: 0;
+}
+
+.filter-add-option {
+  @include bare-button();
+  text-align: left;
+  padding: 6px 10px;
+  border-radius: var(--p-content-border-radius);
+
+  &:hover {
+    background: var(--p-content-hover-background);
+  }
+}
+
+// Its own row under the chips, full width, so the controls have room and always appear in one
+// predictable place.
+// Every control here is sized through its own `size="small"` input, never a hand-written
+// `p-inputtext-sm`: each PrimeNG component has its OWN small class (p-select-sm,
+// p-multiselect-sm), so the input class silently did nothing on a select and left it a head
+// taller than the box beside it.
+.filter-editor {
+  display: flex;
+  margin-top: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--p-content-border-color);
+  border-radius: var(--p-content-border-radius);
+  background: var(--p-content-background);
+  padding: 8px;
+}
+
+.filter-editor-label {
+  font-weight: 600;
+}
+
+.filter-editor-tick {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.filter-bar-count {
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+  // Pushed away from the chips it summarises, not crowded against the last one.
+  margin-left: 4px;
+}
+
+.sort-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--p-text-muted-color);
+  font-size: 0.875rem;
+}
+
+.sort-chip-key {
+  // The direction arrow is the non-colour channel; the priority is the reading order, which is
+  // the thing the scattered header icons could never show.
+  color: var(--p-text-color);
+}
+
+.filter-bar-clear {
+  // Pushed to the far end, away from the chips: a destructive action next to the x it resembles
+  // is how a single chip gets removed by someone reaching for all of them. It is also the LAST
+  // child, because an auto margin here pushes everything after it to the right edge too — which
+  // is how the editor ended up across the screen from the click it answered.
+  margin-left: auto;
+  flex: none;
+}

package/styles/styles/layout/_mixins.scss

@@ -1,3 +1,16 @@
+// A <button> stripped to bare text — the reset behind the library chrome's chips, view tabs,
+// menu rows and plain-text actions. Only the reset lives here: colour, padding, radius and hover
+// stay at the call site (declared AFTER the include, so they win), because what a bare button
+// looks like is per surface — that it stops looking like a UA button is not.
+@mixin bare-button() {
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  padding: 0;
+}
+
 @mixin focused() {
   outline: 0 none;
   outline-offset: 0;