@smwb/ui-styles 1.3.0 → 1.4.1

package/less/components/floatingWindow/floatingWindow.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./floatingWindow.less";

package/less/components/floatingWindow/floatingWindow.less

@@ -0,0 +1,200 @@
+.smwb-floating-window {
+  background-color: var(--smui-surfaceBackground);
+  color: var(--smui-onSurfaceColor);
+  position: fixed;
+  z-index: @floatingWindowZ;
+  display: flex;
+  flex-direction: column;
+  // The geometry (left/top/width/height) is written inline in px by the component, and
+  // padding must be included in it or every resize frame would grow the window by the
+  // padding and drift away from the cursor. Same reasoning as .smwb-sheet.
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: @floatingWindowBorderRadius;
+  box-shadow: rgb(0 0 0 / 14%) 0px 8px 10px -5px, rgb(0 0 0 / 14%) 0px 1px 14px 1px, rgb(0 0 0 / 14%) 0px 6px 22px 4px;
+  opacity: 0;
+  // Deliberately NOT `transition: all` — the window is dragged and resized by writing
+  // left/top/width/height every pointer frame, and animating those would lag the cursor
+  // (which is why Sheet has to inject `transition: none` mid-drag). Only the mount fade
+  // is animated, so drag frames never fight a transition.
+  transition: opacity 0.12s ease-in-out;
+
+  &.smwb-floating-window_entered {
+    opacity: 1;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: @floatingWindowHeaderGap;
+    flex-shrink: 0;
+    height: @floatingWindowHeaderHeight;
+    padding: 0 @floatingWindowPadding;
+    border-bottom: 1px solid var(--smui-dividerColor);
+    // A pointer-drag move must own the touch gesture, or dragging the title bar scrolls
+    // the page on touch devices instead.
+    touch-action: none;
+    user-select: none;
+    cursor: move;
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+  }
+
+  // The keyboard move affordance. Pointer drag is handled by the whole header; this is
+  // the focusable element so the header itself need not be a role="button" wrapping the
+  // header's own buttons.
+  &__grip {
+    display: inline-flex;
+    align-items: center;
+    color: var(--smui-onSurfaceVariant);
+    flex-shrink: 0;
+    cursor: move;
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: 2px;
+      border-radius: @smui-radius-xs;
+    }
+  }
+
+  &__title {
+    font-family: var(--smui-fontFamily);
+    font-size: @smui-font-subtitle2-size;
+    font-weight: @smui-font-subtitle2-weight;
+    line-height: @smui-font-subtitle2-lh;
+    color: var(--smui-onSurfaceColor);
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: @smui-space-xxs;
+    flex-shrink: 0;
+    margin-left: auto;
+    cursor: default;
+  }
+
+  &__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px;
+    border: none;
+    border-radius: @smui-radius-sm;
+    background: transparent;
+    color: var(--smui-onSurfaceVariant);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--smui-onSurfaceHover);
+      color: var(--smui-onSurfaceColor);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    // Without an explicit zero minimum a flex item refuses to shrink below its content,
+    // so a scrolling child would push the window past its dragged height instead of
+    // scrolling inside it.
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    padding: @floatingWindowPadding;
+  }
+
+  // Shaded to the title bar: the component drops the inline height, so the flex column
+  // collapses to the header's own height.
+  &.smwb-collapsed {
+    height: auto;
+  }
+
+  &__resize {
+    position: absolute;
+    touch-action: none;
+    user-select: none;
+    z-index: 1;
+
+    &:focus-visible {
+      outline: 2px solid var(--smui-primaryColor);
+      outline-offset: -2px;
+    }
+
+    &_n,
+    &_s {
+      left: @floatingWindowResizeEdge;
+      right: @floatingWindowResizeEdge;
+      height: @floatingWindowResizeEdge;
+      cursor: ns-resize;
+    }
+
+    &_e,
+    &_w {
+      top: @floatingWindowResizeEdge;
+      bottom: @floatingWindowResizeEdge;
+      width: @floatingWindowResizeEdge;
+      cursor: ew-resize;
+    }
+
+    &_n {
+      top: 0;
+    }
+
+    &_s {
+      bottom: 0;
+    }
+
+    &_e {
+      right: 0;
+    }
+
+    &_w {
+      left: 0;
+    }
+
+    &_ne,
+    &_nw,
+    &_se,
+    &_sw {
+      width: (@floatingWindowResizeEdge * 2);
+      height: (@floatingWindowResizeEdge * 2);
+    }
+
+    &_ne {
+      top: 0;
+      right: 0;
+      cursor: nesw-resize;
+    }
+
+    &_nw {
+      top: 0;
+      left: 0;
+      cursor: nwse-resize;
+    }
+
+    &_se {
+      bottom: 0;
+      right: 0;
+      cursor: nwse-resize;
+    }
+
+    &_sw {
+      bottom: 0;
+      left: 0;
+      cursor: nesw-resize;
+    }
+  }
+}

