@webority/theme 0.6.6 → 0.6.8

package/package.json

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

@@ -189,6 +189,44 @@
     color: var(--color-text-subtle);
 }
 
+// Sizes — mirror AppInput's .input-sm / .input-lg so a select lines up with the
+// text fields beside it. md is the base .search-select-control height.
+.search-select-sm .search-select-control {
+    height: var(--wui-control-height-sm);
+    min-height: var(--wui-control-height-sm);
+    font-size: 13px;
+}
+.search-select-lg .search-select-control {
+    height: var(--wui-control-height-lg);
+    min-height: var(--wui-control-height-lg);
+    font-size: 16px;
+}
+
+// Clear (✕) — sits between the value and the caret, shown only once a value is
+// chosen. It is a <span role="button"> inside the trigger <button> (a nested
+// <button> is invalid); the JS stops its click from toggling the menu.
+.search-select-control > span[data-label] {
+    flex: 1;
+}
+.search-select-reset {
+    flex-shrink: 0;
+    display: grid;
+    place-items: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    font-size: 12px;
+    color: var(--color-text-subtle);
+    cursor: pointer;
+    transition:
+        background 0.12s ease,
+        color 0.12s ease;
+}
+.search-select-reset:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+
 // AppSelectMini — the compact single-purpose picker (page size, a range switch). It shares
 // every behaviour with AppSelect and differs only in metrics.
 //
@@ -265,11 +303,18 @@
 .search-select-clear {
     display: grid;
     place-items: center;
-    width: 24px;
-    height: 24px;
+    width: 26px;
+    height: 26px;
     border: none;
     background: transparent;
     padding: 0;
+    // Sits at the box's 12px right padding; a small negative margin nudges it
+    // closer to the edge so it lines up with the field's own trailing controls.
+    margin-right: -4px;
+    font-size: 20px;
+    // Tight line box: at normal line-height the icon's box is taller than the
+    // button, so bootstrap-icons' baseline offset drifts the glyph low.
+    line-height: 1;
     cursor: pointer;
     color: var(--color-text-subtle);
 }
@@ -288,11 +333,10 @@
 .search-select-options {
     max-height: 300px;
     overflow-y: auto;
-    padding: 4px 4px 4px;
+    padding: 4px;
     display: flex;
     flex-direction: column;
     gap: 4px;
-    scrollbar-gutter: stable;
 }
 .search-select-option {
     display: flex;
@@ -431,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/_controls.scss

@@ -634,6 +634,20 @@ textarea.textarea:focus {
 .field-float .input.error ~ .float-label {
     color: var(--color-danger-text);
 }
+// Floating label for AppSelect — the trigger is a <button>, so there is no
+// :placeholder-shown to key off. :has() raises the label when the control is
+// focused/open, or once a value is chosen (the label span drops
+// .search-select-placeholder the moment something is selected).
+.field-float:has(.search-select-control:focus) .float-label,
+.field-float:has(.search-select-control.open) .float-label,
+.field-float:has([data-label]:not(.search-select-placeholder)) .float-label {
+    top: 0;
+    transform: translateY(-50%) scale(0.86);
+}
+.field-float:has(.search-select-control:focus) .float-label,
+.field-float:has(.search-select-control.open) .float-label {
+    color: var(--color-primary);
+}
 
 .hint,
 .field-hint {
@@ -998,3 +1012,85 @@ wui-select[compact] {
 .fld-section:first-child {
     margin-top: 0;
 }
+
+// ── OTP / code entry (<wui-otp>) ──
+//
+// One real input, transparent, sitting on top of the segment boxes. The input keeps focus,
+// caret, selection, IME and — the reason for the whole design — OS autofill, which delivers
+// an SMS code to the focused field whole. The boxes are presentational and aria-hidden; the
+// input is the single labelled field a screen reader sees.
+//
+// The input must stay REAL: not opacity:0, not visibility:hidden, not off-screen. Any of
+// those stop iOS offering the code, which is the failure this component exists to avoid.
+// Transparent text with a transparent caret is the version that keeps the affordance while
+// letting the segments do the drawing.
+wui-otp {
+    display: block;
+}
+.otp {
+    position: relative;
+    display: inline-flex;
+}
+.otp-field {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: transparent;
+    caret-color: transparent;
+    font-size: 16px; // < 16px makes iOS zoom the page on focus
+    text-align: center;
+    letter-spacing: 0;
+    z-index: 1;
+}
+.otp-field:focus {
+    outline: none;
+}
+.otp-field:disabled {
+    cursor: not-allowed;
+}
+.otp-slots {
+    display: inline-flex;
+    gap: 8px;
+}
+.otp-slot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: var(--wui-control-height);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-surface);
+    font-size: 18px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text);
+    transition:
+        border-color 0.12s,
+        box-shadow 0.12s;
+}
+// The caret cannot be seen through a transparent input, so the ACTIVE box carries the
+// affordance instead — derived from selectionStart, since only one element is ever focused.
+.otp-slot.active {
+    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
+    box-shadow: 0 0 0 3px var(--color-primary-soft);
+}
+.otp-field:disabled ~ .otp-slots .otp-slot {
+    background: var(--color-bg-muted);
+    border-color: var(--color-border);
+    color: var(--color-text-subtle);
+}
+.field-error ~ .otp .otp-slot,
+.otp.error .otp-slot {
+    border-color: var(--color-danger);
+}
+@media (max-width: 575.98px) {
+    // Six 44px boxes plus gaps overflow a 360px screen; shrink the box, never the font.
+    .otp-slot {
+        width: 38px;
+    }
+}

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;