@webority/theme 0.6.4 → 0.6.5

package/package.json

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

@@ -70,6 +70,10 @@
     // rows, so they must line up — they were 46.8px and 45px, which reads as a
     // misalignment on every filter bar. 44px is also the WCAG touch-target floor.
     --wui-control-height: 44px;
+    // Optional size steps (sm/lg) for dense toolbars / marketing-scale fields. md is the
+    // default above; a control opts into a step with .input-sm / .input-lg.
+    --wui-control-height-sm: 36px;
+    --wui-control-height-lg: 52px;
 
     // Scrollbar thumb — one quiet grey-blue at three interaction strengths.
     --wui-scrollbar:        rgba(145, 158, 171, 0.45);

package/scss/wui/_controls.scss

@@ -193,6 +193,18 @@
         box-shadow 0.12s;
     font-family: inherit;
 }
+// Size steps — sm/lg opt out of the shared 44px control height for dense toolbars or
+// marketing-scale fields. md is the base rule above; AppInput adds .input-sm / .input-lg.
+.input-sm {
+    height: var(--wui-control-height-sm);
+    padding: 6px 10px;
+    font-size: 13px;
+}
+.input-lg {
+    height: var(--wui-control-height-lg);
+    padding: 14px 16px;
+    font-size: 16px;
+}
 .textarea {
     height: auto;
     min-height: 120px;
@@ -200,6 +212,13 @@
     line-height: 1.5;
     resize: vertical;
 }
+// Auto-grow — JS drives the height to fit the content (Razor: data-app-autosize wired in
+// webority-ui.js; React: the autoGrow prop). The manual grabber and the scrollbar are off
+// so they can't fight the measured height.
+.textarea.autosize {
+    resize: none;
+    overflow: hidden;
+}
 .input:hover:not(:focus):not(:disabled),
 .select:hover:not(:focus):not(:disabled),
 .textarea:hover:not(:focus):not(:disabled) {
@@ -496,12 +515,57 @@ textarea.textarea:focus {
     background: transparent;
 }
 
+// Clearable ✕ — a trailing reset button, placed inside .input-wrap / .input-icon. It only
+// renders while the field has a value; .has-clear reserves the room so text never sits under it.
+.input.has-clear {
+    padding-right: 40px;
+}
+.input-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--color-text-subtle);
+    cursor: pointer;
+    transition:
+        color 0.12s ease,
+        background 0.12s ease;
+    animation: wui-clear-in 0.12s var(--wui-ease-ui);
+}
+.input-clear:hover {
+    color: var(--color-text);
+    background: var(--wui-bg-muted);
+}
+@keyframes wui-clear-in {
+    from { opacity: 0; transform: translateY(-50%) scale(0.72); }
+    to   { opacity: 1; transform: translateY(-50%) scale(1); }
+}
+
 .hint,
 .field-hint {
     margin-top: 2px;
     font-size: 12px;
     color: var(--color-text-subtle);
 }
+// Character counter — a right-aligned count under the field; turns danger at the limit.
+.field-count {
+    margin-top: 2px;
+    font-size: 12px;
+    line-height: normal;
+    text-align: right;
+    color: var(--color-text-subtle);
+}
+.field-count.at-limit {
+    color: var(--color-danger-text);
+}
 .label {
     display: block;
     font-size: 14px;

package/scss/wui/_data.scss

@@ -572,17 +572,30 @@
 // Table extras — a sortable header and numeric cells. These sit AFTER the
 // .table-ledger rules above on purpose: they are opt-in additions on top of
 // whichever table variant is in use, not part of the base a variant overrides.
+// NEVER give a <th> a display that is not a table display.
+//
+// This carried `display: flex`, which takes the cell OUT of the table's layout entirely: it
+// stops being a column, so every sortable header left the header row and stacked at its own
+// y-position. Measured on a consumer's page, a sortable table's headers sat at three
+// different y-values against the neighbouring non-sortable table's one, and the header box
+// grew from 42px to 126px. It shipped in 0.6.4.
+//
+// Nothing else was wrong — background, colour, padding, borders, font, tracking, radii all
+// resolved correctly. One declaration disintegrated the row, and only for tables that
+// actually have a sortable column, which is why half a product's screens looked fine.
+//
+// The alignment it was buying is done on the icon instead, which is an inline box inside a
+// normal cell and cannot disturb the table.
 .table th.sortable {
-    display: flex;
-    align-items: center;
-    gap: 6px;
     cursor: pointer;
     user-select: none;
 }
 .table th.sortable .sort-icon {
     // Reserved space so the header does not jump width when the arrow appears.
+    display: inline-block;
+    vertical-align: middle;
     width: 12px;
-    flex: none;
+    margin-left: 6px;
     color: var(--color-text-subtle);
     opacity: 0;
     transition: opacity 0.12s ease;