@webority/theme 0.6.3 → 0.6.5

package/package.json

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

@@ -92,24 +92,86 @@
 }
 
 .btn-danger {
-    // Pin hover/active to the pressed-danger token so Bootstrap cannot auto-shade the fill
-    // off-spec — the same treatment .btn-primary gets above. That is what stops the label
-    // flipping between states: once the fill stops moving, color-contrast() resolves the
-    // same way on every state.
-    //
-    // The label is deliberately NOT pinned to white. --wui-danger (#F8285A) carries white
-    // at 3.86:1 and --wui-danger-active (#E82646) at 4.38:1, both under the 4.5:1 AA floor,
-    // so forcing white is a serious color-contrast violation — axe flags it on BOTH
-    // surfaces. Bootstrap's automatic choice (the dark label, 5.44:1) is the accessible one
-    // and is what has always shipped.
-    //
-    // If white-on-red is wanted — it is the conventional destructive look — the fix is to
-    // darken --wui-danger to about #C81340 (white 5.80:1), which is a brand decision, not a
-    // per-component override.
-    --bs-btn-hover-bg:            var(--wui-danger-active);
-    --bs-btn-hover-border-color:  var(--wui-danger-active);
-    --bs-btn-active-bg:           var(--wui-danger-active);
-    --bs-btn-active-border-color: var(--wui-danger-active);
+    // White-on-red destructive look via the --wui-danger-strong token: white fails AA on the
+    // brighter danger fills (#F8285A → 3.86:1, #E82646 → 4.38:1), so the button uses the
+    // deepened fill (5.80:1) that carries white cleanly. Token-driven so a rebrand tracks it;
+    // the brighter --wui-danger stays for badges/dots that never carry white text.
+    --bs-btn-color:                 #fff;
+    --bs-btn-bg:                    var(--wui-danger-strong);
+    --bs-btn-border-color:          var(--wui-danger-strong);
+    --bs-btn-hover-color:           #fff;
+    --bs-btn-hover-bg:              var(--wui-danger-strong-hover);
+    --bs-btn-hover-border-color:    var(--wui-danger-strong-hover);
+    --bs-btn-active-color:          #fff;
+    --bs-btn-active-bg:             var(--wui-danger-strong-hover);
+    --bs-btn-active-border-color:   var(--wui-danger-strong-hover);
+    --bs-btn-disabled-color:        #fff;
+    --bs-btn-disabled-bg:           var(--wui-danger-strong);
+    --bs-btn-disabled-border-color: var(--wui-danger-strong);
+}
+
+
+// ---- Dropdown menu (AppDropdown / <app-dropdown>) -------------------
+// Bootstrap ships a bare .dropdown-item; the design system gives the menu real
+// padding, an icon–label gap, a rounded hover highlight tinted with the brand,
+// and a danger variant so a row-action menu reads as one considered control.
+.dropdown-menu {
+    --bs-dropdown-min-width:        12rem;
+    --bs-dropdown-padding-x:        0.375rem;
+    --bs-dropdown-padding-y:        0.375rem;
+    --bs-dropdown-item-padding-y:   0.5rem;
+    --bs-dropdown-item-padding-x:   0.625rem;
+    --bs-dropdown-border-color:     var(--wui-border-light);
+    --bs-dropdown-border-radius:    var(--wui-radius-lg);
+    --bs-dropdown-link-color:       var(--wui-text-1);
+    --bs-dropdown-link-hover-color:  var(--wui-primary-pressed);
+    --bs-dropdown-link-hover-bg:     var(--wui-primary-5);
+    --bs-dropdown-link-active-color: var(--wui-primary-pressed);
+    --bs-dropdown-link-active-bg:    var(--wui-primary-10);
+    box-shadow: var(--wui-shadow-overlay);
+}
+
+.dropdown-item {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    border-radius: var(--wui-radius-sm);
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: background-color 0.12s ease, color 0.12s ease;
+
+    // Leading glyph: quiet by default, brand-tinted on hover — a font-size so both
+    // the React <Icon> (a sized <i>) and the Razor <i class="bi"> land the same.
+    .bi, i, svg {
+        flex-shrink: 0;
+        font-size: 1rem;
+        color: var(--wui-text-3);
+        transition: color 0.12s ease;
+    }
+    &:hover .bi, &:hover i, &:hover svg,
+    &:focus .bi, &:focus i, &:focus svg {
+        color: var(--wui-primary);
+    }
+
+    // A leading picture instead of a glyph — an external logo/avatar, a brand mark.
+    // Sized to sit optically with the 1rem glyph so mixed menus still line up.
+    img {
+        flex-shrink: 0;
+        width: 1.125rem;
+        height: 1.125rem;
+        border-radius: var(--wui-radius-sm);
+        object-fit: cover;
+    }
+
+    // Destructive row action — red label, red glyph, red-tinted hover.
+    &.danger {
+        --bs-dropdown-link-color:       var(--wui-danger-text);
+        --bs-dropdown-link-hover-color: var(--wui-danger-text);
+        --bs-dropdown-link-hover-bg:    var(--wui-danger-10);
+        .bi, i, svg { color: var(--wui-danger); }
+        &:hover .bi, &:hover i, &:hover svg,
+        &:focus .bi, &:focus i, &:focus svg { color: var(--wui-danger); }
+    }
 }
 
 

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);
@@ -152,6 +156,11 @@
     --wui-warning-5:      #FEFBF2;
 
     --wui-danger-text:    #b61d42;
