@webority/theme 0.7.0 → 0.7.2

package/package.json

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

@@ -49,8 +49,11 @@
 // ---- Display heading -------------------------------------------------
 // Bootstrap's .display-1..6 ladder skews bigger than our locked design.
 // .h-display drops in where the marketing hero needs the locked
-// font-weight 500 + tight letter-spacing.
+// font-weight 500 + tight letter-spacing. font-family reads --wui-font-display
+// so a product can swap in a serif/brand display face by overriding just that
+// token (default: the same body stack .font-display already uses).
 .h-display {
+    font-family: var(--wui-font-display, var(--bs-body-font-family));
     font-weight: 500;
     letter-spacing: -0.03em;
     line-height: 1.05;
@@ -89,6 +92,14 @@
     --bs-btn-hover-border-color:  var(--wui-primary-pressed);
     --bs-btn-active-bg:           var(--wui-primary-pressed);
     --bs-btn-active-border-color: var(--wui-primary-pressed);
+    // Bootstrap computes this label colour at SCSS compile time from the library's
+    // default $primary, so it can never react to a product overriding --wui-primary as a
+    // runtime CSS var. Routing it through the token makes a light-primary brand's
+    // --wui-primary-text override reach the button.
+    --bs-btn-color:               var(--wui-primary-text);
+    --bs-btn-hover-color:         var(--wui-primary-text);
+    --bs-btn-active-color:        var(--wui-primary-text);
+    --bs-btn-disabled-color:      var(--wui-primary-text);
 }
 
 .btn-danger {
@@ -110,6 +121,24 @@
     --bs-btn-disabled-border-color: var(--wui-danger-strong);
 }
 
+// Themed disabled state (fleet default). Bootstrap's own disabled look is just the
+// variant's colour at --bs-btn-disabled-opacity (.65) — barely different from the active
+// button on a tinted brand palette. Give the ordinary case a real desaturated/muted look
+// instead, reusing the same tokens .input:disabled already uses so a disabled button and
+// a disabled field read as the same state.
+//
+// Excludes .btn-primary and .btn-danger, which already theme their OWN disabled state
+// above (a faded version of their own fill, driven by --bs-btn-disabled-*) — :not() keeps
+// this rule from fighting theirs rather than relying on source order.
+.btn:disabled:not(.btn-primary):not(.btn-danger),
+.btn.disabled:not(.btn-primary):not(.btn-danger) {
+    background-color: var(--color-bg-muted);
+    border-color: var(--color-border);
+    color: var(--color-text-subtle);
+    opacity: 1;
+    cursor: not-allowed;
+}
+
 
 // ---- Component radii from tokens ------------------------------------
 // .btn/.card/.input capture Bootstrap's compiled $*-border-radius (the library
@@ -265,6 +294,30 @@
 }
 
 
+// ---- Ghost button (transparent, brand-tinted hover) ------------------
+// A real ghost button: transparent at rest (no fill, no border), current text colour;
+// only the background lights up — a soft brand tint, the same recipe as a
+// .dropdown-item's hover — on hover/active. AppButton's `ghost` variant emits this class
+// on both surfaces; distinct from Bootstrap's .btn-link, which reads as a hyperlink
+// (underlined, link-coloured text) rather than a quiet button. Marketing anchors reach
+// for it directly for the same look on a plain <a>.
+//
+// No .btn-ghost-sm/-lg rungs: unlike .btn-pill (a bespoke marketing sizing system), this
+// is an ordinary .btn variant, so it sizes the same way .btn-primary/.btn-danger do —
+// Bootstrap's own .btn-sm/.btn-lg.
+.btn-ghost {
+    --bs-btn-color:               var(--color-text);
+    --bs-btn-bg:                  transparent;
+    --bs-btn-border-color:        transparent;
+    --bs-btn-hover-color:         var(--color-text);
+    --bs-btn-hover-bg:            var(--wui-primary-5);
+    --bs-btn-hover-border-color:  transparent;
+    --bs-btn-active-color:        var(--color-text);
+    --bs-btn-active-bg:           var(--wui-primary-10);
+    --bs-btn-active-border-color: transparent;
+}
+
+
 // ---- Card "lifted" (shadowless) -------------------------------------
 // Previously a soft drop-shadow card; now flat. The `.card-lifted`
 // class is preserved so existing call sites don't break — it now

