@attrus-ds/core 1.0.12 → 1.0.14

package/dist/css/components/primitives.css

@@ -317,3 +317,71 @@
   color: var(--color-foreground-muted);
   margin-bottom: var(--space-2-5);
 }
+
+/* ----------------------------------------------------------------
+   PROGRESS — one tone scale, two shapes
+   ----------------------------------------------------------------
+   Shape and tone are independent axes. Shape answers "is the count
+   meaningful?" — a bar at 60% invites estimation, a filled 3rd segment states
+   "3 of 5". Tone answers "what does this progress mean?" and uses the same
+   semantic pairs as the pills, so a bar reads consistently with the status
+   beside it.
+
+   Both shapes resolve --progress-tone, so a tone is declared ONCE and works in
+   either. Adding a tone is a single line; it used to be two rules per tone and
+   a tone added to one shape silently missed the other.
+
+   Shapes:  .progress (continuous)  ·  .progress-seg (discrete steps)
+   Tones:   default (brand) · is-success · is-warning · is-danger · is-critical
+   Sizes:   is-sm 4px · default 6px · is-lg 10px
+   ---------------------------------------------------------------- */
+
+/* Tone scale — read by both shapes */
+.progress, .progress-seg { --progress-tone: var(--color-brand-solid); }
+.is-success  { --progress-tone: var(--color-feedback-success-foreground); }
+.is-warning  { --progress-tone: var(--color-feedback-warning-foreground); }
+.is-danger   { --progress-tone: var(--color-feedback-danger-foreground); }
+.is-critical { --progress-tone: var(--color-feedback-danger-foreground); }
+.is-info     { --progress-tone: var(--color-feedback-info-foreground); }
+
+/* Shape: continuous */
+.progress .progress-fill { background: var(--progress-tone); }
+/* the default tone keeps the brand gradient, which reads richer than flat navy */
+.progress:not([class*="is-success"]):not([class*="is-warning"]):not([class*="is-danger"]):not([class*="is-critical"]):not([class*="is-info"]) .progress-fill {
+  background: var(--grad-brand-soft);
+}
+
+/* Shape: segmented */
+.progress-seg { display: inline-flex; gap: var(--space-1); width: 100%; }
+.progress-seg > i {
+  flex: 1;
+  height: var(--progress-h, 6px);
+  border-radius: var(--radius-2xs);
+  background: var(--progress-track, var(--color-border-default));
+}
+.progress-seg > i.is-done { background: var(--progress-tone); }
+.progress-seg > i.is-current { background: color-mix(in srgb, var(--progress-tone) 45%, transparent); }
+
+/* Critical — danger that is also URGENT. Danger states a failed fact; critical
+   says the clock is running (a cut-off hours away, a limit about to bind). The
+   pulse is what separates them: colour alone cannot express time pressure, and
+   a table full of red would flatten the distinction. */
+.progress.is-critical .progress-fill,
+.progress-seg.is-critical > i.is-current {
+  animation: progress-critical 1.6s var(--ease-standard) infinite;
+}
+.progress.is-critical { box-shadow: 0 0 0 1px color-mix(in srgb, var(--progress-tone) 30%, transparent); }
+@keyframes progress-critical { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
+
+/* Sizes */
+.progress.is-sm, .progress-seg.is-sm > i { --progress-h: 4px; }
+.progress.is-lg, .progress-seg.is-lg > i { --progress-h: 10px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .progress.is-critical .progress-fill,
+  .progress-seg.is-critical > i.is-current { animation: none; }
+}
+}
+/* Sizes */
+.progress.is-sm, .progress-seg.is-sm > i { --progress-h: 4px; }
+.progress.is-lg, .progress-seg.is-lg > i { --progress-h: 10px; }

package/dist/css/components/sidebar.css

@@ -192,3 +192,36 @@
   background: var(--color-background-subtle);
   padding: 1px 6px; border-radius: var(--radius-xs);
 }