+    // Deepened danger fill for surfaces that carry WHITE text (btn-danger). The brighter
+    // --wui-danger/-active below are too light for white (3.86:1 / 4.38:1, under AA); these
+    // clear it — #C81340 → 5.80:1, hover → higher. Keep white-on-danger off the other tokens.
+    --wui-danger-strong:  #C81340;
+    --wui-danger-strong-hover: #AB1036;
     --wui-danger-active:  #E82646;
     --wui-danger:         #F8285A;
     --wui-danger-50:      #FC94AD;

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) {
@@ -284,10 +303,6 @@ textarea.textarea:focus {
     border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
     box-shadow: none;
 }
-.input.is-invalid,
-.input[aria-invalid="true"] {
-    padding-right: 41px;
-}
 .field-error {
     font-size: 12px;
     line-height: normal;
@@ -393,7 +408,7 @@ textarea.textarea:focus {
     pointer-events: none;
 }
 
-// Error state — danger-tinted border + room for a trailing affix.
+// Error state — danger-tinted border, plus a danger glyph at the trailing edge.
 .input.error,
 .input.error:focus,
 .textarea.error,
@@ -402,8 +417,19 @@ textarea.textarea:focus {
     border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-surface));
     box-shadow: none;
 }
-.input.error {
+
+// The trailing error glyph. Scoped with the child combinator to a PLAIN field only:
+// a shell-wrapped input (leading icon / unit / password / trailing action) is nested
+// one level deeper, so it keeps its own right edge and never collides with the glyph.
+// Covers both error paths — the `.error` class and `[aria-invalid]` / `.is-invalid`.
+.field > .input.error,
+.field > .input.is-invalid,
+.field > .input[aria-invalid="true"] {
     padding-right: 41px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8285A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 14px center;
+    background-size: 18px;
 }
 // Dark mode: keep the value in an errored field legible.
 :root[data-theme="dark"] .input.error,
@@ -489,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;
@@ -526,7 +597,7 @@ textarea.textarea:focus {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 6px;
+    gap: 4px;
     margin-bottom: 16px;
 }
 .field > .label,

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;

package/scss/wui/_typography.scss

@@ -117,10 +117,6 @@
     background: color-mix(in srgb, var(--color-text) 8%, transparent);
     color: var(--color-text);
 }
-.chip.is-disabled {
-    opacity: 0.55;
-    pointer-events: none;
-}
 
 /* Tones — tinted surface + on-tint text; icon/remove inherit the tone colour. */
 .chip.primary {
@@ -169,6 +165,28 @@
     color: currentColor;
 }
 
+// Disabled — deliberately NOT opacity, and deliberately after the tones.
+//
+// `opacity: .55` fades the whole chip, which scales the LABEL's contrast down with it:
+// #687088 on #F5F6FA at .55 alpha resolves to 2.08:1, less than half the 4.5:1 AA floor,
+// and axe reports it as a serious violation on both surfaces. Explicit muted tokens read
+// as the same state and stay legible at 4.56:1.
+//
+// It sits after the tone block on purpose. `.chip.is-disabled` and `.chip.primary` have
+// equal specificity, so source order decides — declared before them, a disabled primary
+// chip kept its primary colours. That is very likely why opacity was reached for in the
+// first place: it composes over any tone without having to win the cascade.
+.chip.is-disabled {
+    border-color: var(--color-border);
+    background: var(--color-bg-muted);
+    color: var(--color-text-subtle);
+    pointer-events: none;
+}
+.chip.is-disabled .chip-ic,
+.chip.is-disabled .chip-remove {
+    color: var(--color-text-subtle);
+}
+
 /* ── Autocomplete (input-first combobox; extends .search-select) ── */
 .search-select-ac {
     justify-content: flex-start;