@apliteni/apliteni-ui 0.116.0 → 0.118.0

package/src/components/filter-bar.js

@@ -2,7 +2,7 @@ import { button, esc } from './index.js';
 import { dropdown, wireDropdown } from './dropdown.js';
 import { filterChipText, filterChipName, filterChipUnset, filterChipItems, focusNextStop } from '../logic/filter-bar.js';
 
-export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all', disabled = false, busy = false } = {}) {
+export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all', clearVariant = 'ghost', disabled = false, busy = false } = {}) {
   return `<fieldset class="ui-filter-bar" data-filter-bar${disabled || busy ? ' disabled' : ''}${busy ? ' aria-busy="true"' : ''}>`
     + `<legend class="ui-filter-bar__legend">${esc(label)}</legend>`
     + filters.map(filter => `<fieldset class="ui-filter-bar__chip" data-filter-id="${esc(filter.id)}"${filter.disabled ? ' disabled' : ''}>`
@@ -17,11 +17,10 @@ export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear
     // row is the only thing in it, and it reads as a bar that has been turned
     // off rather than one with no filters on it. It is the kit's own `one-page`
     // rule — a control with no action to offer is not shown. It returns with
-    // the first chip, in the bordered skin rather than the ghost one, because a
-    // live action beside two chips has to read as live.
+    // the first chip, as a quiet text action.
     // why: docs/components.md#a-filter-row-holds-its-panels
     + (filters.length
-      ? `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: 'ghost' })}</span>`
+      ? `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: clearVariant })}</span>`
       : '')
     + '</fieldset>';
 }

package/src/styles/button.css

@@ -1,5 +1,5 @@
 /* ============================================================================
- * Button — .ui-btn  (variants: primary / secondary / ghost / danger)
+ * Button — .ui-btn  (variants: primary / secondary / ghost / danger / link)
  *                   (sizes: xs / sm / md / lg, [icon], [disabled], [aria-busy])
  * ========================================================================== */
 
@@ -70,6 +70,22 @@
   color: var(--strong);
 }
 
+.ui-btn--link {
+  background: transparent;
+  border-color: transparent;
+  color: var(--accent);
+  padding-inline: 0;
+}
+.ui-btn--link .ui-btn__label-slot { overflow: visible; }
+.ui-btn--link[aria-busy="true"] .ui-btn__label-slot { overflow: hidden; }
+.ui-btn--link .ui-btn__label { text-decoration: underline; text-underline-offset: 0.2em; }
+.ui-btn.ui-btn--link:hover {
+  background: transparent;
+  border-color: transparent;
+  color: var(--strong);
+  text-decoration: underline;
+}
+
 .ui-btn--danger { color: var(--text); }
 .ui-btn--danger:hover, .ui-btn--danger:focus-visible {
   color: var(--pink);
@@ -112,6 +128,12 @@
   border-color: transparent;
   /* muted-ink: state — unavailable control */ color: var(--disabled-ink-bare);
 }
+.ui-btn--link:disabled,
+.ui-btn--link[aria-disabled="true"] {
+  background: transparent;
+  border-color: transparent;
+  /* muted-ink: state — unavailable link action */ color: var(--disabled-ink-bare);
+}
 /* With no box, the ink is read on whatever is behind it, so the ghost takes an ink
    set for the dullest ground: in dark 7.49 / 6.31 / 7.00 / 5.44 on --bg / --surface /
    --surface-2 / --surface-3, in light 5.85 / 6.50 / 5.49 / 5.70. The enabled ghost now uses body
@@ -161,6 +183,13 @@
   border-color: transparent;
   color: var(--text);
 }
+.ui-btn[aria-busy="true"].ui-btn--link,
+.ui-btn[aria-busy="true"].ui-btn--link:hover,
+.ui-btn[aria-busy="true"].ui-btn--link:active {
+  background: transparent; /* code-bg: inherit — busy paint retains the button's containing gap. */
+  border-color: transparent;
+  color: var(--accent);
+}
 .ui-btn[aria-busy="true"].ui-btn--danger,
 .ui-btn[aria-busy="true"].ui-btn--danger:hover,
 .ui-btn[aria-busy="true"].ui-btn--danger:active {

package/src/styles/card.css

@@ -40,6 +40,11 @@
 .ui-card--pad-sm { padding: var(--space-5) var(--space-6); }
 .ui-card--pad-lg { padding: var(--space-8) var(--space-10); }
 
+/* A card framing one content-width block ends where the block ends — a 359px table sat in
+   a 1232px card (#504) — and is capped, so a wider block still fills the room and scrolls.
+   why: docs/foundations.md#spacing-and-rhythm */
+.ui-card--fit { width: fit-content; max-width: 100%; }
+
 /* An accent-tinted card, e.g. a highlighted plan / success surface. The accent edge is
    the card's own hairline re-coloured: an inset ring over it would draw two. #295
    The strength is --card-tint, per theme: light mixes down from white, so a tint that

package/src/styles/pagination.css

@@ -10,6 +10,7 @@
 .ui-pager {
   display: flex;
   flex-wrap: wrap;
+  justify-content: flex-end;
   align-items: center;
   gap: var(--space-3) var(--space-4);
   font-size: var(--text-sm);
@@ -113,7 +114,8 @@
    `margin-top: 16px` for this, which is --space-4; the number moves to the scale
    with it rather than travelling as a literal.
    why: docs/foundations.md#spacing-and-rhythm */
-.ui-table + .ui-pager { margin-top: var(--space-4); }
+.ui-table + .ui-pager,
+.ui-table-scroll + .ui-pager { margin-top: var(--space-4); }
 
 /* A step given an `href` is an anchor, and a host stylesheet's `a:link` is
    (0,1,1) — which outranks `.ui-btn--ghost` at (0,1,0) and paints the enabled

package/src/styles/table.css

@@ -8,6 +8,11 @@
   border-collapse: collapse;
   font-size: var(--text-base);
 }
+/* Fit cards keep short tables close to their labels. Other cards keep full-width tables. */
+:where(.ui-card--fit) .ui-table {
+  width: auto;
+  max-width: 100%;
+}
 .ui-table th {
   text-align: left;
   /* rank: label */
@@ -280,6 +285,10 @@
   width: calc(100% + 2 * var(--space-3));
   margin-inline: calc(-1 * var(--space-3));
 }
+.ui-card--fit > :where(.ui-table--dense, .ui-table--zebra) {
+  width: auto;
+  max-width: calc(100% + 2 * var(--space-3));
+}
 /* A scroll wrapper owns the bleed for a nested dense table: 4px of focus
    clearance plus the 12px end-cell inset. */
 .ui-card > .ui-table-scroll:has(> .ui-table--dense) {
@@ -391,6 +400,8 @@ a.ui-identity:hover { text-decoration: underline; }
      under it, so whatever the cut lets out is painted over that column. A child's ring
      needs 3px and the cell's padding is 12px, so the room comes from the padding.
      why: docs/components.md#dense-financial-tables, #500, #513 */
+  /* A percentage can stretch an intrinsic table beyond its content. */
+  .ui-card--fit .ui-table--pinned .ui-table__identity { width: 1px; }
   .ui-table--pinned .ui-table__identity {
     width: 1%;
     max-width: var(--ui-table-identity-max);