@webority/theme 0.8.4 → 0.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "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

@@ -170,9 +170,9 @@
 // sizes step font-size, horizontal padding and radius together (vertical size
 // comes from --wui-control-height, so a button lines up with an input). Weight
 // is 600 on every rung — buttons read as a deliberate action, not body text.
-// Medium (default): 15px / 600, 24px side padding, 22px squircle radius, 45px tall.
+// Medium (default): 15px / 600, 24px side padding, 18px squircle radius, 45px tall.
 .btn {
-    --bs-btn-border-radius: 22px;
+    --bs-btn-border-radius: 18px;
     --bs-btn-font-size: 0.9375rem;
     --bs-btn-font-weight: 600;
     --bs-btn-padding-x: 1.5rem;
@@ -180,10 +180,10 @@
     // keep a plain border-radius arc — not a cross-browser design contract.
     corner-shape: squircle;
 }
-// Small: 14px, 18px side padding, 17px squircle radius (proportional to md), 35px tall.
+// Small: 14px, 18px side padding, 14px squircle radius (proportional to md), 35px tall.
 .btn-sm:not(.btn-icon),
 .btn-group-sm > .btn:not(.btn-icon) {
-    --bs-btn-border-radius: 17px;
+    --bs-btn-border-radius: 14px;
     --bs-btn-font-size: 0.875rem;
     --bs-btn-padding-x: 1.125rem;
     display: inline-flex;
@@ -191,10 +191,10 @@
     justify-content: center;
     min-height: 35px;
 }
-// Large: 17px, 32px side padding, 27px squircle radius (proportional to md), 55px tall — a spacious CTA.
+// Large: 17px, 32px side padding, 22px squircle radius (proportional to md), 55px tall — a spacious CTA.
 .btn-lg:not(.btn-icon),
 .btn-group-lg > .btn:not(.btn-icon) {
-    --bs-btn-border-radius: 27px;
+    --bs-btn-border-radius: 22px;
     --bs-btn-font-size: 1.0625rem;
     --bs-btn-padding-x: 2rem;
     display: inline-flex;

package/scss/_tokens.scss

@@ -195,6 +195,14 @@
     --wui-radius-lg: 14px;
     --wui-radius-xl: 16px;
 
+    // Field (input/select/datepicker/…) radius — a rounder squircle than the
+    // generic radius ladder, matched to the button radius language. md is 18px;
+    // sm/lg step with the control height (36/44/52px → ~0.41 ratio) so every
+    // field size keeps a proportional corner.
+    --wui-field-radius: 18px;
+    --wui-field-radius-sm: 15px;
+    --wui-field-radius-lg: 21px;
+
     // ---- Portal dark palette ----------------------------------------
     // Marketing stays light. Portal flips [data-theme="dark"] and maps
     // --color-* aliases onto these so dark hexes live in theme/, not the app.

package/scss/wui/_choice.scss

@@ -203,11 +203,13 @@
     height: var(--wui-control-height-sm);
     min-height: var(--wui-control-height-sm);
     font-size: 13px;
+    border-radius: var(--wui-field-radius-sm);
 }
 .search-select-lg .search-select-control {
     height: var(--wui-control-height-lg);
     min-height: var(--wui-control-height-lg);
     font-size: 16px;
+    border-radius: var(--wui-field-radius-lg);
 }
 // Multi-select grows with its chips, so a size sets the FLOOR (min-height from the rule
 // above) but never a fixed height — reset height:auto so a second row of chips can appear.

package/scss/wui/_controls.scss

@@ -255,7 +255,8 @@
     width: 100%;
     height: var(--wui-control-height);
     padding: 12px;
-    border-radius: var(--radius);
+    border-radius: var(--wui-field-radius);
+    corner-shape: squircle;
     border: 1px solid var(--color-border);
     background: var(--color-bg-muted);
     font-size: 14px;
@@ -274,12 +275,14 @@
     height: var(--wui-control-height-sm);
     padding: 6px 10px;
     font-size: 13px;
