@webority/theme 0.6.5 → 0.6.6

package/package.json

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

@@ -549,6 +549,92 @@ textarea.textarea:focus {
     to   { opacity: 1; transform: translateY(-50%) scale(1); }
 }
 
+// Prefix / suffix addon — a bordered box before/after the input (₹, https://, .com). The
+// WRAPPER owns the border + radius so the affixes and input read as one control; the input
+// itself goes borderless. Focus/hover/error move to the wrapper.
+.input-affixed {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    background: var(--color-surface);
+    transition: border-color 0.12s ease;
+}
+.input-affixed:hover:not(:focus-within) {
+    border-color: var(--color-border-strong);
+}
+.input-affixed:focus-within {
+    border-color: var(--color-primary);
+}
+.input-affixed:has(.input.error) {
+    border-color: var(--color-danger);
+}
+.input-affixed .input {
+    flex: 1;
+    min-width: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+}
+.input-affixed .affix {
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    background: var(--wui-bg-muted);
+    color: var(--color-text-subtle);
+    font-size: 14px;
+    white-space: nowrap;
+}
+.input-affixed .affix-pre {
+    border-right: 1px solid var(--color-border);
+    border-radius: var(--radius) 0 0 var(--radius);
+}
+.input-affixed .affix-suf {
+    border-left: 1px solid var(--color-border);
+    border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+// Floating label — the label starts centred as the placeholder, then slides up and shrinks
+// on focus or when the field is filled. Opt-in (floatingLabel); the input carries a single
+// space as its placeholder so :placeholder-shown drives the "empty" state. Standalone shell.
+.field-float {
+    position: relative;
+    width: 100%;
+}
+.field-float .float-label {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    transform-origin: left center;
+    margin: 0;
+    padding: 0 4px;
+    max-width: calc(100% - 24px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 14px;
+    color: var(--color-text-subtle);
+    background: var(--color-surface);
+    pointer-events: none;
+    transition:
+        top 0.15s var(--wui-ease-ui),
+        transform 0.15s var(--wui-ease-ui),
+        color 0.15s var(--wui-ease-ui);
+}
+.field-float .input:focus ~ .float-label,
+.field-float .input:not(:placeholder-shown) ~ .float-label {
+    top: 0;
+    transform: translateY(-50%) scale(0.86);
+}
+.field-float .input:focus ~ .float-label {
+    color: var(--color-primary);
+}
+.field-float .input.error ~ .float-label {
+    color: var(--color-danger-text);
+}
+
 .hint,
 .field-hint {
     margin-top: 2px;

package/scss/wui/_data.scss

@@ -261,6 +261,7 @@
     gap: 2px;
 }
 .table-ledger .u-name {
+    min-width: 0;
     font-size: 14px;
     font-weight: 500;
     line-height: 19px;
@@ -273,6 +274,28 @@
         margin-bottom: 2px;
     }
 }
+// Clamp a ledger name to one line. OPT-IN — see below for why it is not the default.
+//
+// In a ledger a long name is the normal case: a 112-char project name wrapped to three lines
+// and took its row to 99px against 61px for every other row, breaking the row rhythm down the
+// whole table.
+//
+// `white-space: nowrap` + ellipsis is the WRONG fix and was measured to be: under the
+// ledger's auto table layout a nowrap cell demands its full unwrapped width, which widened a
+// 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.
+.u-name-clamp {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
 // An identity-cell name is often a link, so it inherits Bootstrap's
 // underline-on-hover. The colour shift is the affordance here.
 .table-ledger a.u-name,
@@ -401,6 +424,23 @@
     border-radius: 999px;
 }
 
+// The identity/name column — a STABLE hook, because position is not one.
+//
+// The library owns .lx-select-cell, so a ledger's first cell is the 44px checkbox when
+// selection is on and the name when it is off. `:first-child` therefore changes meaning
+// with a permission flag: a consumer's 360px name-column floor landed on the 44px checkbox
+// for any user who could select rows, inflating that column 8x and pushing the table into
+// horizontal scroll — visible only to users holding that one permission, which is why it
+// survived review. Sizing the right column should not require guessing at position.
+//
+// min-width:0 is the rule rather than a placeholder: a table cell defaults to min-width:auto,
+// which refuses to shrink below its content and is what makes truncation impossible in the
+// first place.
+.table-ledger th.lx-name-cell,
+.table-ledger td.lx-name-cell {
+    min-width: 0;
+}
+
 // Row-selection checkbox column.
 .table-ledger th.lx-select-cell,
 .table-ledger td.lx-select-cell {