@webority/theme 0.8.3 → 0.8.4

package/package.json

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

@@ -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/wui/_choice.scss

@@ -277,9 +277,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 +461,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 }
-.datepicker-trigger > .bi {
+.datepicker-trigger > .wui-icon {
     flex-shrink: 0;
     color: var(--color-text-subtle);
 }
@@ -795,7 +796,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 +1180,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/_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/_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 {
@@ -633,7 +641,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;
     }
 }
@@ -786,7 +794,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;
     }
 }