+
+/* ============================================================
+   GLASS VARIANT — .sb.is-glass
+   ============================================================
+   Same idea as .topbar.is-glass, with one extra concern: a sidebar is tall, so
+   the blur samples a lot of moving content and the active-item tint has to stay
+   legible against all of it. The active row therefore keeps an opaque backing
+   instead of inheriting the translucent field.
+
+   The right edge is the boundary here (the sidebar has no bottom border), so it
+   takes the stronger token for the same reason the topbar's hairline does. */
+.sb.is-glass {
+  background: var(--glass-chrome);
+  color: var(--glass-chrome-fg);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border-right-color: var(--color-border-strong);
+}
+/* Active item must not dissolve into the blur */
+.sb.is-glass .sb-item.active {
+  background: var(--color-background-selected);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+/* Head and foot read as their own planes over a translucent field */
+.sb.is-glass .sb-head,
+.sb.is-glass .sb-foot {
+  background: color-mix(in srgb, var(--color-background-surface) 40%, transparent);
+  border-color: var(--color-border-default);
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .sb.is-glass { background: var(--color-background-surface); }
+}

package/dist/css/components/smart-search.css

@@ -6,23 +6,26 @@
    Consumed by the SmartSearch TSX component.
    ============================================================ */
 /* Smart-search combobox */
-.ss { width: 100%; max-width: 380px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; font-size: var(--fs-sm); }
-.ss-input { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
+/* 380px: comfortable reading measure for a result list, and narrow enough that
+   the palette does not blanket the page it floats over. Not a token — it is a
+   layout decision local to this component. */
+.ss { width: 100%; max-width: 380px; background: var(--color-background-surface); border: var(--border-hairline) solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; font-size: var(--fs-sm); }
+.ss-input { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline) solid var(--color-border-subtle); }
 .ss-input.ss-input-flat { border-bottom: 0; }
 .ss-input svg, .ss-input i { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); flex-shrink: 0; }
 .ss-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--color-foreground-default); }
 .ss-input input::placeholder { color: var(--color-foreground-placeholder); }
-.ss-clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; padding: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-foreground-muted); cursor: pointer; }
+.ss-clear { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-sm); height: var(--icon-sm); border: 0; padding: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-foreground-muted); cursor: pointer; }
 .ss-clear:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
-.ss-clear svg, .ss-clear i { width: 12px; height: 12px; }
+.ss-clear svg, .ss-clear i { width: var(--icon-xs); height: var(--icon-xs); }
 
-.ss-section { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
+.ss-section { padding: var(--space-3) var(--space-2); border-bottom: var(--border-hairline) solid var(--color-border-subtle); }
 .ss-section:last-of-type { border-bottom: 0; }
 .ss-section-label { font-size: var(--fs-xxs); font-weight: var(--w-regular); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); padding: 0 var(--space-2); margin-bottom: var(--space-2); }
 
 /* Suggestion chips (active state) */
 .ss-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-2); }
-.ss-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--w-regular); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); }
+.ss-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-background-canvas); border: var(--border-hairline) solid var(--color-border-default); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--w-regular); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); }
 .ss-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
 .ss-chip svg, .ss-chip i { width: 11px; height: 11px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
 
@@ -30,18 +33,18 @@
 .ss-list { list-style: none; margin: 0; padding: 0; }
 .ss-list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast); }
 .ss-list-item:hover, .ss-list-item.is-active { background: var(--color-background-hover); }
-.ss-list-item .icon-leading { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-background-canvas); display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground-secondary); flex-shrink: 0; }
-.ss-list-item .icon-leading svg, .ss-list-item .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+.ss-list-item .icon-leading { width: var(--control-h-xs); height: var(--control-h-xs); border-radius: var(--radius-sm); background: var(--color-background-canvas); display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground-secondary); flex-shrink: 0; }
+.ss-list-item .icon-leading svg, .ss-list-item .icon-leading i { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke); }
 .ss-list-item .icon-leading.brand { background: var(--color-brand-subtle-solid); color: var(--color-brand-text-on-light); }
 .ss-list-item .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
 .ss-list-item .text .label { font-size: var(--fs-sm); font-weight: var(--w-regular); color: var(--color-foreground-default); }
 .ss-list-item .text .meta { font-size: var(--fs-xs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-list-item .icon-trailing { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--color-foreground-muted); }
-.ss-list-item .icon-trailing svg, .ss-list-item .icon-trailing i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+.ss-list-item .icon-trailing { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; color: var(--color-foreground-muted); }
+.ss-list-item .icon-trailing svg, .ss-list-item .icon-trailing i { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke); }
 
 /* Recent searches — clock icon + dim text */
