ngwr 14.7.0 → 14.8.0

package/event-calendar/styles/_index.scss

@@ -8,15 +8,19 @@
 /// one of the 120-odd style entries that referenced tokens without pulling the
 /// layer that declares them: `@use 'ngwr/event-calendar'` on its own emitted
 /// 5.5 kB of rules carrying 57 unresolved `var(--wr-*)` references, so the grid
-/// lines (`box-shadow`, hence no fallback) vanished and the text fell back to
-/// black. The ten other entries that skip the load — `affix`, `density` and the
-/// eight canvas / text-animation ones — reference no token at all, which is why
-/// a sweep for "who is missing it" is not enough on its own.
+/// lines (then a `box-shadow`, hence no fallback) vanished and the text fell
+/// back to black. The ten other entries that skip the load — `affix`, `density`
+/// and the eight canvas / text-animation ones — reference no token at all, which
+/// is why a sweep for "who is missing it" is not enough on its own.
 ///
-/// Grid lines are `box-shadow: inset`, never borders. A border would take up
-/// layout space, and the whole chip model depends on cell boxes being exactly
-/// contiguous: a band's `calc(var(--span) * 100%)` is only the right width if
-/// one cell ends precisely where the next begins.
+/// Grid lines are borders on an absolutely positioned `::after`, never on the
+/// cell itself. A border on the cell would take up layout space, and the whole
+/// chip model depends on cell boxes being exactly contiguous: a band's
+/// `calc(var(--span) * 100%)` is only the right width if one cell ends precisely
+/// where the next begins. They used to be `box-shadow: inset`, which costs no
+/// space either but has no logical form — and each cell drew its line on the
+/// physical right and bottom whether or not that edge was the frame, so the last
+/// column and the last row painted a second hairline against the grid's own.
 @use '../../theme/styles';
 
 .wr-event-calendar {
@@ -29,6 +33,17 @@
   // dark enough that `--wr-color-on-surface-muted` on top of it lands at 3.6:1.
   --wr-event-calendar-fill: var(--wr-color-fill);
   --wr-event-calendar-cols: 7;
+  // A chip is a 20px strip carrying a 3px accent on its leading edge, and the
+  // library's small radius (6px) bent that accent into a bracket. Half of it
+  // keeps the corner soft and the accent straight, and still follows a theme
+  // that re-tunes `--wr-border-radius-sm`.
+  --wr-event-calendar-chip-radius: calc(var(--wr-border-radius-sm) / 2);
+  // Space above the first chip (below the day number, or below the header rule
+  // in the all-day band) and between stacked chips.
+  --wr-event-calendar-chip-gap: 0.25rem;
+  // How far a chip stands in from the lines of the cell it sits in — on both
+  // inline sides, and below a timed chip so back-to-back events do not merge.
+  --wr-event-calendar-chip-inset: 0.125rem;
 
   display: flex;
   flex-direction: column;
@@ -75,6 +90,9 @@
     display: grid;
     overflow: hidden;
     border-radius: var(--wr-border-radius-base);
+    // The frame, spread OUTSIDE the box. It owns the four outer edges, which is
+    // why no cell draws a line on a side that meets it (see the grid lines
+    // below).
     box-shadow: 0 0 0 1px var(--wr-event-calendar-line);
 
     &--month {
@@ -82,7 +100,15 @@
     }
 
     &--time {
-      grid-template-columns: var(--wr-event-calendar-gutter) repeat(var(--wr-event-calendar-cols), minmax(0, 1fr));
+      // The hook is the gutter's FLOOR, not its width. A fixed 3.75rem could not
+      // hold "09:00 AM" at the label's own padding, so the label wrapped onto a
+      // second line, the rows carrying one grew to 36px while the slot cells
+      // stayed 24px, and every column line broke for 12px at every hour — and a
+      // timed chip, sized in percentages of one 24px slot, ended short of its
+      // own end time by 12px per hour it crossed.
+      grid-template-columns:
+        minmax(var(--wr-event-calendar-gutter), max-content)
+        repeat(var(--wr-event-calendar-cols), minmax(0, 1fr));
     }
   }
 
@@ -94,13 +120,13 @@
 
   &__weekday,
   &__colhead {
+    position: relative;
     padding: 0.5rem 0.375rem;
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-medium);
     color: var(--wr-color-on-surface-muted);
     text-align: center;
     background: var(--wr-event-calendar-fill);
