@webority/theme 0.108.0 → 0.109.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.108.0",
+  "version": "0.109.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": {
@@ -51,7 +51,7 @@
     "country-flag-icons": "^1.6.20",
     "sass-embedded": "^1.97.0",
     "vite": "^8.0.12",
-    "@webority/tokens": "0.108.0"
+    "@webority/tokens": "0.109.0"
   },
   "scripts": {
     "tokens": "node ../tokens/dist/webority.js brand --library --out ../tokens/dist --web scss/_tokens.generated.scss",

package/scss/_bootstrap.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.108.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.109.0 from its token source. Do not edit; run webority brand --library.
 $body-color: #252f4a !default;
 $body-secondary-color: #4b5675 !default;
 $body-tertiary-color: #626a82 !default;

package/scss/_tokens.generated.scss

@@ -1,4 +1,4 @@
-// Generated by @webority/tokens 0.108.0 from its token source. Do not edit; run webority brand --library.
+// Generated by @webority/tokens 0.109.0 from its token source. Do not edit; run webority brand --library.
 
 :root {
     --wui-primary: #4F46E5;

package/scss/_wui-components.scss

@@ -74,6 +74,9 @@
 @import "wui/onboarding-checklist";
 @import "wui/rating";
 @import "wui/score-scale";
+@import "wui/list-card";
+@import "wui/money";
+@import "wui/period-picker";
 @import "wui/relative-time";
 @import "wui/resizable";
 @import "wui/rolling-number";

package/scss/_wui-core.scss

@@ -63,6 +63,9 @@
 @import "wui/onboarding-checklist";
 @import "wui/rating";
 @import "wui/score-scale";
+@import "wui/list-card";
+@import "wui/money";
+@import "wui/period-picker";
 @import "wui/relative-time";
 @import "wui/resizable";
 @import "wui/rolling-number";

package/scss/wui/_comment-thread.scss

@@ -282,6 +282,59 @@ button.wui-reaction:hover,
     }
 }
 
+// An internal note reads apart from what the customer sees: a warning tint and a badge.
+.wui-comment--internal > .wui-comment-row > .wui-comment-main {
+    padding: var(--wui-space-sm) var(--wui-space-md);
+    border: 1px solid var(--color-warning-border);
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-warning-soft);
+}
+.wui-comment-internal-badge {
+    color: var(--color-warning-text-on-soft);
+    background: var(--color-warning-soft);
+    border: 1px solid var(--color-warning-border);
+}
+
+.wui-comment-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wui-space-sm) var(--wui-space-md);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--wui-fs-xs);
+}
+.wui-comment-attachment {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--wui-space-xs);
+}
+.wui-comment-attachment-size {
+    margin-inline-start: var(--wui-space-xs);
+    color: var(--color-text-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+// Conversation: each message a bubble; the viewer's own on the right, as a chat reads.
+.wui-comment-thread--conversation {
+    .wui-comment-row > .wui-comment-main {
+        flex: 0 1 auto;
+        max-width: min(80%, 640px);
+        padding: var(--wui-space-sm) var(--wui-space-md);
+        border-radius: var(--wui-radius-lg);
+        background: var(--color-bg-muted);
+    }
+    .wui-comment--mine > .wui-comment-row {
+        flex-direction: row-reverse;
+    }
+    .wui-comment--mine > .wui-comment-row > .wui-comment-main {
+        background: var(--color-primary-soft);
+    }
+    .wui-comment--internal > .wui-comment-row > .wui-comment-main {
+        background: var(--color-warning-soft);
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .wui-reaction,
     .wui-reaction-add {

package/scss/wui/_display.scss

@@ -262,7 +262,8 @@ a.kpi:focus-visible {
 }
 @include media-breakpoint-up(lg) {
     .kpi-row.kpi-row {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
+        // <app-kpi-row columns> sets the count; 4 when unset.
+        grid-template-columns: repeat(var(--wui-kpi-row-columns, 4), minmax(0, 1fr));
     }
 }
 

package/scss/wui/_list-card.scss

@@ -0,0 +1,14 @@
+// ── List card ──
+// <app-list-card>: the frame of a list page. Its filter row sits between the header and the
+// table with the header's side inset, so filters line up with the title.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-list-card-filters {
+    padding: 0 var(--bs-card-spacer-x) var(--bs-card-spacer-y);
+}
+
+.wui-list-card-count {
+    margin-inline-start: var(--wui-space-xs);
+    vertical-align: middle;
+}

package/scss/wui/_money.scss

@@ -0,0 +1,9 @@
+// ── Money ──
+// <app-money>: an amount in rupees; tabular figures so a column of amounts lines up.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-money {
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}

package/scss/wui/_period-picker.scss

@@ -0,0 +1,24 @@
+// ── Period picker ──
+// <app-period-picker>: the period filter of a report or list page. The month kind is two arrows
+// around a fixed-width label, so the arrows stay put as the month name changes.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-period-picker {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--wui-space-sm);
+}
+
+.wui-period-month {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--wui-space-xs);
+}
+
+.wui-period-month-label {
+    min-width: 6.5em;
+    text-align: center;
+    font-weight: var(--wui-fw-medium);
+    font-variant-numeric: tabular-nums;
+}