ngwr 14.6.0 → 14.8.0

package/tree/styles/_index.scss

@@ -177,15 +177,51 @@
     --wr-tree-trigger-font-size: var(--wr-control-font-size-md);
     --wr-tree-trigger-line-height: var(--wr-control-line-height-md);
     --wr-tree-panel-max-height: 18rem;
-    // Trigger width floor — hooked for the same reason as `--wr-select-min-width`:
-    // in a narrow grid column the literal wins over `minmax(0, 1fr)` and the
-    // trigger overhangs its cell, and the only escape was overriding
-    // `.wr-tree__trigger` from outside. Set it to 0 to defer to the layout.
+    // Trigger width floor, the same contract as `--wr-select-min-width`.
+    // Despite the name it is a DEFAULT width rather than a minimum: an explicit
+    // `width`, `width: 100%` in a narrow parent, a `minmax(0, 1fr)` cell and a
+    // shrinking flex item all win over it (see `::after` below). Set it to 0 to
+    // size a bare trigger to its content alone. This hook is the only way to
+    // lower it: a `min-width` on `.wr-tree__trigger`, the override that did it
+    // before the hook existed, no longer reaches the floor.
     --wr-tree-trigger-min-width: 12rem;
 
-    display: inline-flex;
+    // One column that shrinks to whatever the layout gives it and, left to size
+    // itself, grows to the widest thing in it — the trigger's content or the
+    // floor. The floor used to be a `min-width` on the trigger, which no width
+    // on the host could beat: `style="width: 6rem"` drew a 192px trigger in a
+    // 96px host, and in a 200px flex row beside a 120px sibling the tree
+    // overflowed the row by 120px. `minmax(0, …)` also drops the label's text
+    // from the host's min-content, so it shrinks as a flex item the way
+    // `[wrInput]` does and the label truncates instead.
+    display: inline-grid;
+    grid-template-columns: minmax(0, 1fr);
+    // The spacer below lands in a row of its own, and it must be a FIXED 0
+    // rather than an implicit `auto` one: a grid shares height beyond its
+    // content among its auto rows, so a host stretched by a taller flex or grid
+    // row, or given a `height`, drew a 45px trigger in a 60px host with an empty
+    // band beneath it.
+    grid-template-rows: auto 0;
     vertical-align: middle;
 