-.ss-recent .ss-list-item .icon-leading { background: transparent; border: 0; width: 18px; height: 18px; }
-.ss-recent .ss-list-item .icon-leading svg, .ss-recent .ss-list-item .icon-leading i { width: 13px; height: 13px; color: var(--color-foreground-muted); }
+.ss-recent .ss-list-item .icon-leading { background: transparent; border: 0; width: var(--icon-sm); height: var(--icon-sm); }
+.ss-recent .ss-list-item .icon-leading svg, .ss-recent .ss-list-item .icon-leading i { width: var(--icon-xs); height: var(--icon-xs); color: var(--color-foreground-muted); }
 .ss-recent .ss-list-item .text .label { font-weight: var(--w-regular); color: var(--color-foreground-secondary); }
 
 /* Empty/result label */
@@ -51,9 +54,9 @@
 .ss-no-result strong { color: var(--color-foreground-default); font-weight: var(--w-regular); }
 
 /* Tip / hint card (similar match suggestion, ID format hint) */
-.ss-hint { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-background-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); margin: var(--space-3) var(--space-2) 0; }
-.ss-hint .icon-leading { color: var(--color-foreground-muted); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; }
-.ss-hint .icon-leading svg, .ss-hint .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+.ss-hint { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-background-subtle); border: var(--border-hairline) solid var(--color-border-subtle); border-radius: var(--radius-sm); margin: var(--space-3) var(--space-2) 0; }
+.ss-hint .icon-leading { color: var(--color-foreground-muted); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--icon-xs); height: var(--icon-xs); }
+.ss-hint .icon-leading svg, .ss-hint .icon-leading i { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke); }
 .ss-hint .body { font-size: var(--fs-sm); color: var(--color-foreground-secondary); line-height: var(--lh-relaxed); }
 .ss-hint .body strong { color: var(--color-foreground-default); font-weight: var(--w-regular); }
 .ss-hint .body code { font-family: var(--font-mono);
@@ -61,16 +64,16 @@
 
 /* ID type-picker buttons */
 .ss-typebtns { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2); }
-.ss-typebtn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--w-regular); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%; }
+.ss-typebtn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); background: var(--color-background-canvas); border: var(--border-hairline) solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--w-regular); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%; }
 .ss-typebtn:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
-.ss-typebtn svg, .ss-typebtn i { width: 16px; height: 16px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
+.ss-typebtn svg, .ss-typebtn i { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
 .ss-typebtn .grow { flex: 1; }
 .ss-typebtn .chev { color: var(--color-foreground-muted); }
 
 /* Loading skeleton + spinner illustration */
 .ss-skeleton { padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-3); }
 .ss-skel-row { display: flex; align-items: center; gap: var(--space-3); }
-.ss-skel-circle { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-border-default); flex-shrink: 0; }
+.ss-skel-circle { width: var(--control-h-xs); height: var(--control-h-xs); border-radius: var(--radius-sm); background: var(--color-border-default); flex-shrink: 0; }
 .ss-skel-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
 .ss-skel-bar { height: 8px; border-radius: var(--radius-xs); background: var(--color-border-default); }
 .ss-skel-bar.short { width: 40%; }
@@ -79,15 +82,45 @@
 @keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
 
 .ss-illo { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); text-align: center; }
-.ss-illo svg.illustration { width: 84px; height: 60px; }
+.ss-illo svg.illustration { width: 84px; /* 60px: two rows of the empty illustration, sized to the same optical block */
+  height: 60px; }
 .ss-illo .title { font-size: var(--fs-md); font-weight: var(--w-regular); color: var(--color-foreground-default); }
 .ss-illo .body { font-size: var(--fs-xs); color: var(--color-foreground-muted); max-width: 32ch; line-height: var(--lh-relaxed); }
 
 /* Footer with keyboard shortcuts */