-    box-shadow: inset 0 -1px 0 var(--wr-event-calendar-line);
   }
 
   &__colhead {
@@ -122,11 +148,36 @@
   &__gutter {
     padding: 0 0.5rem;
     font-size: var(--wr-text-xs);
+    // One line box exactly one em tall, so the nudge below centres the label on
+    // its line and the label can never make a slot row taller than the slot.
+    line-height: 1;
     color: var(--wr-color-on-surface-muted);
     text-align: end;
+    white-space: nowrap;
     // Nudged up so the label reads as the line it labels, not the band below it.
+    // The transform moves the box, so the gutter draws no line of its own — the
+    // divider is the first day column's (see the grid lines below).
     transform: translateY(-0.5em);
-    box-shadow: inset -1px 0 0 var(--wr-event-calendar-line);
+  }
+
+  // The all-day label names a band, not a line: its top level with the first
+  // chip's. Not centred on the chip — the first hour's label below is centred on
+  // the band's bottom rule, and a centred "All day" ran into it.
+  //
+  // And it does not size the column. The hour labels have to stay on one line,
+  // because a wrapped one grows its row; this label only grows the all-day row,
+  // which is a floor anyway. Left to `nowrap`, "Toute la journée" widened the
+  // French gutter from 72px to 107px and took a fifth off every day column at
+  // phone width, and the English label overrode a smaller gutter hook. A wrapped
+  // label grows the row through its bottom padding instead: the first hour's
+  // label is lifted 0.5em into this row, and the other 0.5em is the space a
+  // one-line "All day" already leaves above it. Without it the second line of
+  // "Toute la journée" overlapped "08:00 AM".
+  &__row--allday > &__gutter {
+    contain: inline-size;
+    padding-block: var(--wr-event-calendar-chip-gap) 1em;
+    white-space: normal;
+    transform: none;
   }
 
   &__cell {
@@ -137,7 +188,6 @@
     position: relative;
     min-width: 0;
     cursor: pointer;
-    box-shadow: inset -1px -1px 0 var(--wr-event-calendar-line);
 
     &:focus-visible {
       z-index: 2;
@@ -146,7 +196,18 @@
     }
 
     &--day {
-      min-height: 5.5rem;
+      // A floor that knows the lanes. Every chip is absolutely positioned, so
+      // nothing in flow made the cell tall enough for its last lane: a third
+      // chip hung into the next week's row. `--wr-event-calendar-lanes` is the
+      // number of lanes the week row fills, set on the row and inherited through
+      // its `display: contents`.
+      min-height: max(
+        5.5rem,
+        calc(
+          1.75rem + var(--wr-event-calendar-chip-gap) + var(--wr-event-calendar-lanes, 0) *
+            (var(--wr-event-calendar-band-height) + var(--wr-event-calendar-chip-gap))
+        )
+      );
       padding: 0.25rem;
     }
 
@@ -164,22 +225,92 @@
     }
 
     &--allday {
-      min-height: calc(var(--wr-event-calendar-band-height) + 0.5rem);
-      padding: 0.125rem 0;
+      // Same rule as a day cell: the band has no ceiling on lanes, and a second
+      // all-day event used to spill over the first hour of the grid.
+      min-height: calc(
+        var(--wr-event-calendar-chip-gap) + var(--wr-event-calendar-lanes, 1) *
+          (var(--wr-event-calendar-band-height) + var(--wr-event-calendar-chip-gap))
+      );
     }
 
     &--slot {
-      height: var(--wr-event-calendar-slot-height);
-      box-shadow: inset -1px 0 0 var(--wr-event-calendar-line);
+      // A floor rather than a height, so a row that grows anyway stretches its
+      // cells with it instead of leaving their lines short.
+      min-height: var(--wr-event-calendar-slot-height);
     }
+  }
 
