@webority/theme 0.55.0 → 0.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
   "license": "SEE LICENSE IN LICENSE",
   "publishConfig": {

package/scss/wui/_choice.scss

@@ -253,6 +253,17 @@
     background: var(--color-surface);
     border-color: var(--color-focus-border);
 }
+// Keyboard focus draws a ring, not just the 1px border change: a control that only recolours its
+// border fails WCAG 2.4.7 / 2.4.11. A single-select button and a multi-select div hold focus
+// themselves; the typing variants (autocomplete, tag input, allow-custom multi-select) keep it on
+// an inner input, so the ring follows `:has(:focus-visible)`. --color-focus-border is the
+// token documented to clear 3:1 in both themes.
+.search-select-control:focus-visible,
+.search-select-control:has(> .search-select-input:focus-visible),
+.search-select-control:has(.ms-input:focus-visible) {
+    outline: 2px solid var(--color-focus-border);
+    outline-offset: 2px;
+}
 .search-select-caret {
     flex-shrink: 0;
     color: var(--color-text-muted);

package/scss/wui/_display.scss

@@ -778,6 +778,16 @@ a.info-row:hover .info-value {
     color: var(--color-text-muted);
     overflow-wrap: anywhere;
 }
+// The by name as a link: it keeps the muted ink and an underline (a link must not rely on colour
+// alone) and takes the primary ink on hover and keyboard focus, like a linked info row.
+.timeline-by-link {
+    color: inherit;
+    text-decoration: underline;
+}
+.timeline-by-link:hover,
+.timeline-by-link:focus-visible {
+    color: var(--color-primary-ink);
+}
 .timeline-note {
     margin: 6px 0 0;
     padding: 8px 10px;