+    border-radius: var(--wui-field-radius-sm);
 }
 .form-control-lg,
 .input-lg {
     height: var(--wui-control-height-lg);
     padding: 14px 16px;
     font-size: 16px;
+    border-radius: var(--wui-field-radius-lg);
 }
 .textarea,
 textarea.form-control {
@@ -420,7 +423,12 @@ textarea.form-control.autosize {
 .field-error {
     font-size: 12px;
     line-height: normal;
+    // Must clear AA against the surface: --color-danger-active (#E82646) is 4.38:1 at this
+    // 12px size, under the 4.5:1 floor the a11y gate enforces.
     color: var(--color-danger-text);
+    // Tighten the space above the message: .field's 4px gap → effective 2px, without
+    // touching the label→control gap.
+    margin-top: -2px;
 }
 
 // Native select with a rounded squircle, custom chevron, off-surface fill.
@@ -675,7 +683,8 @@ textarea.form-control.autosize {
     align-items: stretch;
     width: 100%;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius);
+    border-radius: var(--wui-field-radius);
+    corner-shape: squircle;
     // Soft-filled at rest, white on focus — one shared fill for the whole control so the
     // prefix/suffix and the input body are always the SAME colour combination as the field.
     background: var(--color-bg-muted);
@@ -714,11 +723,11 @@ textarea.form-control.autosize {
 }
 .input-affixed .affix-pre {
     border-right: 1px solid var(--color-border);
-    border-radius: var(--radius) 0 0 var(--radius);
+    border-radius: var(--wui-field-radius) 0 0 var(--wui-field-radius);
 }
 .input-affixed .affix-suf {
     border-left: 1px solid var(--color-border);
-    border-radius: 0 var(--radius) var(--radius) 0;
+    border-radius: 0 var(--wui-field-radius) var(--wui-field-radius) 0;
 }
 
 // Floating label — the label starts centred as the placeholder, then slides up and shrinks
@@ -831,12 +840,14 @@ textarea.form-control.autosize {
     color: var(--color-text-subtle);
 }
 .required {
+    // AA against the surface — see .field-error; --color-danger-active is 4.38:1.
     color: var(--color-danger-text);
     // The gap is CSS, not a significant space in the markup. RequiredMark used to render
     // `{' '}*` while AppDatePicker and every Razor helper rendered a bare `*`, so the same
     // asterisk sat 4px further out in some fields than others — and no check could see it,
-    // because HTML comparison collapses whitespace by design.
-    margin-inline-start: 0.25em;
+    // because HTML comparison collapses whitespace by design. Gap removed — the star sits
+    // flush against the label.
+    margin-inline-start: 0;
 }
 .field {
     display: flex;
@@ -942,7 +953,7 @@ wui-select[compact] {
     display: flex;
     align-items: stretch;
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--wui-field-radius);
     corner-shape: squircle;
     // Soft-filled at rest, white on focus — the numeric input and its unit pill share the
     // one wrapper fill, same colour combination as every other field.

package/scss/wui/_navigation.scss

@@ -182,6 +182,19 @@
         color 0.12s ease,
         border-color 0.12s ease;
 }
+// Leading icon / image — sit before the label with the strip's 8px gap (from .app-tab).
+// The library Icon sizes itself; a custom <img> is constrained to a small rounded square
+// (product logo / avatar). Both never shrink when the label truncates.
+.app-tab-icon {
+    flex-shrink: 0;
+}
+.app-tab-img {
+    flex-shrink: 0;
+    width: 18px;
+    height: 18px;
+    object-fit: cover;
+    border-radius: var(--radius-sm);
+}
 .app-tab:hover:not(:disabled):not(.active) {
     color: var(--color-text);
 }
@@ -296,10 +309,18 @@
     gap: 6px;
     font-size: 13px;
 }
+.app-tabs-sm .app-tab-img {
+    width: 16px;
+    height: 16px;
+}
 .app-tabs-lg .app-tab {
     padding: 14px 18px;
     font-size: 15px;
 }
+.app-tabs-lg .app-tab-img {
+    width: 20px;
+    height: 20px;
+}
 
 // ── Fitted: tabs share the width equally (no scroll). ──
 .app-tabs-fitted .app-tab {

package/scss/wui/_overlays.scss

@@ -395,6 +395,65 @@
     box-shadow: var(--wui-tooltip-shadow);
 }
 
+// ── CSS-only tooltip ──────────────────────────────────────────────────────────────────
+// Any element carrying `data-wui-tip="…"` grows a hover/focus bubble reusing the AppTooltip
+// surface look — no JS, no Popper, instant, and identical on React and Razor by construction.
+// It sits above the element; for a collision-aware / richer tooltip, use AppTooltip /
+// <app-tooltip> instead.
+//
+// Two users, for different reasons:
+//   - `.wui-icon-tip`, the wrapper the `tooltip` prop on AppIcon / <app-icon> puts around a
+//     glyph (it adds the inline-flex layout below).
+//   - <app-tabs> tab buttons, which CANNOT use a Bootstrap tooltip: the button already owns a
+//     `bs.tab` instance and Bootstrap permits only one instance per element, so binding
+//     `bs.Tooltip` to it logs "Bootstrap doesn't allow more than one instance per element"
+//     and the tab instance is never registered.
+[data-wui-tip] {
+    position: relative;
+}
+.wui-icon-tip {
+    display: inline-flex;
+    vertical-align: -0.125em;
+}
+[data-wui-tip]::after {
+    content: attr(data-wui-tip);
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: var(--wui-z-menu, 1080);
+    width: max-content;
+    max-width: 240px;
+    padding: 7px 11px;
+    border-radius: var(--radius, 10px);
+    corner-shape: squircle;
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-border-light);
+    box-shadow: var(--wui-shadow-overlay);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.4;
+    text-align: left;
+    white-space: normal;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+        opacity 0.12s ease,
+        visibility 0.12s;
+}
+[data-wui-tip]:hover::after,
+[data-wui-tip]:focus-visible::after {
+    opacity: 1;
+    visibility: visible;
+}
+@media (prefers-reduced-motion: reduce) {
+    [data-wui-tip]::after {
+        transition: none;
+    }
+}
+
 // Size presets — swap the four size vars. `md` is the :where default (no class).
 .tooltip.wui-tooltip.size-sm {
     --wui-tooltip-max-width: 200px;

package/scss/wui/_utilities.scss

@@ -595,7 +595,7 @@
     border: 1px solid var(--callout-border);
     // A thick coloured left edge — the callout's signature aside marker.
     border-left: 4px solid var(--callout-accent);
-    border-radius: var(--radius-lg);
+    border-radius: 20px;
     corner-shape: squircle;
     background: var(--callout-bg);
     font-size: 14px;
@@ -624,6 +624,14 @@
     --callout-bg: var(--color-danger-10);
 }
 
+// Borderless variant (`bordered={false}` / `bordered="false"`): drop the soft ring AND
+// the thick tone-coloured left edge, keeping only the tint fill. Colours go `transparent`
+// rather than the widths to 0 so the box keeps its 1px / 4px-left footprint — nothing
+// shifts when toggling the border on and off. Mirrors `.alert-borderless`.
+.info-callout-borderless {
+    border-color: transparent;
+}
+
 // The leading glyph is a solid circular badge — tone fill, white glyph centred, with a
 // soft 3px same-colour halo ring. Base is the single-content size (20px badge / 20px
 // glyph); a title+body stack steps it up to 24px. The badge stays VERTICALLY CENTRED
@@ -723,7 +731,9 @@
 // the heading to the variant. Only the heading takes the variant colour — the body
 // stays dark ink so the message reads calmly.
 .alert {
-    --bs-alert-border-radius: var(--wui-radius-lg);
+    --bs-alert-border-radius: 20px;
+    border-radius: 20px;
+    corner-shape: squircle;
     padding: 16px 18px;
     border-width: 1px;
 }