@webority/theme 0.13.1 → 0.13.4

package/package.json

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

@@ -1601,6 +1601,10 @@ wui-otp {
     border-radius: 50%;
     box-shadow: var(--wui-shadow-thumb);
     cursor: pointer;
+    // The thumb owns every touch that starts on it. Left at the default, a touch browser
+    // reads the first few pixels of a horizontal drag as a pan, cancels the pointer stream
+    // and the thumb stops a short way from where the finger started.
+    touch-action: none;
     transition:
         transform 0.18s var(--wui-ease-ui),
         box-shadow 0.18s var(--wui-ease-ui),

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;
-    }
-}