@webority/theme 0.8.3 → 0.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.8.3",
+  "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;
@@ -355,16 +355,16 @@
     font-weight: 500;
     transition: background-color 0.12s ease, color 0.12s ease;
 
-    // Leading glyph: quiet by default, brand-tinted on hover — a font-size so both
-    // the React <Icon> (a sized <i>) and the Razor <i class="bi"> land the same.
-    .bi, i, svg {
+    // Leading glyph: quiet by default, brand-tinted on hover. The library's own icons
+    // are .wui-icon SVGs; bare i/svg keeps product-supplied glyph nodes in step.
+    .wui-icon, i, svg {
         flex-shrink: 0;
         font-size: 1rem;
         color: var(--wui-text-3);
         transition: color 0.12s ease;
     }
-    &:hover .bi, &:hover i, &:hover svg,
-    &:focus .bi, &:focus i, &:focus svg {
+    &:hover .wui-icon, &:hover i, &:hover svg,
+    &:focus .wui-icon, &:focus i, &:focus svg {
         color: var(--wui-primary);
     }
 
@@ -383,9 +383,9 @@
         --bs-dropdown-link-color: var(--wui-danger-text);
         --bs-dropdown-link-hover-color: var(--wui-danger-text);
         --bs-dropdown-link-hover-bg: var(--color-danger-soft);
-        .bi, i, svg { color: var(--wui-danger); }
-        &:hover .bi, &:hover i, &:hover svg,
-        &:focus .bi, &:focus i, &:focus svg { color: var(--wui-danger); }
+        .wui-icon, i, svg { color: var(--wui-danger); }
+        &:hover .wui-icon, &:hover i, &:hover svg,
+        &:focus .wui-icon, &:focus i, &:focus svg { color: var(--wui-danger); }
     }
 }
 

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.
@@ -277,9 +279,10 @@
     min-width: 0;
     vertical-align: middle;
 }
-.wui-opt-label > .bi {
+.wui-opt-label > .wui-icon {
     flex-shrink: 0;
-    font-size: 15px;
+    width: 15px;
+    height: 15px;
 }
 
 // AppSelectMini — the compact single-purpose picker (page size, a range switch). It shares
@@ -460,7 +463,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.datepicker-trigger > .bi {
+.datepicker-trigger > .wui-icon {
     flex-shrink: 0;
     color: var(--color-text-subtle);
 }
@@ -795,7 +798,7 @@ button.datepicker-month:hover {
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.daterange-trigger > .bi {
+.daterange-trigger > .wui-icon {
     flex-shrink: 0;
     color: var(--color-text-subtle);
 }
@@ -1179,7 +1182,7 @@ button.datepicker-month:hover {
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.timepicker-trigger > .bi {
+.timepicker-trigger > .wui-icon {
     flex-shrink: 0;
     color: var(--color-text-subtle);
 }

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/_data.scss

@@ -234,10 +234,10 @@
     outline: 2px solid var(--color-primary);
     outline-offset: 2px;
 }
-.wui-expand-toggle .bi {
+.wui-expand-toggle .wui-icon {
     transition: transform 0.18s var(--wui-ease-out-quart, ease);
 }
-.wui-expand-toggle.is-open .bi {
+.wui-expand-toggle.is-open .wui-icon {
     transform: rotate(180deg);
 }
 .table-ledger tr.wui-row-expanded > td {

package/scss/wui/_display.scss

@@ -521,7 +521,7 @@ a.info-row:hover .info-value {
     background: transparent;
 }
 // Icon pop — the selected segment's glyph springs up a touch as it becomes active.
-.segmented-option:has(.segmented-input:checked) .bi {
+.segmented-option:has(.segmented-input:checked) .wui-icon {
     transform: scale(1.14);
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
@@ -561,7 +561,7 @@ a.info-row:hover .info-value {
     // The thumb still jumps to the selected segment — it just does not slide, pop or press.
     .segmented-option,
     .segmented.is-animated .segmented-thumb,
-    .segmented-option:has(.segmented-input:checked) .bi {
+    .segmented-option:has(.segmented-input:checked) .wui-icon {
         transition: none;
     }
 }

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/_typography.scss

@@ -76,7 +76,7 @@
 // Bootstrap Icons carry a -.125em baseline nudge meant for inline-with-text use;
 // inside the chip's flex row it just drops the glyph below the label's centre.
 // Reset it so a library-icon leading glyph lines up with the label.
-.chip-ic .bi::before {
+.chip-ic .wui-icon {
     vertical-align: middle;
 }
 .chip-avatar {

package/scss/wui/_utilities.scss

@@ -6,6 +6,14 @@
 // partials are a split of one stylesheet, not independent modules, so a rule
 // here may be overridden by a later partial. Never reorder the imports.
 
+// ── Icon base ──
+// Every library glyph (React <Icon>, Razor <app-icon>, wui-element internals) is an
+// inline SVG carrying this class; size comes from its width/height attributes.
+.wui-icon {
+    display: inline-block;
+    flex-shrink: 0;
+}
+
 // ── Grid / layout utils ──
 // Responsive card grids (Bootstrap has no grid-template utility).
 .wui-grid {
@@ -587,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;
@@ -616,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
@@ -633,7 +649,7 @@
     // 4px translucent ring in the badge's own colour — the "outer shadow".
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--callout-accent) 20%, transparent);
 
-    .bi {
+    .wui-icon {
         line-height: 1;
     }
 }
@@ -715,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;
 }
@@ -786,7 +804,7 @@
     // 4px translucent ring in the badge's own colour — the "outer shadow".
     box-shadow: 0 0 0 4px color-mix(in srgb, var(--alert-accent) 20%, transparent);
 
-    .bi {
+    .wui-icon {
         line-height: 1;
     }
 }