@webority/theme 0.6.1 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.6.1",
+  "version": "0.6.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/_choice.scss

@@ -188,6 +188,30 @@
 .search-select-placeholder {
     color: var(--color-text-subtle);
 }
+
+// AppSelectMini — the compact single-purpose picker (page size, a range switch). It shares
+// every behaviour with AppSelect and differs only in metrics.
+//
+// <wui-select compact> emitted this class and NOTHING styled it, so AppSelectMini rendered
+// byte-identical to a full-size select on both surfaces — the catalogue told people to
+// reach for it when they wanted something compact, and got a 44px control. It was invisible
+// to every gate because the class check only ever scanned the Razor tag helpers, never the
+// elements package that actually emits it.
+//
+// The metrics deliberately match `.select.tpg-select` (the native page-size select in table
+// pagination) so a compact wui select and a compact native select read as one control
+// rather than two sizes of the same idea.
+.search-select-compact .search-select-control {
+    height: 32px;
+    min-height: 32px;
+    min-width: 64px;
+    padding: 0 10px;
+    font-size: 13px;
+    font-weight: 600;
+}
+.search-select-compact .search-select-caret {
+    font-size: 12px;
+}
 // Menu matches the themed-select dropdown: 16px squircle, 4px padding, soft
 // shadow.
 .search-select-menu {

package/scss/wui/_controls.scss

@@ -550,6 +550,39 @@ textarea.textarea:focus {
     min-width: 0;
 }
 // Controls fill their field even though .field aligns children flex-start.
+//
+// The `<wui-*>` entries are load-bearing, not defensive. Every hard interactive control
+// is now `.field > wui-select > .search-select`, so the child combinator below stopped
+// reaching the inner div AND the real flex item — the custom element — was named by no
+// rule at all. With `align-items: flex-start` above, that means it shrinks to its
+// content: a select rendered 164px wide in a 377px column. Neither render parity nor the
+// interaction suite saw it, because BOTH surfaces wrap the same element and are equally
+// wrong, and the fixtures render at full width where nothing has to stretch.
+//
+// `display: block` is here for the same reason and is not redundant with the stretch: a
+// custom element is `display: inline` by default, so outside a flex `.field` — dropped
+// into a plain div, a grid cell, a table cell — it would still collapse. Being a flex
+// item blockifies it; nothing else does.
+wui-select,
+wui-autocomplete,
+wui-multiselect,
+wui-phone,
+wui-datepicker {
+    display: block;
+    width: 100%;
+}
+// AppSelectMini renders <wui-select compact> — a page-size / range picker that is
+// deliberately narrow and does NOT belong to a .field. It has to opt out of the width
+// above, or every toolbar picker stretches across its toolbar.
+wui-select[compact] {
+    display: inline-block;
+    width: auto;
+}
+.field > wui-select,
+.field > wui-autocomplete,
+.field > wui-multiselect,
+.field > wui-phone,
+.field > wui-datepicker,
 .field > .search-select,
 .field > .input-with-unit,
 .field > .input,