package/less/components/treeView/treeView.less

@@ -35,13 +35,24 @@
       display: inline-flex;
       align-items: center;
       gap: @treeViewItemGap;
+      // While min-width is auto a flex item never shrinks below its content, so
+      // a long label claims max-content and spills out of the node instead of
+      // wrapping. The icon keeps its size regardless.
+      min-width: 0;
+      overflow-wrap: break-word;
+
+      > .smwb-icon__wrapper {
+        flex: none;
+      }
     }
 
     &__content {
       display: flex;
       align-items: center;
       gap: @treeViewItemGap;
-      height: 40px;
+      // min-height, not height: a fixed row height let a wrapped two-line label
+      // overflow the node and overlap the next one.
+      min-height: 40px;
       cursor: pointer;
       user-select: none;
     }

package/less/components.less

@@ -26,6 +26,7 @@
 @import "./components/grid/grid.less";
 @import "./components/tooltip/tooltip.less";
 @import "./components/sheet/sheet.less";
+@import "./components/floatingWindow/floatingWindow.less";
 @import "./components/badge/badge.less";
 @import "./components/card/card.less";
 @import "./components/carousel/carousel.less";

package/less/default/globals/default.variables.less

@@ -188,6 +188,11 @@
 @sheetContentPaddingLeft: 10px; // off-grid
 @sheetHandleSpace: @smui-space-xl; // drag-to-resize grab-handle hit area
 
+@floatingWindowPadding: @smui-space-md;
+@floatingWindowHeaderHeight: 36px; // off-grid; the collapsed (title-bar only) height
+@floatingWindowHeaderGap: @smui-space-xs;
+@floatingWindowResizeEdge: 6px; // off-grid; pointer hit area of the edge/corner grips
+
 @sidebarPadding: @smui-space-lg;
 @sidebarOpenGap: @smui-space-xl;
 @sidebarNavGap: 5px; // off-grid
@@ -397,6 +402,18 @@
 --------------------*/
 @sheetBorderRadius: @smui-radius-xxl;
 
+/*-------------------
+  Floating window
+--------------------*/
+@floatingWindowBorderRadius: @smui-radius-lg;
+// off-grid. Above the sheet panel/overlay (100) so a window can float over a docked
+// sheet, but below every portaled surface a window's own content may open — consumer
+// popups (thumbCard's hover preview at 200 and card menu at 300), snackbar (777), modal
+// (1001) and menu/dataPicker (1300). A ConfirmDialog, dropdown or hover preview raised
+// from inside a window must paint above it, so the window sits at the bottom of that
+// stack. Hosts add their stacking index on top, leaving headroom before 200.
+@floatingWindowZ: 150;
+
 /*-------------------
     Tooltip
 --------------------*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-styles",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "Framework-agnostic LESS design tokens and component styles (smwb-*) shared by the @smwb UI libraries. Prebuilt aggregate CSS lives in @smwb/ui-css.",
   "license": "MIT",
   "sideEffects": [