@webority/theme 0.77.0 → 0.77.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.77.0",
+  "version": "0.77.2",
   "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/_calendar.scss

@@ -240,6 +240,28 @@ wui-calendar[data-view="week"] .wui-calendar-surface > * {
     --fc-event-text-color: var(--color-info-text-on-soft);
 }
 
+// A month chip keeps the time on its first line and the title under it on up to two lines, so a
+// title reads in a narrow cell; the full text is the chip tooltip and the day's "+N more" list.
+wui-calendar[data-view="month"] .wui-calendar-chip {
+    flex-wrap: wrap;
+    align-items: center;
+    white-space: normal;
+}
+wui-calendar[data-view="month"] .wui-calendar-chip-time {
+    flex: none;
+}
+wui-calendar[data-view="month"] .wui-calendar-chip-title {
+    flex: 1 1 100%;
+    min-width: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    white-space: normal;
+}
+
 // What a page with no script shows until the element's script replaces it.
 .wui-calendar-fallback {
     margin: 0;

package/scss/wui/_data.scss

@@ -485,6 +485,13 @@
     overflow-x: auto;
     scrollbar-width: none;
 }
+// A non-visible overflow-x makes overflow-y compute to auto, which clips the Filters panel to the bar.
+// The phone sheet is position: fixed and escapes the clip, so the phone keeps overflow-x.
+@media (min-width: 576px) {
+    .wui-table-toolbar-filters {
+        overflow: visible;
+    }
+}
 // The search box is full-width on its own; in a toolbar it is one control among several.
 .wui-table-toolbar .search-wrap {
     width: min(320px, 100%);
@@ -546,6 +553,18 @@
 .wui-filter-form > .wui-filter-bar {
     display: contents !important;
 }
+.wui-table-toolbar-filters > .wui-filter-bar,
+.wui-table-toolbar-filters > .wui-filter-form {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+// An inline facet's control already shows its value, so its chip repeats it. On a phone the inline
+// facets fold into the sheet and the chips are then the only visible values, so the hide is desktop only.
+@media (min-width: 576px) {
+    .wui-filter-bar .wui-filter-chip-inline {
+        display: none;
+    }
+}
 // On a phone each facet takes its own line; segments and buttons keep their width.
 @media (max-width: 575.98px) {
     .wui-filter-bar > .field,
@@ -778,6 +797,24 @@
     font-size: 13px;
     user-select: none;
 }
+// A finger needs a 44px target: the pager's controls grow to the control height on a phone.
+@media (max-width: 575.98px) {
+    .select.tpg-select {
+        height: var(--wui-control-height);
+        min-height: var(--wui-control-height);
+    }
+    .tpg-arrow {
+        width: var(--wui-control-height);
+        height: var(--wui-control-height);
+    }
+    .tpg-page {
+        min-width: var(--wui-control-height);
+        height: var(--wui-control-height);
+    }
+    .tpg-ellipsis {
+        height: var(--wui-control-height);
+    }
+}
 
 // ── Standalone pagination (AppPagination) ──
 // Bootstrap's .pagination is already styled; these rules refine it for the common case

package/scss/wui/_media.scss

@@ -431,7 +431,7 @@
     background: var(--color-scrim-strong);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    color: #fff;
+    color: var(--color-on-scrim);
     border-radius: 999px;
     cursor: pointer;
     transition: background 0.2s;
@@ -850,7 +850,7 @@
     border: 2px solid transparent;
     border-radius: 50%;
     background: var(--color-scrim-strong);
-    color: #fff;
+    color: var(--color-on-scrim);
     cursor: pointer;
     opacity: 0;
     transition:
@@ -972,7 +972,7 @@
     gap: clamp(2px, calc(var(--wui-logo-size) * 0.035), 4px);
     padding: 0 6%;
     background: var(--color-scrim-strong);
-    color: #fff;
+    color: var(--color-on-scrim);
     font-size: clamp(9px, calc(var(--wui-logo-size) * 0.1), 11px);
     line-height: 1.15;
     text-align: center;