@webority/theme 0.66.0 → 0.68.0

package/package.json

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

package/scss/wui/_typography.scss

@@ -123,6 +123,20 @@
 .chip-clickable:hover {
     border-color: var(--color-border-strong);
 }
+.chip-clickable {
+    padding: 0;
+}
+.chip-clickable > .chip-body {
+    align-self: stretch;
+    padding: 4px 10px;
+    border-radius: inherit;
+}
+.chip-sm.chip-clickable > .chip-body {
+    padding: 2px 8px;
+}
+.chip-clickable > .chip-remove {
+    margin-right: 6px;
+}
 .chip-remove {
     display: inline-flex;
     align-items: center;