@webority/theme 0.6.7 → 0.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/theme",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "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-components.scss

@@ -34,4 +34,19 @@
 @import "wui/disclosure";
 @import "wui/display";
 @import "wui/flow";
+
+// Flags belong here because <wui-phone> cannot render without them.
+//
+// The 245 `.wui-flag-*` rules live in _flags.scss, and this entry did not pull it in — so a
+// product following the documented chain (variables -> bootstrap -> tokens -> components ->
+// wui-components) got AppPhoneNumberInput with an empty grey box where every flag should be,
+// and nothing failing anywhere to point at the cause. The component shipped; its styling did
+// not. That is the same escape as th.sortable and .u-name, and the fix is the same principle:
+// a component and the CSS it requires travel together.
+//
+// It is not free — roughly 183KB raw, 45KB gzipped, mostly inlined SVG. A product that never
+// renders a phone field can skip it by importing the `wui/*` partials above individually
+// instead of this aggregate; that is the deliberate opt-out, and it is a choice rather than
+// an accident.
+@import "flags";
 @import "wui/shell";

package/scss/wui/_choice.scss

@@ -475,12 +475,17 @@
     gap: 4px;
     margin-bottom: 6px;
 }
+// The seven-column calendar. This is the grid the day cells actually live in.
+//
+// It was a COLUMN FLEX wrapping a `.datepicker-row` that nothing ever emitted: the element
+// writes its day buttons flat into this container. So each day became a full-width flex item
+// — `width: 100%` of 274px, then `aspect-ratio: 1` squared it — giving 274x274 cells and a
+// 9,622px popup. Every date picker in the library, not just the one inside a modal where a
+// tester happened to notice it.
+//
+// It survived because the interaction tests only ever asserted that the popup OPENS. Opening
+// a calendar you cannot click a day in is not opening it.
 .datepicker-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-.datepicker-row {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 4px;

package/scss/wui/_data.scss

@@ -285,10 +285,16 @@
 // 360px column to 854px and pushed the table into horizontal scroll. It trades row height for
 // column geometry. A line clamp leaves the text wrappable, so min-content stays one word.
 //
-// Opt-in rather than default because the library styles `.u-name` but never emits it — it is
-// applied by consumers, and `-webkit-box` stacks element children vertically. A product that
-// composes a name with an inline badge would get the badge under the name. Flip this to the
-// default once the composition is known to be text-only everywhere.
+// DEFAULT inside a ledger, opt-in class elsewhere.
+//
+// It shipped opt-in because `-webkit-box` stacks element children, and the library styles
+// `.u-name` without ever emitting it — so a product composing a name with an inline badge
+// would have got the badge under the name. A consumer then audited all 13 of their usages:
+// every one has a bare text expression as its only child, and the badges and sublines are
+// SIBLINGS inside `.u-meta`, outside `.u-name` entirely. The caution was right to have and
+// does not apply, so the ledger case — where a wrapped name breaks row rhythm down the whole
+// table — gets it without anyone opting in.
+.table-ledger .u-name,
 .u-name-clamp {
     display: -webkit-box;
     -webkit-line-clamp: 1;