Bump version

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "yksa-web-kit"
-version = "0.1.0"
+version = "0.1.2"
 description = "Shared chrome, UI kit and vendored front-end assets for the YKSA services"
 requires-python = ">=3.13"
 license = { text = "Proprietary" }

yksa_web/static/yksa/css/kit.css

@@ -115,6 +115,10 @@
 	padding: .05rem .4rem;
 	white-space: nowrap;
 	border: 1px solid transparent;
+	/* An inline-flex box baseline-aligns on its own last line box, which in a
+	   table cell or a run of text leaves it sitting a few pixels low. It is a
+	   self-contained box; align it on the middle instead. */
+	vertical-align: middle;
 }
 
 /* health */
@@ -164,6 +168,7 @@
 	color: var(--bs-secondary-color);
 	background: var(--bs-tertiary-bg);
 	border: 1px solid var(--bs-border-color);
+	vertical-align: middle;
 }
 
 /* -----------------------------------------------------------------------------
@@ -223,6 +228,64 @@
 	font-size: .8em;
 }
 
+/* -----------------------------------------------------------------------------
+   Containers
+   -------------------------------------------------------------------------- */
+
+/* A container that supplies its own padding must not also inherit the trailing
+   margin of whatever it ends with. Bootstrap does this for `p` in a few places
+   and not at all for `dl`, `ul` or `table`, so the fix was being applied by hand
+   -- an `mb-0` on the last element of every card body -- which every element
+   added later then has to remember. It is one rule and it belongs here.
+
+   Scoped to direct children: anything deeper is inside something else's box, and
+   that box's spacing is its own business. */
+.card-body > :last-child,
+.alert > :last-child,
+.list-group-item > :last-child,
+.modal-body > :last-child,
+.offcanvas-body > :last-child {
+	margin-bottom: 0;
+}
+
+/* -----------------------------------------------------------------------------
+   Alerts
+
+   The estate theme paints alerts in solid colour, not the tinted panel Bootstrap
+   ships by default. That changes what belongs inside one: a utility text colour
+   is computed against the page ground and is unreadable on a saturated one, and
+   an outline button drawn in `--bs-secondary` all but vanishes.
+   -------------------------------------------------------------------------- */
+
+/* Muted text inside an alert is the alert's own colour, softened. All three of
+   these resolve to --bs-secondary-color, which is computed against the page. */
+.alert .text-body-secondary,
+.alert .yksa-label,
+.alert .yksa-hint {
+	color: currentColor !important;
+	opacity: .8;
+}
+
+/* Outline buttons take their colour from the alert rather than from the palette,
+   and invert to the alert's ground on hover. The semantic distinction between
+   `-secondary` and `-danger` is lost here, which is correct: the alert already
+   says which of those it is, and a red outline on a red ground says nothing. */
+.alert .btn-outline-primary,
+.alert .btn-outline-secondary,
+.alert .btn-outline-success,
+.alert .btn-outline-danger,
+.alert .btn-outline-warning {
+	--bs-btn-color: inherit;
+	--bs-btn-border-color: currentColor;
+	--bs-btn-hover-color: var(--bs-alert-bg);
+	--bs-btn-hover-bg: currentColor;
+	--bs-btn-hover-border-color: currentColor;
+	--bs-btn-active-color: var(--bs-alert-bg);
+	--bs-btn-active-bg: currentColor;
+	--bs-btn-active-border-color: currentColor;
+	--bs-btn-focus-shadow-rgb: 255, 255, 255;
+}
+
 /* -----------------------------------------------------------------------------
    Layout
    -------------------------------------------------------------------------- */
@@ -252,6 +315,26 @@
 	background: var(--bs-success-bg-subtle);
 }
 
+/* Catalog card: a card summarising one record, where the whole card is the link
+   to it. The hover treatment is defined once, here, because three services had a
+   grid of these and none of them said what hovering meant -- the cursor changed
+   over the title only, and the padding around it was dead. The card carries this
+   class and the title anchor carries .stretched-link. */
+.yksa-card-link {
+	position: relative;
+}
+
+.yksa-card-link:hover {
+	border-color: var(--bs-primary);
+	background: var(--bs-tertiary-bg);
+}
+
+/* The title is already the link; underlining it on hover would be the only
+   moving part in a grid of forty. The border carries the affordance instead. */
+.yksa-card-link:hover .stretched-link {
+	color: var(--bs-primary);
+}
+
 /* Empty state: a sentence plus, where there is one, the action that resolves
    it -- beside the sentence, not under it. Never a blank card. */
 .yksa-empty {

yksa_web/templates/yksa/ui/_kpi.html

@@ -12,9 +12,14 @@ KPI tile. One column of a .row-cols-* grid.
 A tile whose secondary line is itself markup (a timestamp through
 yksa/ui/_utc.html, say) builds the same three elements inline with the same
 classes, as with .yksa-empty.
+
+It is an ordinary .card. It used to be `border-0 bg-white shadow-sm`, which was a
+raised white panel in a kit whose every other surface is a bordered flat one, and
+`bg-white` is a hard-coded light-theme colour besides -- wrong in a dark theme on
+every service. Depth is not a level of hierarchy this kit has.
 {% endcomment %}
 <div class="col">
-    <div class="card h-100 border-0 bg-white shadow-sm">
+    <div class="card h-100">
         <div class="card-body py-2 px-3{% if accent %} border-start border-{{ accent }} border-3{% endif %}">
             <div class="yksa-label text-truncate">{{ label }}</div>
             <div class="yksa-readout fs-4">{{ value }}</div>

yksa_web/templates/yksa/ui/_state.html

@@ -15,7 +15,7 @@ here. A conditional chain choosing a colour inside a template is the bug this
 partial exists to prevent: it is how the same run status ended up green on one
 page and grey on another.
 {% endcomment %}{% state state as s %}{% spaceless %}
-<span class="yksa-state yksa-state-{{ state|default:'unknown' }}"{% if title %} title="{{ title }}"{% endif %}>
+<span class="yksa-state yksa-state-{{ s.name }}"{% if title %} title="{{ title }}"{% endif %}>
     <i class="bi bi-{{ s.icon }}" aria-hidden="true"></i>
     <span>{{ label|default:s.label }}</span>
 </span>

yksa_web/templatetags/yksa_ui.py

@@ -7,6 +7,12 @@ register = template.Library()
 
 @register.simple_tag
 def state(name):
-    """Resolve a state name to {variant, icon, label} for ui/_state.html."""
-    variant, icon, label = STATES.get(name or "", STATES["unknown"])
-    return {"variant": variant, "icon": icon, "label": label}
+    """Resolve a state name to {name, variant, icon, label} for ui/_state.html.
+
+    `name` is the *resolved* key, not what was asked for: the template builds its
+    `.yksa-state-<name>` class from it, and building that from the raw input meant
+    an unrecognised status got a class no stylesheet defines -- a blank pill, which
+    is the one outcome the fallback exists to prevent."""
+    key = name if name in STATES else "unknown"
+    variant, icon, label = STATES[key]
+    return {"name": key, "variant": variant, "icon": icon, "label": label}