@webority/theme 0.13.0 → 0.13.3

package/package.json

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

@@ -59,7 +59,6 @@
 @import "flags";
 @import "wui/shell";
 @import "wui/dock";
-@import "wui/feedback";
 @import "wui/consent-banner";
 @import "wui/toolbar";
 // Last: restates the settled state of menus other partials style, so it must win.

package/scss/wui/_controls.scss

@@ -701,7 +701,7 @@ $wui-field-error-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/
 .pw-toggle {
     position: absolute;
     right: 7px;
-    top: 22px;
+    top: 50%;
     transform: translateY(-50%);
     display: grid;
     place-items: center;
@@ -1542,64 +1542,100 @@ wui-otp {
 // keyboard navigation (arrow keys, Page Up/Down, Home/End). Form-associated for
 // single/range value submission.
 .slider {
+    // The thumb diameter, which also sets how far in from each track end the thumb's
+    // centre stops (half of it), so a thumb at min or max sits inside the track.
+    --wui-slider-thumb: 30px;
     display: flex;
     align-items: center;
     gap: 12px;
     position: relative;
     user-select: none;
-    height: 32px;
+    height: 36px;
     min-width: 200px;
 }
+// One continuous pill: the filled part runs up to the thumb in the primary accent, the
+// rest stays the neutral border tone.
 .slider-track {
     flex: 1;
     position: relative;
-    height: 6px;
+    height: 12px;
     background-color: var(--color-border);
-    border-radius: 3px;
+    border-radius: 999px;
     cursor: pointer;
 }
+// The fill and the thumbs are siblings of the track, positioned against .slider, so each
+// centres itself on the track's midline rather than inheriting the container's height.
 .slider-fill {
     position: absolute;
-    top: 0;
-    height: 6px;
+    top: 50%;
+    height: 12px;
+    margin-top: -6px;
+    // left/right carry the raw percentage; these margins move each edge onto the inset
+    // thumb centre. A single slider sets no --wui-fill-start, so its fill keeps the track's
+    // own start.
+    margin-left: calc(var(--wui-slider-thumb) * (0.5 - var(--wui-fill-start, 0.5)));
+    margin-right: calc(var(--wui-slider-thumb) * (var(--wui-fill-end, 0.5) - 0.5));
     background-color: var(--color-primary);
-    border-radius: 3px;
+    border-radius: 999px;
     pointer-events: none;
 }
+// A surface-coloured disc with an accent ring. The thumb answers the pointer before the
+// value does: a small lift on hover and a firmer one while held, so the control feels
+// picked up rather than merely moved. Only the thumb is eased; the fill and the thumb's
+// position follow the pointer per frame and would lag it if they were transitioned.
 .slider-thumb {
     position: absolute;
     top: 50%;
-    width: 20px;
-    height: 20px;
-    margin-top: -10px;
-    margin-left: -10px;
+    box-sizing: border-box;
+    width: var(--wui-slider-thumb);
+    height: var(--wui-slider-thumb);
+    margin-top: calc(var(--wui-slider-thumb) / -2);
+    // left is t x 100% of the track; pulling back by t x the thumb width puts the centre at
+    // half a thumb + t x (track - thumb), the inset travel the pointer math also uses.
+    margin-left: calc(var(--wui-slider-thumb) * -1 * var(--wui-t, 0.5));
     padding: 0;
     appearance: none;
     -webkit-appearance: none;
-    background-color: var(--color-primary);
-    border: 2px solid var(--color-surface);
+    background-color: var(--color-surface);
+    border: 3px solid var(--color-primary);
     border-radius: 50%;
     box-shadow: var(--wui-shadow-thumb);
     cursor: pointer;
     transition:
-        background-color 0.15s ease,
-        box-shadow 0.15s ease,
+        transform 0.18s var(--wui-ease-ui),
+        box-shadow 0.18s var(--wui-ease-ui),
         border-color 0.15s ease;
 }
 .slider-thumb:hover:not(:disabled) {
+    transform: scale(1.08);
     box-shadow: var(--wui-shadow-thumb-hover);
 }
+.slider-thumb:active:not(:disabled) {
+    transform: scale(1.14);
+    box-shadow: 0 3px 14px color-mix(in srgb, var(--color-primary) 28%, transparent);
+}
 .slider-thumb:focus-visible {
     outline: 2px solid var(--color-primary);
     outline-offset: 4px;
 }
 .slider-thumb:disabled,
 .slider:has([disabled]) .slider-thumb {
-    background-color: var(--color-text-subtle);
-    border-color: var(--color-border);
+    border-color: var(--color-text-subtle);
     cursor: not-allowed;
     opacity: 0.6;
 }
+.slider:has([disabled]) .slider-fill {
+    background-color: var(--color-text-subtle);
+}
+@media (prefers-reduced-motion: reduce) {
+    .slider-thumb {
+        transition: none;
+    }
+    .slider-thumb:hover:not(:disabled),
+    .slider-thumb:active:not(:disabled) {
+        transform: none;
+    }
+}
 .slider-value {
     display: inline-block;
     min-width: 60px;
@@ -1610,23 +1646,21 @@ wui-otp {
     white-space: nowrap;
 }
 
-// Dark mode: slider shadows need light ink for visibility.
 // Size variants
 .slider-sm {
+    --wui-slider-thumb: 22px;
     height: 28px;
     gap: 8px;
 }
-.slider-sm .slider-track {
-    height: 4px;
+.slider-sm .slider-track,
+.slider-sm .slider-fill {
+    height: 8px;
 }
 .slider-sm .slider-fill {
-    height: 4px;
+    margin-top: -4px;
 }
 .slider-sm .slider-thumb {
-    width: 16px;
-    height: 16px;
-    margin-top: -8px;
-    margin-left: -8px;
+    border-width: 2px;
 }
 .slider-sm .slider-value {
     font-size: 12px;
@@ -1634,20 +1668,16 @@ wui-otp {
 }
 
 .slider-lg {
-    height: 36px;
+    --wui-slider-thumb: 34px;
+    height: 40px;
     gap: 16px;
 }
-.slider-lg .slider-track {
-    height: 8px;
-}
+.slider-lg .slider-track,
 .slider-lg .slider-fill {
-    height: 8px;
+    height: 14px;
 }
-.slider-lg .slider-thumb {
-    width: 24px;
-    height: 24px;
-    margin-top: -12px;
-    margin-left: -12px;
+.slider-lg .slider-fill {
+    margin-top: -7px;
 }
 .slider-lg .slider-value {
     font-size: 15px;

package/scss/wui/_feedback.scss

@@ -1,259 +0,0 @@
-// ── In-product feedback ──
-// AppFeedback / <app-feedback> / <wui-feedback> — a floating trigger pinned to a page
-// corner that opens a small panel with a message box. The element authors the markup and
-// owns the states (`open` / `busy` on the host, `hidden` on the panel, error and thank-you
-// blocks); everything visual lives here.
-//
-// Part of the wui-components layer — see _wui-components.scss for load order.
-
-wui-feedback {
-    position: fixed;
-    bottom: 20px;
-    z-index: var(--wui-z-fixed);
-    display: block;
-}
-wui-feedback,
-wui-feedback[position="bottom-right"] {
-    right: 20px;
-    left: auto;
-}
-wui-feedback[position="bottom-left"] {
-    left: 20px;
-    right: auto;
-}
-
-// ── Trigger ──
-.feedback-trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    height: var(--wui-control-height-sm);
-    padding: 0 16px;
-    border: none;
-    border-radius: 999px;
-    background: var(--color-primary);
-    color: var(--color-primary-text);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1;
-    cursor: pointer;
-    box-shadow: var(--wui-shadow-overlay);
-    transition:
-        background-color 160ms var(--wui-ease-ui),
-        transform 160ms var(--wui-ease-ui);
-}
-.feedback-trigger:hover {
-    background: var(--color-primary-hover);
-}
-.feedback-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
-.feedback-trigger-icon {
-    display: grid;
-    place-items: center;
-    line-height: 0;
-}
-.feedback-trigger-label {
-    white-space: nowrap;
-}
-
-// ── Panel ──
-// Anchored to the same corner as the trigger, opening upward — the trigger sits at the
-// bottom of the viewport, so there is only ever room above it.
-.feedback-panel {
-    position: absolute;
-    bottom: calc(100% + 12px);
-    width: 340px;
-    max-width: calc(100vw - 40px);
-    padding: 16px;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius-lg);
-    box-shadow: var(--wui-shadow-overlay-lg);
-    color: var(--color-text);
-    text-align: start;
-}
-wui-feedback[position="bottom-right"] .feedback-panel {
-    right: 0;
-}
-wui-feedback[position="bottom-left"] .feedback-panel {
-    left: 0;
-}
-// `hidden` on a custom element's child is honoured, but a later display rule would win —
-// state it explicitly so the panel cannot be left visible by cascade order.
-.feedback-panel[hidden] {
-    display: none;
-}
-
-.feedback-head {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
-    margin-bottom: 12px;
-}
-.feedback-heading {
-    margin: 0;
-    font-size: 15px;
-    font-weight: 600;
-    line-height: 1.3;
-    color: var(--color-text);
-}
-.feedback-close {
-    display: grid;
-    place-items: center;
-    width: 28px;
-    height: 28px;
-    flex: 0 0 auto;
-    padding: 0;
-    border: none;
-    border-radius: var(--wui-radius-sm);
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-}
-.feedback-close:hover {
-    background: var(--color-bg-muted);
-    color: var(--color-text);
-}
-.feedback-close:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 1px;
-}
-
-.feedback-body[hidden],
-.feedback-actions[hidden],
-.feedback-thanks[hidden] {
-    display: none;
-}
-
-// ── Fields ──
-.feedback-field {
-    display: block;
-    margin-bottom: 12px;
-}
-.feedback-field-label {
-    display: block;
-    margin-bottom: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--color-text-muted);
-}
-.feedback-message,
-.feedback-email {
-    display: block;
-    width: 100%;
-    padding: 10px 12px;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--wui-radius-sm);
-    color: var(--color-text);
-    font-family: inherit;
-    font-size: 14px;
-    line-height: 1.45;
-}
-.feedback-message {
-    min-height: 96px;
-    resize: vertical;
-}
-.feedback-message:focus-visible,
-.feedback-email:focus-visible {
-    outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px var(--color-primary-soft);
-}
-.feedback-email {
-    height: var(--wui-control-height-sm);
-}
-
-.feedback-error {
-    margin: 0 0 4px;
-    font-size: 13px;
-    line-height: 1.4;
-    color: var(--color-danger-text);
-}
-.feedback-error[hidden] {
-    display: none;
-}
-
-// ── Actions ──
-.feedback-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-}
-.feedback-cancel,
-.feedback-submit {
-    height: var(--wui-control-height-sm);
-    padding: 0 14px;
-    border-radius: var(--wui-radius-sm);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 1;
-    cursor: pointer;
-}
-.feedback-cancel {
-    border: 1px solid var(--color-border);
-    background: transparent;
-    color: var(--color-text);
-}
-.feedback-cancel:hover {
-    background: var(--color-bg-muted);
-}
-.feedback-submit {
-    border: none;
-    background: var(--color-primary);
-    color: var(--color-primary-text);
-}
-.feedback-submit:hover:not(:disabled) {
-    background: var(--color-primary-hover);
-}
-.feedback-submit:disabled {
-    opacity: 0.65;
-    cursor: default;
-}
-.feedback-cancel:focus-visible,
-.feedback-submit:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-}
-
-// ── Thank-you ──
-.feedback-thanks {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 0 4px;
-    font-size: 14px;
-    color: var(--color-success-text);
-}
-.feedback-thanks-icon {
-    display: grid;
-    place-items: center;
-    line-height: 0;
-}
-.feedback-thanks-text {
-    font-weight: 500;
-    line-height: 1.4;
-}
-
-// ── Small screens ──
-// The panel is nearly the width of the phone, so pin it to both edges rather than to the
-// trigger's corner — a 340px card anchored to one side overhangs on the narrowest devices.
-@include media-breakpoint-down(sm) {
-    .feedback-panel {
-        position: fixed;
-        right: 12px;
-        left: 12px;
-        bottom: calc(var(--wui-control-height-sm) + 32px);
-        width: auto;
-        max-width: none;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .feedback-trigger {
-        transition: none;
-    }
-}