@webority/theme 0.93.0 → 0.94.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.93.0",
+  "version": "0.94.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/_controls.scss

@@ -1172,6 +1172,22 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
     // default muted mask, matching its muted resting fill, even while it holds focus).
     background: var(--color-surface);
 }
+// Above placement for AppSelect: the same triggers, resting above the box as the input's does.
+.field-float.wui-float-above:has(.search-select-control:focus) .float-label,
+.field-float.wui-float-above:has(.search-select-control.open) .float-label,
+.field-float.wui-float-above:has([data-label]:not(.search-select-placeholder)) .float-label {
+    top: 0;
+    left: 0;
+    padding: 0;
+    transform: scale(0.86);
+    font-weight: var(--wui-fw-medium);
+}
+.field-float.wui-float-above:has([data-label]:not(.search-select-placeholder)):not(:has(.search-select-control.open)) .float-label {
+    color: var(--color-text);
+}
+.field-float.wui-float-above:has(.search-select-control.open) .float-label {
+    background: transparent;
+}
 
 .hint,
 .field-hint {

package/scss/wui/_display.scss

@@ -146,34 +146,6 @@
     background: var(--color-warning-soft);
 }
 
-// Compact size — dense dashboards and tight cards. Shrinks the value + chrome.
-.kpi.kpi-sm {
-    padding: 12px 14px;
-    --wui-kpi-value-size: 22px;
-}
-.kpi.kpi-sm .kpi-label {
-    font-size: 12px;
-}
-.kpi.kpi-sm .kpi-icon {
-    width: 32px;
-    height: 32px;
-    margin-bottom: 8px;
-}
-
-// Hero size — the single headline stat above a dashboard. Enlarges the value and its
-// chrome; orthogonal to variant/inline/attention, so it composes with all of them.
-.kpi.kpi-lg {
-    padding: 20px;
-    --wui-kpi-value-size: 28px;
-}
-.kpi.kpi-lg .kpi-label {
-    font-size: 14px;
-}
-.kpi.kpi-lg .kpi-icon {
-    width: 44px;
-    height: 44px;
-}
-
 // Spotlight — an editorial feature tile: the label sits top-left with the icon chip pinned
 // top-right, the value is set large in the product's own font, and an optional caption reads
 // under the number. For the single showcase stat on a marketing/portal surface where the
@@ -222,6 +194,34 @@
     line-height: 1;
     font-weight: 600;
 }
+// Compact size — dense dashboards and tight cards. Shrinks the value + chrome.
+.kpi.kpi-sm {
+    padding: 12px 14px;
+    --wui-kpi-value-size: 22px;
+}
+.kpi.kpi-sm .kpi-label {
+    font-size: 12px;
+}
+.kpi.kpi-sm .kpi-icon {
+    width: 32px;
+    height: 32px;
+    margin-bottom: 8px;
+}
+
+// Hero size — the single headline stat above a dashboard. Enlarges the value and its
+// chrome; orthogonal to variant/inline/attention, so it composes with all of them.
+.kpi.kpi-lg {
+    padding: 20px;
+    --wui-kpi-value-size: 28px;
+}
+.kpi.kpi-lg .kpi-label {
+    font-size: 14px;
+}
+.kpi.kpi-lg .kpi-icon {
+    width: 44px;
+    height: 44px;
+}
+
 // Caption — the sub-line under the value ("Total sent"). Spotlight-only today, but the class
 // is variant-agnostic so a plain tile can carry one too.
 .kpi-caption {

package/scss/wui/_overlays.scss

@@ -408,6 +408,12 @@
     letter-spacing: -0.01em;
     color: var(--color-text);
 }
+// The dialog moves focus to the title so a screen reader reads it on open, and a render
+// focuses it with no pointer involved, so the browser paints its default ring. A heading is
+// not a control: drop the ring, keep the focus.
+.wui-confirm-title:focus-visible {
+    outline: none;
+}
 .wui-confirm-msg {
     margin: 0;
     font-size: 15px;

package/scss/wui/_sections.scss

@@ -54,6 +54,34 @@
     letter-spacing: 0.04em;
     text-transform: uppercase;
 }
+.wui-section-eyebrow-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--wui-space-xxs) var(--wui-space-sm);
+    border: 1px solid transparent;
+    border-radius: var(--wui-radius-pill);
+}
+.wui-section-eyebrow-neutral {
+    background: color-mix(in srgb, var(--color-text-subtle) 16%, transparent);
+    color: var(--color-text-muted);
+    border-color: transparent;
+}
+.wui-section-eyebrow-primary {
+    @include wui-tone-pill-colors(primary, var(--color-primary-ink));
+    border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
+}
+.wui-section-eyebrow-success {
+    @include wui-tone-pill-colors(success);
+}
+.wui-section-eyebrow-warning {
+    @include wui-tone-pill-colors(warning);
+}
+.wui-section-eyebrow-danger {
+    @include wui-tone-pill-colors(danger);
+}
+.wui-section-eyebrow-info {
+    @include wui-tone-pill-colors(info);
+}
 .wui-section-title {
     margin: 0;
     color: var(--color-text);

package/scss/wui/_shortcuts.scss

@@ -93,6 +93,14 @@
 .wui-shortcut-sheet[hidden] {
     display: none;
 }
+.wui-shortcut-sheet.wui-shortcut-sheet-below {
+    top: calc(100% + 8px);
+    bottom: auto;
+}
+.wui-shortcut-sheet.wui-shortcut-sheet-start {
+    left: 0;
+    right: auto;
+}
 .wui-shortcut-sheet-head {
     display: flex;
     align-items: center;