@webority/theme 0.67.0 → 0.68.1

package/package.json

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

@@ -513,6 +513,11 @@
     }
 }
 
+// The form of a posting dropdown item takes no box, so its item stays a plain row of the menu.
+.wui-dropdown-form {
+    display: contents;
+}
+
 // Group heading: an AppDropdown item `header` or <app-dropdown-header>.
 .dropdown-menu .dropdown-header {
     font-size: 12px;

package/scss/wui/_controls.scss

@@ -1221,7 +1221,10 @@ wui-select[compact] {
     border: none;
     border-radius: 0;
     background: transparent;
-    min-width: 0;
+    // Room for four digits however narrow the field: with a unit beside it, a min-width of 0 let the value
+    // shrink to about 20px and vanish. The stepper buttons give way first (flex-shrink below).
+    min-width: calc(4ch + 8px);
+    padding-inline: 4px;
     text-align: center;
     font-weight: 600;
     color: var(--color-text);
@@ -1237,7 +1240,10 @@ wui-select[compact] {
 .num-btn {
     display: grid;
     place-items: center;
-    width: 44px;
+    // A 44px cell that shrinks before the value does in a narrow field.
+    flex: 0 1 44px;
+    min-width: 0;
+    overflow: hidden;
     // Fill the field height and centre the glyph. `height: 100%` resolved to auto
     // against the wrap's content-based height and left the button icon-tall, pinned
     // to the top; align-self:stretch fills the full field so place-items centres it.
@@ -1250,7 +1256,6 @@ wui-select[compact] {
     transition:
         color 0.12s ease,
         background 0.12s ease;
-    flex: none;
 }
 .num-btn:hover:not(:disabled) {
     color: var(--color-primary-ink);
@@ -1286,7 +1291,7 @@ wui-select[compact] {
     border-radius: var(--wui-field-radius-sm);
 }
 .num-wrap-sm .num-btn {
-    width: 36px;
+    flex-basis: 36px;
 }
 .num-wrap-sm .num-input {
     font-size: 13px;
@@ -1295,7 +1300,7 @@ wui-select[compact] {
     border-radius: var(--wui-field-radius-lg);
 }
 .num-wrap-lg .num-btn {
-    width: 52px;
+    flex-basis: 52px;
 }
 .num-wrap-lg .num-input {
     font-size: 16px;

package/scss/wui/_data.scss

@@ -1736,3 +1736,43 @@ wui-data-table {
         animation: none;
     }
 }
+
+// Drop targets for dragged rows (rowDrop.js): a sticky strip under the table, with a chip per target.
+.wui-drop-tray {
+    position: sticky;
+    bottom: 0;
+    height: 96px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 16px;
+    overflow-x: auto;
+    background: var(--color-surface);
+    border-top: 1px solid var(--color-border);
+    z-index: var(--wui-z-sticky);
+}
+.wui-drop-tray [data-wui-drop-target] {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 40px;
+    padding: 0 14px;
+    border: 1px dashed var(--color-border-strong);
+    border-radius: 999px;
+    white-space: nowrap;
+    background: transparent;
+}
+[data-wui-drop-target].is-drop-over {
+    border-style: solid;
+    border-color: var(--color-primary);
+    background: var(--color-primary-soft);
+}
+[data-wui-drop-target][aria-disabled="true"] {
+    opacity: .6;
+}
+[data-wui-row-drag] tbody tr[draggable="true"] {
+    cursor: grab;
+}
+body.wui-row-dragging {
+    cursor: grabbing;
+}

package/scss/wui/_drawer.scss

@@ -92,6 +92,20 @@
     padding: 12px 20px;
     border-top: 1px solid var(--color-border);
 }
+.wui-drawer-discard {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+.wui-drawer-discard-text {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-weight: 500;
+}
+.wui-drawer-discarding > :not(.wui-drawer-discard) {
+    display: none;
+}
 
 // Side drawer: from md up.
 @include media-breakpoint-up(md) {

package/scss/wui/_navigation.scss

@@ -693,6 +693,44 @@
 .search-clear:hover {
     color: var(--color-text);
 }
+// The toggle of <app-search collapsible>: a field folded into an icon until it is opened.
+.wui-search-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--wui-field-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+}
+.search-wrap.search-sm .wui-search-toggle {
+    width: 32px;
+    height: 32px;
+}
+.search-wrap.search-lg .wui-search-toggle {
+    width: 44px;
+    height: 44px;
+}
+.wui-search-toggle:hover {
+    color: var(--color-text);
+}
+.wui-search-toggle:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+.search-wrap.wui-search-collapsible:not(.is-collapsed) .wui-search-toggle {
+    display: none;
+}
+.search-wrap.wui-search-collapsible.is-collapsed > :not(.wui-search-toggle) {
+    display: none;
+}
+.search-wrap.wui-search-collapsible.is-collapsed {
+    width: auto;
+}
 // type=search draws the browser's own cancel ✕; the component ships its own .search-clear,
 // so the native one would double up. Remove it (WebKit/Blink).
 .search-input::-webkit-search-cancel-button,

package/scss/wui/_page-header-bar.scss

@@ -41,6 +41,15 @@
 .page-header-bar-bulk[hidden] {
     display: none;
 }
+.page-header-bar-bulk-count {
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+}
+.page-header-bar-views[hidden],
+.page-header-bar-tools[hidden] {
+    display: none;
+}
 .page-header-bar-meta {
     font-size: 13px;
     color: var(--color-text-muted);

package/scss/wui/_shell.scss

@@ -452,6 +452,14 @@
     gap: 0;
     padding: 9px 0;
 }
+.app-shell.collapsed .app-nav-item.wui-nav-split {
+    padding: 0;
+}
+.app-shell.collapsed .wui-nav-split-link {
+    justify-content: center;
+    gap: 0;
+    padding: 9px 0;
+}
 .app-shell.collapsed .app-nav-badge,
 .app-shell.collapsed .app-nav-group-label,
 .app-shell.collapsed .wui-nav-group-after,
@@ -575,6 +583,48 @@
     white-space: normal;
     overflow-wrap: anywhere;
 }
+// A parent with its own link: the row holds the link and a chevron toggle. The row has no padding,
+// so the link carries the .app-nav-item padding. These rules sit after .app-nav-item.app-nav-subitem,
+// so the row's `padding: 0` wins over that rule's padding-left, and the link takes the same inset.
+.app-nav-item.wui-nav-split {
+    display: flex;
+    align-items: center;
+    padding: 0;
+    cursor: default;
+}
+.wui-nav-split-link {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    padding: 9px 14px;
+    gap: 12px;
+    color: inherit;
+    text-decoration: none;
+}
+.app-nav-item.wui-nav-split.app-nav-subitem .wui-nav-split-link {
+    padding-left: calc(46px + (var(--wui-nav-depth, 1) - 1) * 16px);
+}
+.wui-nav-split-toggle {
+    border: 0;
+    background: transparent;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-sm, 6px);
+    cursor: pointer;
+}
+.wui-nav-split-toggle:hover {
+    background: var(--color-bg-muted);
+}
+.wui-nav-split-toggle[aria-expanded="true"] {
+    transform: rotate(90deg);
+}
+.wui-nav-split-link:focus-visible,
+.wui-nav-split-toggle:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
 
 // ── Collapsed rail: label tooltip ────────────────────────────────────────────
 // The rail hides labels, so surface each on hover/focus as a chip to the right —
@@ -812,6 +862,14 @@
         gap: 12px;
         padding: 9px 14px;
     }
+    .app-shell.app-shell.collapsed .app-nav-item.wui-nav-split {
+        padding: 0;
+    }
+    .app-shell.app-shell.collapsed .wui-nav-split-link {
+        justify-content: flex-start;
+        gap: 12px;
+        padding: 9px 14px;
+    }
     .app-shell.app-shell.collapsed .app-nav-text,
     .app-shell.app-shell.collapsed .app-nav-badge,
     .app-shell.app-shell.collapsed .app-nav-group-label,