+    // The floor as a zero-height spacer in the same column. A grid track's
+    // max-content is its widest item, so a host sized to its content is at
+    // least `--wr-tree-trigger-min-width` wide; `max-width: 100%` is ignored
+    // while that size is being worked out and applies once the column exists,
+    // so a narrower host caps the spacer instead of the spacer stretching the
+    // host. `flex: 0 0 0` keeps it from taking room beside the trigger if a
+    // consumer turns the host into a flex container (the floor is then inert,
+    // never in the way). In overlay mode the template renders exactly one
+    // element into the host — the trigger — so this is the column's only other
+    // item, and the zero row is the spacer's.
+    &::after {
+      content: '';
+      flex: 0 0 0;
+      width: var(--wr-tree-trigger-min-width);
+      max-width: 100%;
+      height: 0;
+    }
+
     &.wr-tree--disabled {
       --wr-tree-trigger-color: var(--wr-color-on-surface-muted);
       --wr-tree-trigger-bg: var(--wr-color-fill);
@@ -197,7 +233,10 @@
     align-items: center;
     gap: 0.5rem;
     width: 100%;
-    min-width: var(--wr-tree-trigger-min-width);
+    // Not the floor — that lives on the host, where a width can beat it. Zero
+    // lets the trigger follow the host down and the label's ellipsis take the
+    // difference.
+    min-width: 0;
     appearance: none;
     background: var(--wr-tree-trigger-bg);
     color: var(--wr-tree-trigger-color);
@@ -249,7 +288,6 @@
   }
 
   &__chevron {
-    --wr-icon-size: 1rem;
     flex: 0 0 auto;
     color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
@@ -260,7 +298,6 @@
   }
 
   &__clear {
-    --wr-icon-size: 0.875rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -329,7 +366,6 @@
   }
 
   &__chip-remove {
-    --wr-icon-size: 0.875rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/types/ngwr-avatar.d.ts

@@ -47,6 +47,19 @@ type WrAvatarSize = number | `${number}` | `${number}px` | `${number}rem`;
  * spinner is drawn over it; with nothing projected, the spinner marks the
  * loading state instead. See `alt` for what a screen reader hears.
  *
+ * Projected initials take the text size around the avatar, capped at
+ * `--wr-avatar-initials-scale` (`0.375`) of the box, so they shrink only where
+ * they would not fit: a 16px avatar in a 14px chip draws 6px letters, while a
+ * `6rem` one keeps the surrounding size up to 36px and is capped only past it.
+ * Anything projected that is sized in `em` follows the cap too — a `<wr-icon>`
+ * at its default `1.2em` included — so pin a `px` or `rem` size on the projected
+ * element, or override the hook, to keep it. A `font-size` rule on the avatar
+ * itself still wins, unless it sits in a cascade layer (Tailwind v4's utilities
+ * do), which ngwr's unlayered stylesheet beats whatever the selector.
+ *
+ * The initials are inert: `pointer-events: none` hands a click on them to whatever
+ * holds the avatar, and `user-select: none` keeps them out of a text selection.
+ *
  * @example
  * ```html
  * <wr-avatar url="/me.png" alt="Roman" size="3rem" shape="circle" />
@@ -84,7 +97,8 @@ declare class WrAvatar {
      */
     readonly shape: _angular_core.InputSignal<WrAvatarShape>;
     /**
-     * Box size. See {@link WrAvatarSize} for accepted values.
+     * Box size. See {@link WrAvatarSize} for accepted values. The resolved value is
+     * published on the host as `--wr-avatar-size`.
      *
      * @default '6rem'
      */

package/types/ngwr-bar-chart.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_popover from 'ngwr/popover';
 import * as _angular_core from '@angular/core';
 
 /** One bar's worth of data. */
@@ -32,6 +33,12 @@ declare class WrBarChart {
     readonly height: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Explicit max value. `0` = auto. @default 0 */
     readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Show a tooltip with the bar's label and value on hover. Pointer only — the
+     * column's accessible name already carries both. @default true
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly barEls;
     /**
      * A datum's value, with anything non-finite read as `0`.
      *
@@ -55,8 +62,19 @@ declare class WrBarChart {
          */
         name: string;
     }[]>;
+    /**
+     * One tooltip for the whole chart, with the value exactly as it is printed above
+     * the bar. It points at the top edge of the BAR — above it, below it when there is
+     * no room — rather than at the column, which is the full height of the plot and
+     * would put the chip above every bar alike. A bar with nothing to draw (zero, a
+     * negative value) keeps its 1px floor on the baseline, so its chip points there.
+     *
+     * The bar is the anchor element itself, so an open chip follows it through the
+     * height transition a data change starts.
+     */
+    protected readonly tip: ngwr_popover.WrChartTooltip;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBarChart, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBarChart, "wr-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBarChart, "wr-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrBarChart };

package/types/ngwr-calendar-heatmap.d.ts

@@ -1,3 +1,4 @@
+import * as ngwr_popover from 'ngwr/popover';
 import * as _angular_core from '@angular/core';
 
 interface WrHeatmapDatum {
@@ -70,6 +71,13 @@ declare class WrCalendarHeatmap {
     readonly emptyColor: _angular_core.InputSignal<string>;
     /** Show the weekday + month labels around the grid. @default true */
     readonly showLabels: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Show a tooltip with the day and its count on hover. It is the sentence the
+     * square's `title` carried, so the `title` is written only while this is off —
+     * or the browser would open a second copy a moment later. @default true
+     */
+    readonly tooltip: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly daysEl;
     private readonly locale;
     /**
      * Weekday names from the locale rather than a hard-coded English list — the row order is
@@ -84,10 +92,30 @@ declare class WrCalendarHeatmap {
         week: number;
     }[]>;
     protected readonly columnCount: _angular_core.Signal<number>;
+    /** Each day's position in `cells()`, for the square the pointer lands on. */
+    private readonly indexByIso;
+    /**
+     * One tooltip for the whole year, pointing at the hovered day: above its square,
+     * below it when there is no room above, and slid along the viewport edge for the
+     * first and last weeks with the arrow still on the square. A listener on the grid
+     * rather than one per square: a year is 371 of them.
+     *
+     * The box is the square's LAYOUT box rather than its client rect. The hovered square
+     * grows by `:hover` over a transition, and a rect read part way through it would
+     * move the chip by up to a fifth of a square depending on when it was measured;
+     * the scale is centred, so the layout box is the rect's centre and the square's
+     * own size.
+     */
+    protected readonly tip: ngwr_popover.WrChartTooltip;
+    /**
+     * Which square the pointer is on, from a `mousemove` on the grid. Over the gap
+     * between two squares it is on none, and the tooltip starts to leave.
+     */
+    protected onCellsPointer(event: MouseEvent): void;
     protected colorFor(intensity: number): string;
     protected opacityFor(intensity: number): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCalendarHeatmap, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCalendarHeatmap, "wr-calendar-heatmap", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "weeks": { "alias": "weeks"; "required": false; "isSignal": true; }; "cellSize": { "alias": "cellSize"; "required": false; "isSignal": true; }; "cellGap": { "alias": "cellGap"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "emptyColor": { "alias": "emptyColor"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCalendarHeatmap, "wr-calendar-heatmap", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "endDate": { "alias": "endDate"; "required": false; "isSignal": true; }; "weeks": { "alias": "weeks"; "required": false; "isSignal": true; }; "cellSize": { "alias": "cellSize"; "required": false; "isSignal": true; }; "cellGap": { "alias": "cellGap"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "emptyColor": { "alias": "emptyColor"; "required": false; "isSignal": true; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { WrCalendarHeatmap };

package/types/ngwr-checkbox.d.ts

@@ -111,6 +111,8 @@ declare class WrCheckbox implements FormCheckboxControl {
      * only and controlled: set it yourself for a parent "select all" whose
      * children are partly checked, and clear it on the next toggle. Takes visual
      * precedence over `checked`; the native input reports `aria-checked="mixed"`.
+     * A click the host does not answer still toggles `checked` underneath, and the
+     * dash and the mixed state both stay until the binding turns `false`.
      *
      * @default false
      */