@webority/theme 0.82.0 → 0.82.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.82.0",
+  "version": "0.82.1",
   "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/_components.scss

@@ -822,7 +822,9 @@
 // actions, so a plain text-only header stays block.
 .card-header:has(.card-header-actions) {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
+    row-gap: 0.5rem;
 }
 .card-header-actions {
     display: inline-flex;

package/scss/wui/_card.scss

@@ -153,7 +153,10 @@
 // ── Header icon + title stack ──
 // A leading glyph before the title, with the title/subtitle stacked; the group
 // stays left while header actions push right.
+// The 12rem basis decides when a header with actions wraps: below it the actions take their own
+// line, so the titles are never squeezed to a letter per line.
 .card-header-main {
+    flex: 1 1 12rem;
     display: flex;
     align-items: center;
     gap: 10px;

package/scss/wui/_interaction.scss

@@ -50,6 +50,13 @@
     outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: var(--wui-focus-ring-offset);
 }
+// Bootstrap paints a focused button in its hover colours, so an outline or unselected button
+// fills solid and reads as selected. Focus keeps the resting look; the ring marks it.
+.btn:focus-visible:not(:hover, :active, .active, .show, [aria-pressed="true"]) {
+    color: var(--bs-btn-color);
+    background-color: var(--bs-btn-bg);
+    border-color: var(--bs-btn-border-color);
+}
 
 // Bootstrap rings the close button on any :focus, a mouse click included.
 .btn-close {
@@ -250,6 +257,25 @@ html:has(.form-actions-sticky) {
     }
 }
 
+// Small inline controls answer clicks across at least 24px (the WCAG target-size floor) while the
+// ink stays its size. Touch pointers widen the country toggle further, below.
+.infotip-btn,
+.chip-remove,
+.country-toggle {
+    position: relative;
+}
+.infotip-btn::before,
+.chip-remove::before,
+.country-toggle::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: max(100%, 24px);
+    height: max(100%, 24px);
+}
+
 // Phone touch targets
 // Below sm the pointer is a finger: every small control the library draws reaches 44px.
 @media (max-width: 575.98px) {

package/scss/wui/_media.scss

@@ -36,7 +36,9 @@
     border-radius: 999px;
     background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
     color: var(--color-primary-ink);
-    font-size: calc(var(--avatar-size, 32px) * 0.375);
+    // Initials take 37.5% of the disc but never go under the 12px text floor; a disc under 24px
+    // takes half its size instead, the most two letters fit (the 20px preset sets 10px).
+    font-size: max(min(12px, calc(var(--avatar-size, 32px) * 0.5)), calc(var(--avatar-size, 32px) * 0.375));
     font-weight: 600;
     display: inline-flex;
     align-items: center;