-    &--major {
-      box-shadow:
-        inset -1px 0 0 var(--wr-event-calendar-line),
-        inset 0 1px 0 var(--wr-event-calendar-line);
+  // ------------------------------------------------------------- grid lines
+  //
+  // One hairline per edge, and one owner per line. A cell draws the line on its
+  // inline END and its block END, and draws nothing where that edge is the
+  // frame; the time grid draws hour lines on the block START of a major row,
+  // except where a header or the all-day band already put a rule there. Logical
+  // sides throughout, so the lines follow the columns under `dir="rtl"`.
+  &__weekday,
+  &__colhead,
+  &__cell {
+    &::after {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      content: '';
+      border: 0 solid var(--wr-event-calendar-line);
     }
   }
 
+  &__weekday::after,
+  &__colhead::after {
+    border-block-end-width: 1px;
+  }
+
+  &__cell--day::after,
+  &__cell--allday::after {
+    border-inline-end-width: 1px;
+    border-block-end-width: 1px;
+  }
+
+  &__cell--slot::after {
+    border-inline-end-width: 1px;
+  }
+
+  &__cell--major::after {
+    border-block-start-width: 1px;
+  }
+
+  // The divider between the gutter and the days. The first day column draws it,
+  // in every row, because the gutter's labels are moved with a transform that
+  // would carry any line of the gutter's own up with them — it used to stop
+  // 0.5em short of the grid's bottom edge.
+  &__gutter + &__colhead::after,
+  &__gutter + &__cell::after {
+    border-inline-start-width: 1px;
+  }
+
+  // The first slot row sits directly under the header rule or the all-day rule.
+  &__row:first-child + &__row > &__cell--major::after,
+  &__row--allday + &__row > &__cell--major::after {
+    border-block-start-width: 0;
+  }
+
+  // Edges that meet the frame.
+  &__row > :last-child::after {
+    border-inline-end-width: 0;
+  }
+
+  &__row:last-child > &__cell::after {
+    border-block-end-width: 0;
+  }
+
+  // Under the focus ring, never over it. A focused cell takes `z-index: 2`, so
+  // it is a stacking context, and Chromium paints a positioned `::after` inside
+  // one AFTER the cell's own outline: the inset ring lost its outer pixel on
+  // every side the cell draws a line on. A negative z-index still paints above
+  // the cell's background, so a muted day keeps its lines.
+  &__cell:focus-visible::after {
+    z-index: -1;
+  }
+
   &__daynum {
     display: inline-flex;
     align-items: center;
@@ -207,7 +338,7 @@
     background: color-mix(in srgb, var(--wr-event-calendar-color) 18%, transparent);
     border: 0;
     border-inline-start: 3px solid var(--wr-event-calendar-color);
-    border-radius: var(--wr-border-radius-sm);
+    border-radius: var(--wr-event-calendar-chip-radius);
     transition: filter var(--wr-transition-short);
 
     &:hover {
@@ -221,19 +352,31 @@
     }
 
     &--band {
-      inset-inline-start: 0.125rem;
+      inset-inline-start: var(--wr-event-calendar-chip-inset);
+      // `offset` is where the chips start — below the day number in a month
+      // cell, at the top of the all-day band — and the first lane keeps one gap
+      // clear of it, the way every later lane keeps one clear of the chip above.
       top: calc(
-        var(--wr-event-calendar-offset) + var(--wr-event-calendar-lane) *
-          (var(--wr-event-calendar-band-height) + 0.125rem)
+        var(--wr-event-calendar-offset) + var(--wr-event-calendar-chip-gap) + var(--wr-event-calendar-lane) *
+          (var(--wr-event-calendar-band-height) + var(--wr-event-calendar-chip-gap))
       );
       // Reaching across `--span` cells: each is exactly 100% of this one,
       // because the grid has no gaps and the lines cost no layout space.
-      width: calc(var(--wr-event-calendar-span) * 100% - 0.25rem);
+      width: calc(var(--wr-event-calendar-span) * 100% - 2 * var(--wr-event-calendar-chip-inset));
       height: var(--wr-event-calendar-band-height);
       padding: 0 0.375rem;
     }
 
     &--time {
+      // The template writes the lane geometry as custom properties rather than
+      // as `inset-inline-start` / `width` / `height` directly, so the inset can
+      // be taken off here: an inline style cannot be adjusted by a stylesheet,
+      // and a chip filling its lane to the pixel covered the column line and
+      // touched its neighbour in the next lane and the event after it. `top`
+      // needs no adjustment and stays an inline `top`.
+      inset-inline-start: calc(var(--wr-event-calendar-inline-start) + var(--wr-event-calendar-chip-inset));
+      width: calc(var(--wr-event-calendar-inline-size) - 2 * var(--wr-event-calendar-chip-inset));
+      height: calc(var(--wr-event-calendar-block-size) - var(--wr-event-calendar-chip-inset));
       padding: 0.125rem 0.25rem;
       // The clock and the title share a line while there is room for both and
       // the title drops below it when there is not. `flex-direction: column`
@@ -250,6 +393,10 @@
       row-gap: 0;
       min-height: 1.25rem;
       white-space: normal;
+      // The chip's height is set from outside and never from its content, so
+      // size containment costs nothing, and it lets the title ask how many lines
+      // the chip holds (see `&-title`).
+      container: wr-event-calendar-chip / size;
     }
 
     // A segment clipped by the edge of the view loses the rounding on that side,
@@ -280,8 +427,8 @@
       // one-slot event has — so the label was clipped through its own digits.
       white-space: nowrap;
       // The muted role is calibrated against the plain surface, and the chip
-      // puts an 18% wash of the event colour under it (line ~192) — which spent
-      // the whole margin: 4.18–4.28:1 across the shipped demo colours, under AA
+      // puts an 18% wash of the event colour under it (its `background`) — which
+      // spent the whole margin: 4.18–4.28:1 across the shipped demo colours, under AA
       // in LIGHT for every one of them. Mixing toward the page's own ink is the
       // `-ink` recipe: `--wr-color-on-surface` flips per theme, so one
       // declaration darkens on a light tint and lightens on a dark one. 85% is
@@ -307,18 +454,28 @@
   // The one thing in a day cell that is NOT absolutely positioned, and it has
   // to stay that way. Its lane is `maxLanes` — one past the last chip — so
   // absolute put it at 1.75rem + 3 x 1.375rem = 5.875rem inside a cell whose
-  // floor is 5.5rem: the entire button landed in the following week's row,
+  // floor was 5.5rem: the entire button landed in the following week's row,
   // which comes later in the DOM and (correctly, per the `__cell` note above)
   // has no z-index to lose to it, so it swallowed every click. A block box in
-  // flow lands on exactly the same 5.875rem — the day-number line box is
-  // precisely the 1.75rem the chips offset by, so only the lanes have to be
-  // skipped — and makes the cell GROW to hold it instead. `min-height` on the
-  // cell is a floor, not a size; the row stretches its siblings to match.
+  // flow lands exactly where that lane would start — the day-number line box is
+  // precisely the 1.75rem the chips offset by, so only the first gap and the
+  // lanes have to be skipped — and makes the cell GROW to hold it instead.
+  // `min-height` on the cell is a floor, not a size; the row stretches its
+  // siblings to match.
+  //
+  // It is as tall as a chip. At its own 18px line its centre sat 23px below the
+  // centre of the chip above it, one pixel short of the 24px WCAG 2.5.8's
+  // spacing exception asks for. axe flagged both targets wherever the cell was
+  // narrow enough to put the two centres nearly in line.
   &__more {
     display: block;
     width: fit-content;
-    margin-top: calc(var(--wr-event-calendar-lane) * (var(--wr-event-calendar-band-height) + 0.125rem));
-    margin-inline-start: 0.125rem;
+    min-height: var(--wr-event-calendar-band-height);
+    margin-top: calc(
+      var(--wr-event-calendar-chip-gap) + var(--wr-event-calendar-lane) *
+        (var(--wr-event-calendar-band-height) + var(--wr-event-calendar-chip-gap))
+    );
+    margin-inline-start: var(--wr-event-calendar-chip-inset);
     padding: 0 0.375rem;
     font: inherit;
     font-size: var(--wr-text-xs);
@@ -354,3 +511,20 @@
     user-select: none;
   }
 }
+
+// A timed chip with room for ONE line: two of the chip's 1.2 line boxes are
+// 2.4em, and the query measures the content box. There the title stays on the
+// clock's line and ends in an ellipsis. Left to wrap, it dropped to a second
+// line that started 14.4px down a 16px content box, so a one-slot chip showed
+// the top of the title's letters and nothing else. On the docs page that
+// happened at 1280px wide, where the week columns are 118px. A chip narrower
+// than its clock plus the gap still wraps the title, because a container query
+// cannot turn off `flex-wrap` on the chip itself; at that width the clock is
+// already cut off.
+@container wr-event-calendar-chip (height < 2.4em) {
+  .wr-event-calendar__chip-title {
+    flex: 1 1 0;
+    min-width: 0;
+    white-space: nowrap;
+  }
+}

package/fesm2022/ngwr-bar-chart.mjs

@@ -1,6 +1,7 @@
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, Component } from '@angular/core';
+import { input, viewChildren, computed, ViewEncapsulation, Component } from '@angular/core';
+import { useChartTooltip } from 'ngwr/popover';
 
 /**
  * @license
@@ -35,6 +36,13 @@ class WrBarChart {
     height = input(200, { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(40, coerceNumberProperty(v, 200)) });
     /** Explicit max value. `0` = auto. @default 0 */
     max = input(0, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: (v) => Math.max(0, coerceNumberProperty(v, 0)) });
