@djangocfg/ui-core 2.1.556 → 2.1.557

package/src/styles/css/utilities/overlay.css

@@ -22,3 +22,81 @@
   backdrop-filter: blur(var(--overlay-blur, 0px));
   -webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
 }
+
+/**
+ * The scrolling list inside a popover — a combobox's options, a command menu's
+ * results, any panel long enough to need a limit.
+ *
+ * It is a ROLE, not a size. The 300px ceiling is what reads comfortably; the
+ * real constraint is the gap the popover has to the edge of the window, which
+ * Radix publishes as `--radix-popover-content-available-height` on the content
+ * element. Taking the smaller of the two is what keeps a list opened near the
+ * bottom of the screen from flipping above its trigger and being clipped by the
+ * viewport — the failure this class exists to prevent.
+ *
+ * Outside a popover the Radix variable is unset and the fallback leaves the
+ * plain ceiling, so the class is safe anywhere.
+ *
+ * Override `--popover-scroll-max` (per theme, or on one instance) to raise or
+ * lower the ceiling; the viewport clamp always still applies.
+ *
+ * It must sit on the element that ACTUALLY SCROLLS — for cmdk that is
+ * `CommandList`, whose highlight moves by `scrollIntoView({block:'nearest'})`
+ * and therefore acts on the nearest scrollable ancestor. Capping a wrapper
+ * instead hands the scrolling to a container cmdk cannot see, and the arrow
+ * keys walk the highlight out of view.
+ *
+ * Plain CSS rather than a JIT-scanned utility, for the same reason as
+ * `.bg-overlay` above: it must compile no matter whose source the Tailwind
+ * content scan covers.
+ */
+.popover-scroll-region {
+  /* The VIEWPORT clamp deliberately lives on the panel (`.popover-panel`), not
+     here: this element is only part of the panel, and capping it alone lets the
+     siblings above it — a search input, a header — push the panel past the edge
+     anyway. Measured: available 193px, list 193px, panel 236px, top −35px.
+     Here the job is only the comfortable ceiling plus the actual scrolling;
+     `min-height: 0` is what lets the flex parent shrink it below its content
+     when the viewport, not the ceiling, is the binding constraint. */
+  max-height: var(--popover-scroll-max, 18.75rem);
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+/**
+ * The part of a snapped drawer that is actually on screen.
+ *
+ * With snap points the panel is FULL height and vaul slides it down to the
+ * active point, so everything below that point sits under the bottom edge of
+ * the window. A footer pinned with `mt-auto` therefore pins itself to the
+ * bottom of the PANEL — measured 344px below the viewport, unreachable even
+ * with the body scrolled to its end, which is what made a drawer's submit
+ * button impossible to reach.
+ *
+ * `--snap-point-height` is vaul's offset — how much of the panel is hidden —
+ * so the visible height is what remains. Constraining the content column to it
+ * puts the footer back at the edge the reader can see, at every snap point,
+ * with no JavaScript following the drag.
+ */
+.drawer-snap-viewport {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - var(--snap-point-height, 0px));
+  min-height: 0;
+}
+
+/**
+ * A popover panel that must never grow past the window.
+ *
+ * `PopoverContent` carries this by default. The height Radix publishes already
+ * accounts for `collisionPadding`, so the panel keeps its gap from the edge,
+ * and the column layout lets a `.popover-scroll-region` child absorb whatever
+ * is left after fixed siblings (search field, footer) have taken their share.
+ */
+.popover-panel {
+  display: flex;
+  flex-direction: column;
+  max-height: var(--radix-popover-content-available-height, none);
+}

package/src/styles/css/utilities/tabs.css

@@ -0,0 +1,53 @@
+/**
+ * The sliding indicator behind a segmented tab list.
+ *
+ * One pill that travels to the selected tab, rather than a highlight that
+ * disappears from one tab and reappears on the next. The movement is what
+ * carries the meaning: these options are mutually exclusive, and the pill is
+ * the single thing being moved between them.
+ *
+ * Position and size arrive as `--tab-indicator-x` / `--tab-indicator-w`, which
+ * the list measures from the active trigger — tabs here are labelled with real
+ * words and are never equal width, so a fixed `--step` (the usual CSS-only
+ * trick) would drift the moment a label changed. Only `transform` and `width`
+ * animate, so the pill stays on the compositor.
+ *
+ * The indicator is a pseudo-element on the LIST rather than a background on the
+ * trigger: a background cannot animate between two different elements, which is
+ * exactly why the default variant popped instead of sliding.
+ */
+.tabs-sliding {
+  position: relative;
+  isolation: isolate;
+}
+
+.tabs-sliding::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: var(--tab-indicator-inset, 0.25rem);
+  bottom: var(--tab-indicator-inset, 0.25rem);
+  left: 0;
+  width: var(--tab-indicator-w, 0);
+  transform: translate3d(var(--tab-indicator-x, 0), 0, 0);
+  border-radius: var(--tab-indicator-radius, var(--radius-sm));
+  background: var(--tab-indicator-bg, var(--background));
+  box-shadow: var(--tab-indicator-shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
+  transition:
+    transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
+    width 260ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+/* Before the first measurement the pill has no width, so there is nothing to
+   see travelling in from the left edge on mount. */
+.tabs-sliding[data-tab-indicator="idle"]::before {
+  opacity: 0;
+}
+
+/* A reader who has asked for less motion gets the destination, not the
+   journey — the pill still marks the right tab, it simply stops sliding. */
+@media (prefers-reduced-motion: reduce) {
+  .tabs-sliding::before {
+    transition: none;
+  }
+}

package/src/styles/css/utilities.css

@@ -12,6 +12,8 @@
 @import './utilities/controls.css';
 @import './utilities/datetime-field.css';
 @import './utilities/step.css';
+@import './utilities/filter-bar.css';
+@import './utilities/tabs.css';
 @import './utilities/animations.css';
 @import './utilities/glass.css';
 @import './utilities/marquee.css';