package/scss/_tokens.scss

@@ -119,6 +119,15 @@
     --wui-container-max: 1512px;
     --wui-container-pad: 24px;
 
+    // ---- Primary "on-fill" text --------------------------------------
+    // Unlike the semantic -text tokens below (a legible STANDALONE colour derived
+    // from a fill, for using the status colour AS body text), this is the text/icon
+    // colour to use ON TOP OF a solid --wui-primary fill — a selected datepicker day,
+    // an active pagination page, a checked segmented option, .btn-primary's label.
+    // Default assumes primary is dark enough for white; a brand with a light primary
+    // overrides this to a dark value instead.
+    --wui-primary-text: #fff;
+
     // ---- Semantic status ramps -------------------------------------
     // Canonical info/success/warning/danger scales: `active` (text/icon on
     // light), the base `100` (vivid fills/dots), then tints 50/30/20/10/5.
@@ -189,6 +198,38 @@
     --wui-dark-text-subtle:  #8a90a0;
     --wui-dark-primary:      #6B83EC;
     --wui-dark-primary-hover:#93A6F2;
+
+    // ---- Fluid type scale --------------------------------------------
+    // clamp(min, preferred, max) so type scales smoothly between viewports instead of
+    // stepping at Bootstrap's breakpoints. `base` sits close to Bootstrap's own 1rem body
+    // size; every other step is derived at a consistent ratio, up and down. Additive only —
+    // nothing in the shared theme consumes these yet, a product opts in per element.
+    --wui-fs-xs:   clamp(0.75rem,  0.73rem + 0.1vw,  0.8125rem);
+    --wui-fs-sm:   clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
+    --wui-fs-base: clamp(0.95rem,  0.9rem + 0.25vw,  1.05rem);
+    --wui-fs-lg:   clamp(1.05rem,  0.98rem + 0.35vw, 1.25rem);
+    --wui-fs-xl:   clamp(1.25rem,  1.15rem + 0.5vw,  1.5rem);
+    --wui-fs-2xl:  clamp(1.5rem,   1.3rem + 1vw,     2rem);
+    --wui-fs-3xl:  clamp(1.875rem, 1.5rem + 1.75vw,  2.75rem);
+
+    // ---- Display font slot --------------------------------------------
+    // A dedicated slot for a display/heading typeface, kept separate from
+    // $font-family-base so a product can point ONLY its display headings (.h-display) at a
+    // serif or another brand face by overriding this one token, without touching body copy.
+    // Defaults to the same stack .font-display already uses.
+    --wui-font-display: var(--bs-body-font-family);
+
+    // ---- Z-index scale -------------------------------------------------
+    // Bootstrap's own ladder ($zindex-dropdown etc.), exposed as CSS vars so a component
+    // or a consuming product can layer against the same scale instead of inventing values.
+    --wui-z-dropdown:       1000;
+    --wui-z-sticky:         1020;
+    --wui-z-fixed:          1030;
+    --wui-z-modal-backdrop: 1040;
+    --wui-z-modal:          1050;
+    --wui-z-popover:        1060;
+    --wui-z-tooltip:        1070;
+    --wui-z-toast:          1080;
 }
 
 // Bootstrap md / xl (not invented px)

package/scss/_wui-aliases.scss

@@ -36,6 +36,9 @@
   --color-primary:       var(--wui-primary);
   --color-primary-hover: var(--wui-primary-pressed);
   --color-primary-soft:  var(--wui-primary-10);
