Reconcile visual specimen with the resolved status indicator and toggle

This commit is contained in:
2026-06-05 14:11:05 +03:00
parent ad239d7d49
commit 25849461e0
+23 -6
View File
@@ -568,7 +568,9 @@
display: inline-block;
}
.dot.draft {
background: var(--support-warning);
/* Accent, not a warning hue: a draft / unpublished-changes state is
neutral, not a problem (arch/10 §6 status-indicator resolution + council). */
background: var(--accent);
}
.dot.published {
background: var(--support-success);
@@ -624,6 +626,13 @@
align-items: center;
gap: var(--space-2);
}
/* Fixed-width slot so the draft dot (shown only on dirty rows) never shifts
the date — published rows keep an empty slot and stay aligned. */
.item .indicator {
flex: 0 0 auto;
width: 8px;
height: 8px;
}
.item .del {
opacity: 0;
border: none;
@@ -990,8 +999,12 @@
<section>
<h2>Tabs · status · tags</h2>
<div class="tabs">
<button aria-selected="true">Draft</button>
<button aria-selected="false">Published</button>
<button aria-selected="true">Overview</button>
<button aria-selected="false">Details</button>
</div>
<div class="cap" style="margin-top: var(--space-2)">
Catalog primitive only. The Draft/Published view uses the segmented control (a
radio group), not tabs — see arch/10.
</div>
<div class="row" style="margin-top: var(--space-6)">
<span class="tag-pill"><span class="dot draft"></span> Draft changes</span>
@@ -1033,7 +1046,11 @@
<div class="item active">
<div class="main">
<div class="name">Quarterly revenue</div>
<div class="sub"><span class="dot draft"></span> Today · 2 KB</div>
<div class="sub">
<span class="indicator"><span class="dot draft"></span></span><span
>Today · 2 KB</span
>
</div>
</div>
<button class="del" title="Delete">
<svg
@@ -1052,7 +1069,7 @@
<div class="item">
<div class="main">
<div class="name">Population by region</div>
<div class="sub"><span class="dot published"></span> Yesterday</div>
<div class="sub"><span class="indicator"></span><span>Yesterday</span></div>
</div>
<button class="del" title="Delete">
<svg
@@ -1071,7 +1088,7 @@
<div class="item">
<div class="main">
<div class="name">Scatter · height vs weight</div>
<div class="sub"><span class="dot published"></span> 3d ago</div>
<div class="sub"><span class="indicator"></span><span>3d ago</span></div>
</div>
<button class="del" title="Delete">
<svg