-.ss-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-background-subtle); border-top: 1px solid var(--color-border-subtle); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
-.ss-foot .kbd-group { display: inline-flex; align-items: center; gap: 4px; }
-kbd.ss-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xs); font-family: var(--font-mono);
+.ss-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-background-subtle); border-top: var(--border-hairline) solid var(--color-border-subtle); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
+.ss-foot .kbd-group { display: inline-flex; align-items: center; gap: var(--space-2); }
+kbd.ss-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: var(--icon-sm); height: var(--icon-sm); padding: 0 var(--space-2); background: var(--color-background-surface); border: var(--border-hairline) solid var(--color-border-default); border-radius: var(--radius-xs); font-family: var(--font-mono);
   font-size-adjust: var(--font-mono-adjust); font-size: 10px; font-weight: var(--w-regular); color: var(--color-foreground-secondary); }
-.ss-foot .sep { width: 1px; height: 12px; background: var(--color-border-default); }
+.ss-foot .sep { width: 1px; height: var(--icon-xs); background: var(--color-border-default); }
 
 
+
+/* Searching illustration — one belt, four cards, a fade mask.
+   Three independently-animated cards could not work: staggering their delays by
+   a third means their slides are also staggered, so a card slides into a slot
+   the previous one has not left yet and they cross over (measured: overlap in
+   20 of 10 sampled frames). The fix is to stop animating cards and animate the
+   BELT — the cards keep a fixed 42px pitch, so they physically cannot overlap.
+
+   Opacity comes from position rather than from each card's own timeline: an SVG
+   fade mask makes the middle of the frame fully opaque and the edges transparent,
+   so a card loses its transparency BECAUSE it reached the centre. Four cards make
+   the loop seamless — after one pitch of travel the arrangement repeats. */
+@keyframes ss-doc-belt {
+  /* Push in, hold, push out. A linear belt never pauses, so nothing was ever
+     "in the spotlight" — the hold is what makes it read as one document being
+     examined rather than a strip scrolling past.
+     0.9s cycle: ~0.4s of travel, 0.5s parked at centre. The belt still advances
+     exactly one 42px pitch per cycle, so the loop stays seamless. */
+  0%, 44%   { transform: translateX(0); }
+  100%      { transform: translateX(-42px); }
+}
+.ss-illo .illustration .doc-belt {
+  /* Ease on the move; the flat 0→44% span is the half-second hold. */
+  animation: ss-doc-belt .9s var(--ease-standard) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ss-illo .illustration .doc-belt { animation: none; }
+}

package/dist/css/components/status-pills.css

@@ -134,12 +134,12 @@
 .pill.solid.brand   { background: var(--color-brand-solid);    color: var(--color-brand-on-solid); border-color: transparent; }
 .pill.solid > .dot  { background: currentColor; }
 
-.pill.outline.success { background: transparent; color: var(--color-feedback-success-foreground); border-color: var(--color-success-500); }
-.pill.outline.warning { background: transparent; color: var(--color-feedback-warning-foreground); border-color: var(--color-warning-500); }
-.pill.outline.danger  { background: transparent; color: var(--color-feedback-danger-foreground);  border-color: var(--color-danger-500);  }
-.pill.outline.info    { background: transparent; color: var(--color-feedback-info-foreground);    border-color: var(--color-info-500);    }
-.pill.outline.neutral { background: transparent; color: var(--color-foreground-secondary); border-color: var(--color-border-strong); }
-.pill.outline.brand   { background: transparent; color: var(--color-foreground-accent);  border-color: var(--color-brand-solid);    }
+.pill.outline.success { background: transparent; color: var(--color-feedback-success-foreground); border-color: var(--color-feedback-success-border); }
+.pill.outline.warning { background: transparent; color: var(--color-feedback-warning-foreground); border-color: var(--color-feedback-warning-border); }
+.pill.outline.danger  { background: transparent; color: var(--color-feedback-danger-foreground);  border-color: var(--color-feedback-danger-border);  }
+.pill.outline.info    { background: transparent; color: var(--color-feedback-info-foreground);    border-color: var(--color-feedback-info-border);    }
+.pill.outline.neutral { background: transparent; color: var(--color-foreground-secondary); border-color: var(--color-border-default); }
+.pill.outline.brand   { background: transparent; color: var(--color-foreground-accent);  border-color: var(--color-brand-border);   }
 
 
 /* ----------------------------------------------------------------