+  // Text/icon colour for content sitting ON a solid --color-primary fill — see
+  // --wui-primary-text for why this is a different axis from the -text tokens below.
+  --color-primary-text:  var(--wui-primary-text);
 
   // Semantic status ramps
   --color-info-active:    var(--wui-info-active);

package/scss/_wui-components.scss

@@ -34,6 +34,7 @@
 @import "wui/disclosure";
 @import "wui/display";
 @import "wui/flow";
+@import "wui/scrollbar";
 
 // Flags belong here because <wui-phone> cannot render without them.
 //

package/scss/wui/_card.scss

@@ -11,6 +11,7 @@
 // pattern nearly every panel header uses, so it belongs here rather than being
 // re-flexed with utilities on each one.
 .card-header {
+    --bs-card-cap-bg: var(--color-surface);
     display: flex;
     align-items: center;
     justify-content: space-between;

package/scss/wui/_choice.scss

@@ -415,6 +415,11 @@
     color: var(--color-primary);
     font-weight: 500;
 }
+// allow-custom's freeform row — reads as an action ("Add "…"") rather than a listed value.
+.search-select-option-custom {
+    font-style: italic;
+    color: var(--color-primary);
+}
 .search-select-empty {
     padding: 12px 10px;
     font-size: 13px;
@@ -627,7 +632,7 @@ button.datepicker-month:hover {
 }
 .datepicker-day.is-selected {
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .datepicker-day:disabled {
@@ -696,7 +701,7 @@ button.datepicker-month:hover {
 }
 .datepicker-cell.is-selected {
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .datepicker-cell:disabled {
@@ -842,7 +847,7 @@ button.datepicker-month:hover {
 .datepicker-day.is-range-start,
 .datepicker-day.is-range-end {
     background: var(--color-primary);
-    color: #fff;
+    color: var(--color-primary-text);
     font-weight: 600;
 }
 .daterange-hint {

package/scss/wui/_controls.scss

@@ -348,9 +348,12 @@
     resize: none;
     overflow: hidden;
 }
-.input:hover:not(:focus):not(:disabled),
-.select:hover:not(:focus):not(:disabled),
-.textarea:hover:not(:focus):not(:disabled) {
+// The `.error` / `.is-invalid` / `[aria-invalid="true"]` guards keep an invalid field's
+// danger border visible on hover — without them the hover rule repaints it grey and the
+// error signal disappears the moment the cursor passes over the field.
+.input:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
+.select:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error),
+.textarea:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(.is-invalid):not(.error) {
     background-color: var(--color-bg-muted);
     border-color: var(--color-border-strong);
 }
@@ -889,9 +892,19 @@ wui-select[compact] {
 .field > .input-with-unit,
 .field > .input,
 .field > .datepicker,
+.field > .file-input,
+.field > .file-preview,
 .field > .field-error {
     align-self: stretch;
 }
+// A file picker fills its column by default (align-self:stretch fills the field on the cross
+// axis, but the field itself collapses to its content when it is a flex item — the showcase
+// lays fields out in a flex row — so stretch the field to its container first). Override per
+// use with a .file-w-* class or the --wui-file-width variable.
+.field:has(> .file-input),
+.field:has(> .file-preview) {
+    width: var(--wui-file-width, 100%);
+}
 // Doubled selectors — see the lg-tier block below: a media query carries no
 // extra specificity, so a consumer's later single-class rule would win.
 @media (max-width: 575.98px) {

package/scss/wui/_data.scss

@@ -407,6 +407,46 @@
     cursor: not-allowed;
 }
 
+// Numbered mode (mode="numbered") — windowed page buttons sitting between the prev/next
+// arrows in .tpg-nav, same 32px circular hit target as .tpg-arrow.
+.tpg-page {
+    display: grid;
+    place-items: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px;
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    border-radius: 50%;
+    font-size: 13px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+        background 0.14s ease,
+        color 0.14s ease;
+}
+.tpg-page:hover:not(.is-active) {
+    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    color: var(--color-primary);
+}
+.tpg-page.is-active {
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+    cursor: default;
+}
+.tpg-ellipsis {
+    display: grid;
+    place-items: center;
+    min-width: 24px;
+    height: 32px;
+    color: var(--color-text-subtle);
+    font-size: 13px;
+    user-select: none;
+}
+
 // Horizontal scroll guard + flush-fit inside a card. Wrapping the table here
 // also stops `.card > .table` header-corner rounding from applying mid-card.
 .table-wrap {

package/scss/wui/_display.scss

@@ -31,7 +31,9 @@
 .kpi-label {
     font-size: 13px;
     font-weight: 500;
-    color: var(--color-text-subtle);
+    // --color-text-muted (not -subtle): -subtle is ~4.5:1 on white and dips below AA on the
+    // filled/accent variant's tinted surface. -muted clears AA on every kpi variant.
+    color: var(--color-text-muted);
 }
 .kpi-value {
     margin-top: 6px;
@@ -76,6 +78,18 @@
     margin-top: 2px;
 }
 
+// Surface variants — plain (above) is the bordered card; these swap the fill and drop the
+// border so a dashboard can mix a KPI strip with the surrounding card without every tile
+// drawing its own outline.
+.kpi.kpi-filled {
+    border-color: transparent;
+    background: var(--color-bg-subtle);
+}
+.kpi.kpi-accent {
+    border-color: transparent;
+    background: var(--color-primary-soft);
+}
+
 // A row of tiles. Wraps rather than scrolls — a KPI strip that scrolls hides numbers.
 .kpi-row {
     display: grid;
@@ -213,11 +227,34 @@ a.info-row:hover .info-value {
 .segmented-option:hover {
     color: var(--color-text);
 }
+// A per-option sub-label under the main text — optional, so a segment without one keeps the
+// plain single-line layout above untouched.
+.segmented-option-text {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+    line-height: 1.2;
+}
+.segmented-option-label {
+    font: inherit;
+    color: inherit;
+}
+.segmented-option-note {
+    font-size: 10px;
+    font-weight: 400;
+    // Inherits the option's current text colour (muted, hover, or white-on-checked) rather
+    // than a fixed token, so it always matches without a separate state per variant. No opacity
+    // muting — that dropped the sub-label below AA on an unchecked option; the 10px size already
+    // distinguishes it from the label.
+    color: currentColor;
+}
 .segmented-option:has(.segmented-input:checked) {
     background: var(--color-primary);
-    // Fixed white, not a token: the pill is always the brand fill, so its label
-    // must contrast with that fill and not with the page.
-    color: #fff;
+    // Token, not fixed white: the pill is always the brand fill, so its label must
+    // contrast with THAT fill, not the page — a light-primary brand overrides
+    // --wui-primary-text to a dark value and this follows automatically.
+    color: var(--color-primary-text);
 }
 // The ring is drawn on the label because the input it belongs to has no box.
 .segmented-option:has(.segmented-input:focus-visible) {

package/scss/wui/_media.scss

@@ -183,9 +183,78 @@
     stroke: #fff;
     stroke-width: 2px;
 }
+// Compact attached items — used for every file in `multiple` mode and for a single
+// non-image attachment (a big letterboxed preview only makes sense for one image).
+.attach-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.attach-list:not(:first-child) {
+    margin-top: 8px;
+}
+.attach-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 12px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    min-width: 0;
+}
+.attach-item-media {
+    flex: 0 0 auto;
+    width: 40px;
+    height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--color-bg-muted);
+    color: var(--color-primary);
+}
+.attach-item-media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+.attach-item-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1;
+    min-width: 0;
+}
+.attach-item-remove {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border: 1px solid var(--color-border);
+    border-radius: 999px;
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition:
+        border-color 0.2s,
+        color 0.2s,
+        background 0.2s;
+}
+.attach-item-remove:hover {
+    border-color: var(--color-danger);
+    color: var(--color-danger);
+    background: var(--color-danger-soft);
+}
+
 @media (prefers-reduced-motion: reduce) {
     .attach-drop,
-    .attach-remove {
+    .attach-remove,
+    .attach-item-remove {
         transition: none;
     }
 }
@@ -246,7 +315,11 @@
     align-items: center;
     justify-content: center;
     gap: 10px;
-    height: 350px;
+    height: 200px;
+    // Fills its column — a full-width drop target. The .field:has() rule below makes the field
+    // itself stretch first (the showcase lays fields out in a flex row, where a field otherwise
+    // collapses to its content), then align-self:stretch fills the field.
+    width: 100%;
     padding: 20px;
     text-align: center;
     background: var(--color-bg-subtle);
@@ -255,10 +328,79 @@
         border-color 0.15s ease,
         background-color 0.15s ease;
 }
+// Hover, focus and drag-over all take the same soft primary-30% border AppInput shows on
+// focus — a clear hue shift from the resting grey dashed border, without the loud full
+// --color-primary the dropzone used before.
 .file-input.file-input-tall:hover,
+.file-input.file-input-tall:focus-within,
+.file-input.file-input-tall:active,
 .file-input.file-input-tall.dragging {
-    border-color: var(--color-primary);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
     background: var(--color-bg-muted);
+    box-shadow: none;
+}
+// A rejected file (wrong type / too large) turns the dropzone border danger to match the
+// inline reason shown below it.
+.file-input.file-input-tall.error {
+    border-color: color-mix(in srgb, var(--color-danger) 55%, var(--color-surface));
+}
+// Multiple mode with files: the box grows to hold the picked-file list INSIDE it, below a
+// compact upload prompt — not a separate list beneath the box. The prompt drops from the
+// absolute-fill centred stack to a static compact row at the top; the list scrolls within.
+.file-input.file-input-tall.has-files {
+    height: auto;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 14px;
+    cursor: default;
+}
+.file-input.file-input-tall.has-files > .file-input-zone-label {
+    position: static;
+    inset: auto;
+    flex-direction: row;
+    gap: 10px;
+    padding: 4px;
+    cursor: pointer;
+}
+.file-input.file-input-tall.has-files .file-input-icon {
+    width: 40px;
+    height: 40px;
+}
+.file-input.file-input-tall.has-files .file-input-text {
+    display: none;
+}
+.file-input.file-input-tall.has-files .attach-list {
+    width: 100%;
+    max-height: 240px;
+    overflow-y: auto;
+    // The dropzone sets text-align:center for the centred prompt; the file rows must not
+    // inherit it — name and size read left-aligned next to the thumbnail.
+    text-align: left;
+}
+// While managing files, keep the border calm on hover/focus (it is no longer just a
+// "click to upload" affordance); still highlight when a file is actually dragged over.
+.file-input.file-input-tall.has-files:hover,
+.file-input.file-input-tall.has-files:focus-within {
+    border-color: var(--color-border-strong);
+    background: var(--color-bg-subtle);
+}
+.file-input.file-input-tall.has-files.dragging {
+    border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    background: var(--color-bg-muted);
+}
+// Width presets — put a .file-w-* class on the field (React className / Razor class) to cap the
+// dropzone to a fixed width instead of the full column. Mirror of the datepicker .date-w-* set.
+.file-w-sm {
+    --wui-file-width: 18rem;
+}
+.file-w-md {
+    --wui-file-width: 24rem;
+}
+.file-w-lg {
+    --wui-file-width: 30rem;
+}
+.file-w-full {
+    --wui-file-width: 100%;
 }
 // Fill-label associates click with the hidden file input; children don't
 // steal drag hits.
@@ -310,7 +452,7 @@
     box-sizing: border-box;
     display: block;
     width: 100%;
-    height: 350px;
+    height: 200px;
     border-radius: var(--radius-lg);
     corner-shape: squircle;
     border: 1px solid var(--color-border);
@@ -417,6 +559,10 @@
 // Round dropzone uploader (workspace/brand logo) and the settings-page photo
 // ring share this same interactive-uploader pattern.
 .set-uploader {
+    // One knob for the whole control — the ring diameter. Presets and the numeric `size`
+    // prop set it (inline); the ring, initials font and icons all derive from it, so any
+    // px value scales the picker proportionally. md (120px) is the default.
+    --wui-logo-size: 120px;
     display: inline-flex;
     padding: 0;
     border: none;
@@ -436,10 +582,10 @@
 }
 .set-uploader-ring {
     position: relative;
-    width: 120px;
-    height: 120px;
+    width: var(--wui-logo-size);
+    height: var(--wui-logo-size);
     border-radius: 50%;
-    padding: 8px;
+    padding: 5px;
     border: 1px dashed color-mix(in srgb, var(--color-border-strong) 75%, transparent);
     cursor: pointer;
     transition: border-color 0.18s;
@@ -455,15 +601,21 @@
     border-radius: 50%;
     display: grid;
     place-items: center;
-    font-size: 38px;
+    // Initials scale with the ring (~32% of the diameter reads well at every size).
+    font-size: calc(var(--wui-logo-size) * 0.32);
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--color-primary);
     background: var(--color-primary-soft);
 }
+// Avatar variant — the standard avatar disc (muted fill) instead of the soft-primary
+// initials plate; used with a person icon when no initials are given.
+.set-uploader--avatar .set-uploader-logo {
+    background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface));
+}
 .set-uploader-overlay {
     position: absolute;
-    inset: 8px;
+    inset: 5px;
     border-radius: 50%;
     display: flex;
     flex-direction: column;
@@ -491,12 +643,78 @@
     cursor: progress;
 }
 .set-uploader-hint {
-    margin: 18px auto 0;
+    margin: 12px 0 0;
     max-width: 240px;
     font-size: 12px;
     line-height: 1.5;
     color: var(--color-text-subtle);
 }
+// The picker field sizes to its content (the ring) rather than stretching to the
+// form width the way a text field does.
+.set-uploader-field {
+    gap: 8px;
+    width: max-content;
+    max-width: 100%;
+}
+// Positioning context for the remove control, which is a sibling of the button.
+.set-uploader-shell {
+    position: relative;
+    display: inline-block;
+}
+// Ring highlights while a file is dragged over it.
+.set-uploader.is-dragging .set-uploader-ring {
+    border-color: var(--color-primary);
+    background: var(--color-primary-soft);
+}
+// A plain disabled (not busy) picker: dim it and drop the pointer affordance.
+.set-uploader:disabled:not([aria-busy="true"]) {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+.set-uploader:disabled:not([aria-busy="true"]) .set-uploader-ring {
+    border-style: solid;
+}
+.set-uploader-remove {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 2px solid var(--color-surface);
+    border-radius: 50%;
+    background: var(--color-danger, #dc3545);
+    color: #fff;
+    cursor: pointer;
+    transition: transform 0.15s;
+}
+.set-uploader-remove:hover {
+    transform: scale(1.08);
+}
+// The control's own display would otherwise beat the UA [hidden] rule and keep it visible.
+.set-uploader-remove[hidden] {
+    display: none;
+}
+
+// Size is driven entirely by the --wui-logo-size custom property (set inline from the
+// `size` prop / preset), so there are no per-size class rules to keep in sync.
+
+// Shape variants — every round face (ring, image, logo, overlay) shares one radius.
+.set-uploader--rounded .set-uploader-ring,
+.set-uploader--rounded .set-uploader-img,
+.set-uploader--rounded .set-uploader-logo,
+.set-uploader--rounded .set-uploader-overlay {
+    border-radius: 18px;
+}
+.set-uploader--square .set-uploader-ring,
+.set-uploader--square .set-uploader-img,
+.set-uploader--square .set-uploader-logo,
+.set-uploader--square .set-uploader-overlay {
+    border-radius: 8px;
+}
 
 // Minimals-style rounded logo dropzone (workspace branding form).
 .logo-upload {