ngwr 9.0.0 → 9.1.0

package/README.md

@@ -10,7 +10,7 @@
 zoneless-ready, responsive, modular SCSS, fully tree-shakable. Built on top of
 `@angular/cdk` for overlay, portal, and a11y primitives.
 
-> **Status:** active development. v8 is the current major line (Angular 22 peer).
+> **Status:** active development. v9 is the current major line (Angular 22 peer).
 > Public API is stable across patch releases and still evolving between majors.
 > [Open an issue](https://github.com/thekhegay/ngwr/issues/new)
 > if something breaks or feels wrong.

package/date-picker/styles/_index.scss

@@ -27,6 +27,30 @@
   }
 }
 
+.wr-date-range-picker {
+  display: inline-block;
+
+  // Each end shares the group's width so the pair reads as one control.
+  &__input {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  &__separator {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 0.25rem;
+    color: var(--wr-color-on-surface-muted);
+    user-select: none;
+  }
+
+  &--disabled {
+    .wr-date-range-picker__separator {
+      opacity: 0.5;
+    }
+  }
+}
+
 // Overlay pane — z-index isolation only. <wr-calendar> + the time panel
 // bring their own chrome.
 .wr-date-picker-overlay {
@@ -201,3 +225,41 @@
     border-radius: 0 0 var(--wr-border-radius-base) var(--wr-border-radius-base);
   }
 }
+
+// Range calendar + one time stepper per end, joined to the calendar the same
+// way the single datetime panel is.
+.wr-date-range-panel {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+
+  > .wr-calendar {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &__times {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem 1.25rem;
+    padding: 0.75rem;
+    background: var(--wr-color-surface);
+    border: 1px solid var(--wr-color-outline);
+    border-top: 0;
+    border-radius: 0 0 var(--wr-border-radius-base) var(--wr-border-radius-base);
+  }
+
+  &__time {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  &__time-label {
+    color: var(--wr-color-on-surface-muted);
+    font-size: var(--wr-text-xs);
+    font-weight: 600;
+  }
+}

package/drawer/styles/_index.scss

@@ -18,6 +18,29 @@
   height: 100dvh;
 }
 
+// `WrDrawerManager.open()` attaches the content component straight into the
+// overlay pane, so both class sets land on the same element and the panel's
+// `height: 100%` would otherwise win over the rule above.
+.wr-drawer-overlay--left.wr-drawer__panel,
+.wr-drawer-overlay--right.wr-drawer__panel {
+  height: 100vh;
+  height: 100dvh;
+}
+
+// …and that same flattening puts the content component's own host element
+// between the panel and the title / content / footer slots, so the panel's
+// column layout stops one level short: the footer wouldn't pin to the bottom
+// and the body wouldn't scroll. Pass the layout through the interposed host.
+.wr-drawer-overlay.wr-drawer__panel > * {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: 100%;
+  // Let `wr-drawer__content`'s `overflow: auto` actually clip: a flex item
+  // defaults to `min-height: auto`, which refuses to shrink below its content.
+  min-height: 0;
+}
+
 .wr-drawer__panel {
   --wr-drawer-bg: var(--wr-color-surface);
   --wr-drawer-shadow: var(--wr-shadow-modal);