+    /**
+     * Show a tooltip with the bar's label and value on hover. Pointer only — the
+     * column's accessible name already carries both. @default true
+     */
+    tooltip = input(true, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    barEls = viewChildren('barEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barEls" }] : /* istanbul ignore next */ []));
     /**
      * A datum's value, with anything non-finite read as `0`.
      *
@@ -74,13 +82,30 @@ class WrBarChart {
         };
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    tip = useChartTooltip(this.tooltip, index => {
+        const bar = this.bars()[index];
+        const anchor = this.barEls()[index]?.nativeElement;
+        if (!bar || !anchor)
+            return null;
+        return { datum: { label: bar.label, value: String(bar.value), color: bar.color }, anchor };
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrBarChart, isStandalone: true, selector: "wr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-bar-chart" }, ngImport: i0, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\" role=\"img\" [attr.aria-label]=\"bar.name\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrBarChart, isStandalone: true, selector: "wr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, showValues: { classPropertyName: "showValues", publicName: "showValues", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-bar-chart" }, viewQueries: [{ propertyName: "barEls", predicate: ["barEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div\n      class=\"wr-bar-chart__column\"\n      role=\"img\"\n      [attr.aria-label]=\"bar.name\"\n      (mouseenter)=\"tip.enter($index)\"\n      (mouseleave)=\"tip.leave($event)\"\n    >\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div #barEl class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrBarChart, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-bar-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-bar-chart' }, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\" role=\"img\" [attr.aria-label]=\"bar.name\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n" }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }] } });
+            args: [{ selector: 'wr-bar-chart', encapsulation: ViewEncapsulation.None, host: { class: 'wr-bar-chart' }, template: "<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div\n      class=\"wr-bar-chart__column\"\n      role=\"img\"\n      [attr.aria-label]=\"bar.name\"\n      (mouseenter)=\"tip.enter($index)\"\n      (mouseleave)=\"tip.leave($event)\"\n    >\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div #barEl class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], showValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValues", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], barEls: [{ type: i0.ViewChildren, args: ['barEl', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ngwr-bar-chart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-bar-chart.mjs","sources":["../../../projects/lib/bar-chart/bar-chart.ts","../../../projects/lib/bar-chart/bar-chart.html","../../../projects/lib/bar-chart/ngwr-bar-chart.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, ViewEncapsulation, computed, input } from '@angular/core';\n\nimport type { WrBarChartDatum } from './interfaces';\n\n/**\n * Minimal vertical bar chart. Pass `[data]` — each datum becomes a bar.\n * Axis-free; for the simple \"show me a comparison\" case.\n *\n * @example\n * ```html\n * <wr-bar-chart [data]=\"[\n *   { label: 'Mon', value: 12 },\n *   { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },\n *   { label: 'Wed', value: 9 }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/bar-chart\n */\n@Component({\n  selector: 'wr-bar-chart',\n  templateUrl: './bar-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-bar-chart' },\n})\nexport class WrBarChart {\n  readonly data = input<readonly WrBarChartDatum[]>([]);\n\n  /** Default bar colour when a datum has none. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Show value labels above each bar. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /** Pixel height of the chart area. @default 200 */\n  readonly height = input(200, { transform: (v: unknown): number => Math.max(40, coerceNumberProperty(v, 200)) });\n\n  /** Explicit max value. `0` = auto. @default 0 */\n  readonly max = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /**\n   * A datum's value, with anything non-finite read as `0`.\n   *\n   * One `NaN` used to take out the whole chart rather than its own bar:\n   * `Math.max(...values)` is `NaN` as soon as one value is, so the scale fell\n   * back to `1` and every OTHER bar was asked for a height of `value * 100`%.\n   * The bad bar also printed the literal text `NaN` above itself.\n   */\n  private static value(raw: number): number {\n    return Number.isFinite(raw) ? raw : 0;\n  }\n\n  protected readonly resolvedMax = computed(() => {\n    const explicit = this.max();\n    if (explicit > 0) return explicit;\n    const data = this.data();\n    if (data.length === 0) return 1;\n    const top = Math.max(...data.map(d => WrBarChart.value(d.value)), 0);\n    return top > 0 ? top : 1;\n  });\n\n  protected readonly bars = computed(() =>\n    this.data().map(d => {\n      const value = WrBarChart.value(d.value);\n      return {\n        label: d.label,\n        value,\n        color: d.color ?? this.color(),\n        heightPercent: (Math.max(0, value) / this.resolvedMax()) * 100,\n        /**\n         * The bar's accessible name. The label and the value sit in separate\n         * rows, so a screen reader read every number and then every label with\n         * nothing tying the two together — and with `showValues` off the\n         * numbers were not in the accessible tree at all.\n         */\n        name: `${d.label}: ${value}`,\n      };\n    })\n  );\n}\n\nexport type { WrBarChartDatum } from './interfaces';\n","<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div class=\"wr-bar-chart__column\" role=\"img\" [attr.aria-label]=\"bar.name\">\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-bar-chart.mjs","sources":["../../../projects/lib/bar-chart/bar-chart.ts","../../../projects/lib/bar-chart/bar-chart.html","../../../projects/lib/bar-chart/ngwr-bar-chart.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, type ElementRef, ViewEncapsulation, computed, input, viewChildren } from '@angular/core';\n\nimport { useChartTooltip } from 'ngwr/popover';\n\nimport type { WrBarChartDatum } from './interfaces';\n\n/**\n * Minimal vertical bar chart. Pass `[data]` — each datum becomes a bar.\n * Axis-free; for the simple \"show me a comparison\" case.\n *\n * @example\n * ```html\n * <wr-bar-chart [data]=\"[\n *   { label: 'Mon', value: 12 },\n *   { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },\n *   { label: 'Wed', value: 9 }\n * ]\" />\n * ```\n *\n * @see https://ngwr.dev/reference/components/bar-chart\n */\n@Component({\n  selector: 'wr-bar-chart',\n  templateUrl: './bar-chart.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-bar-chart' },\n})\nexport class WrBarChart {\n  readonly data = input<readonly WrBarChartDatum[]>([]);\n\n  /** Default bar colour when a datum has none. @default primary */\n  readonly color = input<string>('var(--wr-color-primary)');\n\n  /** Show value labels above each bar. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /** Pixel height of the chart area. @default 200 */\n  readonly height = input(200, { transform: (v: unknown): number => Math.max(40, coerceNumberProperty(v, 200)) });\n\n  /** Explicit max value. `0` = auto. @default 0 */\n  readonly max = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /**\n   * Show a tooltip with the bar's label and value on hover. Pointer only — the\n   * column's accessible name already carries both. @default true\n   */\n  readonly tooltip = input(true, { transform: coerceBooleanProperty });\n\n  private readonly barEls = viewChildren<ElementRef<HTMLElement>>('barEl');\n\n  /**\n   * A datum's value, with anything non-finite read as `0`.\n   *\n   * One `NaN` used to take out the whole chart rather than its own bar:\n   * `Math.max(...values)` is `NaN` as soon as one value is, so the scale fell\n   * back to `1` and every OTHER bar was asked for a height of `value * 100`%.\n   * The bad bar also printed the literal text `NaN` above itself.\n   */\n  private static value(raw: number): number {\n    return Number.isFinite(raw) ? raw : 0;\n  }\n\n  protected readonly resolvedMax = computed(() => {\n    const explicit = this.max();\n    if (explicit > 0) return explicit;\n    const data = this.data();\n    if (data.length === 0) return 1;\n    const top = Math.max(...data.map(d => WrBarChart.value(d.value)), 0);\n    return top > 0 ? top : 1;\n  });\n\n  protected readonly bars = computed(() =>\n    this.data().map(d => {\n      const value = WrBarChart.value(d.value);\n      return {\n        label: d.label,\n        value,\n        color: d.color ?? this.color(),\n        heightPercent: (Math.max(0, value) / this.resolvedMax()) * 100,\n        /**\n         * The bar's accessible name. The label and the value sit in separate\n         * rows, so a screen reader read every number and then every label with\n         * nothing tying the two together — and with `showValues` off the\n         * numbers were not in the accessible tree at all.\n         */\n        name: `${d.label}: ${value}`,\n      };\n    })\n  );\n\n  /**\n   * One tooltip for the whole chart, with the value exactly as it is printed above\n   * the bar. It points at the top edge of the BAR — above it, below it when there is\n   * no room — rather than at the column, which is the full height of the plot and\n   * would put the chip above every bar alike. A bar with nothing to draw (zero, a\n   * negative value) keeps its 1px floor on the baseline, so its chip points there.\n   *\n   * The bar is the anchor element itself, so an open chip follows it through the\n   * height transition a data change starts.\n   */\n  protected readonly tip = useChartTooltip(this.tooltip, index => {\n    const bar = this.bars()[index];\n    const anchor = this.barEls()[index]?.nativeElement;\n    if (!bar || !anchor) return null;\n    return { datum: { label: bar.label, value: String(bar.value), color: bar.color }, anchor };\n  });\n}\n\nexport type { WrBarChartDatum } from './interfaces';\n","<div class=\"wr-bar-chart__plot\" [style.height.px]=\"height()\">\n  @for (bar of bars(); track $index) {\n    <div\n      class=\"wr-bar-chart__column\"\n      role=\"img\"\n      [attr.aria-label]=\"bar.name\"\n      (mouseenter)=\"tip.enter($index)\"\n      (mouseleave)=\"tip.leave($event)\"\n    >\n      @if (showValues()) {\n        <span class=\"wr-bar-chart__value\">{{ bar.value }}</span>\n      }\n      <div #barEl class=\"wr-bar-chart__bar\" [style.height.%]=\"bar.heightPercent\" [style.background]=\"bar.color\"></div>\n    </div>\n  }\n</div>\n<!-- Named on the column above, so the visible label row is decoration here. -->\n<div class=\"wr-bar-chart__labels\" aria-hidden=\"true\">\n  @for (bar of bars(); track $index) {\n    <span class=\"wr-bar-chart__label\">{{ bar.label }}</span>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-calendar-heatmap.mjs

@@ -1,8 +1,9 @@
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { input, inject, computed, ViewEncapsulation, Component } from '@angular/core';
+import { input, viewChild, inject, computed, ViewEncapsulation, Component } from '@angular/core';
 import { WR_DATE_LOCALE } from 'ngwr/date';
 import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
+import { useChartTooltip } from 'ngwr/popover';
 
 /**
  * @license
@@ -95,6 +96,14 @@ class WrCalendarHeatmap {
     ...(ngDevMode ? [{ debugName: "emptyColor" }] : /* istanbul ignore next */ []));
     /** Show the weekday + month labels around the grid. @default true */
     showLabels = input(true, { ...(ngDevMode ? { debugName: "showLabels" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * 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
+     */
+    tooltip = input(true, { ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    daysEl = viewChild('days', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "daysEl" }] : /* istanbul ignore next */ []));
     locale = inject(WR_DATE_LOCALE);
     /**
      * Weekday names from the locale rather than a hard-coded English list — the row order is
@@ -184,6 +193,52 @@ class WrCalendarHeatmap {
         return cells.length === 0 ? 0 : cells[cells.length - 1].week + 1;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "columnCount" }] : /* istanbul ignore next */ []));
+    /** Each day's position in `cells()`, for the square the pointer lands on. */
+    indexByIso = computed(() => new Map(this.cells().map((cell, index) => [cell.iso, index])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indexByIso" }] : /* istanbul ignore next */ []));
+    /**
+     * 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.
+     */
+    tip = useChartTooltip(this.tooltip, index => {
+        const cell = this.cells()[index];
+        // The squares are the container's only children, drawn in `cells()` order.
+        const square = cell ? this.daysEl()?.nativeElement.children.item(index) : null;
+        if (!cell || !(square instanceof HTMLElement))
+            return null;
+        const rect = square.getBoundingClientRect();
+        const width = square.offsetWidth;
+        const height = square.offsetHeight;
+        return {
+            datum: { value: this.cellTitle(cell) },
+            anchor: {
+                x: (rect.left + rect.right - width) / 2,
+                y: (rect.top + rect.bottom - height) / 2,
+                width,
+                height,
+            },
+        };
+    });
+    /**
+     * 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.
+     */
+    onCellsPointer(event) {
+        const iso = event.target?.closest('.wr-calendar-heatmap__cell')?.dataset['date'];
+        const index = iso === undefined ? undefined : this.indexByIso().get(iso);
+        if (index === undefined)
+            this.tip.leave(event);
+        else
+            this.tip.enter(index);
+    }
     colorFor(intensity) {
         if (intensity === 0)
             return this.emptyColor();
@@ -202,12 +257,12 @@ class WrCalendarHeatmap {
         return 1;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrCalendarHeatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrCalendarHeatmap, isStandalone: true, selector: "wr-calendar-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, weeks: { classPropertyName: "weeks", publicName: "weeks", isSignal: true, isRequired: false, transformFunction: null }, cellSize: { classPropertyName: "cellSize", publicName: "cellSize", isSignal: true, isRequired: false, transformFunction: null }, cellGap: { classPropertyName: "cellGap", publicName: "cellGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyColor: { classPropertyName: "emptyColor", publicName: "emptyColor", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-calendar-heatmap" }, ngImport: i0, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"wr-calendar-heatmap__cells\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [title]=\"cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: WrCalendarHeatmap, isStandalone: true, selector: "wr-calendar-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null }, weeks: { classPropertyName: "weeks", publicName: "weeks", isSignal: true, isRequired: false, transformFunction: null }, cellSize: { classPropertyName: "cellSize", publicName: "cellSize", isSignal: true, isRequired: false, transformFunction: null }, cellGap: { classPropertyName: "cellGap", publicName: "cellGap", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, emptyColor: { classPropertyName: "emptyColor", publicName: "emptyColor", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-calendar-heatmap" }, viewQueries: [{ propertyName: "daysEl", first: true, predicate: ["days"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div #days class=\"wr-calendar-heatmap__cells\" (mousemove)=\"onCellsPointer($event)\" (mouseleave)=\"tip.leave($event)\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [attr.title]=\"tooltip() ? null : cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrCalendarHeatmap, decorators: [{
             type: Component,
-            args: [{ selector: 'wr-calendar-heatmap', encapsulation: ViewEncapsulation.None, host: { class: 'wr-calendar-heatmap' }, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div class=\"wr-calendar-heatmap__cells\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [title]=\"cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n" }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], weeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "weeks", required: false }] }], cellSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellSize", required: false }] }], cellGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emptyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyColor", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }] } });
+            args: [{ selector: 'wr-calendar-heatmap', encapsulation: ViewEncapsulation.None, host: { class: 'wr-calendar-heatmap' }, template: "<div\n  class=\"wr-calendar-heatmap__grid\"\n  role=\"img\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [style.--wr-heatmap-cell-size.px]=\"cellSize()\"\n  [style.--wr-heatmap-cell-gap.px]=\"cellGap()\"\n  [style.--wr-heatmap-columns]=\"columnCount()\"\n>\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__weekdays\">\n      @for (label of weekdayLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__weekday\">{{ label }}</span>\n      }\n    </div>\n  }\n\n  <div #days class=\"wr-calendar-heatmap__cells\" (mousemove)=\"onCellsPointer($event)\" (mouseleave)=\"tip.leave($event)\">\n    @for (cell of cells(); track cell.iso) {\n      <span\n        class=\"wr-calendar-heatmap__cell\"\n        [style.background]=\"colorFor(cell.intensity)\"\n        [style.opacity]=\"opacityFor(cell.intensity)\"\n        [style.grid-column]=\"cell.week + 1\"\n        [style.grid-row]=\"cell.day + 1\"\n        [attr.title]=\"tooltip() ? null : cellTitle(cell)\"\n        [attr.data-date]=\"cell.iso\"\n        [attr.data-value]=\"cell.value\"\n        aria-hidden=\"true\"\n      ></span>\n    }\n  </div>\n\n  @if (showLabels()) {\n    <div class=\"wr-calendar-heatmap__months\">\n      @for (m of monthLabels(); track $index) {\n        <span class=\"wr-calendar-heatmap__month\" [style.grid-column]=\"m.week + 1\">{{ m.label }}</span>\n      }\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], endDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "endDate", required: false }] }], weeks: [{ type: i0.Input, args: [{ isSignal: true, alias: "weeks", required: false }] }], cellSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellSize", required: false }] }], cellGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellGap", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], emptyColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyColor", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], daysEl: [{ type: i0.ViewChild, args: ['days', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.