ngwr 15.4.0 → 15.6.0

package/README.md

@@ -62,10 +62,9 @@ reactive forms bind too, with limits the
 - Angular CDK [test harnesses](https://ngwr.dev/guides/testing) for the form
   controls and overlays.
 
-Browse the [components](https://ngwr.dev/reference/components),
-[charts](https://ngwr.dev/charts) and [bits](https://ngwr.dev/bits) (animations
-and visual effects) with live demos. Directives, pipes, services and validators
-are in the [reference](https://ngwr.dev/reference).
+Browse the [components](https://ngwr.dev/reference/components) and
+[charts](https://ngwr.dev/charts) with live demos. Directives, pipes, services
+and validators are in the [reference](https://ngwr.dev/reference).
 
 ## Installation
 

package/affix/styles/_index.scss

@@ -1,3 +1,5 @@
+@use '../../theme/styles/loaded' as theme;
+@include theme.loaded('affix');
 // Almost nothing — the directive does the work inline. This layer owns the
 // stacking order below and the containing block of a flex or grid parent, and
 // otherwise only exposes the class hook a consumer styles the "stuck" state with.

package/alert/styles/_index.scss

@@ -13,6 +13,7 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../icon/styles' as icon-styles; // WrIcon
+@include theme.loaded('alert');
 
 $alert-colors: (
   info: info,
@@ -65,6 +66,8 @@ $alert-colors: (
   --wr-alert-message-line-height: var(--wr-text-sm-leading);
   --wr-alert-close-padding: var(--wr-space-xs);
   --wr-alert-close-radius: var(--wr-border-radius-sm);
+  --wr-alert-actions-gap: var(--wr-space-sm);
+  --wr-alert-actions-margin-top: var(--wr-space-xs);
 
   background: var(--wr-alert-bg);
   border: 1px solid var(--wr-alert-border);
@@ -123,6 +126,21 @@ $alert-colors: (
     display: none;
   }
 
+  // `[wrAlertActions]`: buttons under the message, inside the body column, so
+  // the close button beside the body never sits over them. Wraps on a narrow
+  // screen. Hidden while empty, so an alert without the slot keeps its gap.
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--wr-alert-actions-gap);
+    margin-top: var(--wr-alert-actions-margin-top);
+
+    &:empty {
+      display: none;
+    }
+  }
+
   &__close {
     flex: 0 0 auto;
     appearance: none;

package/anchor/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('anchor');
 
 // One level of indent: the host's own, and again for a nested list. The active
 // bar reaches back across every indent its link sits behind, so the two are one

package/avatar/styles/_index.scss

@@ -13,6 +13,7 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../spinner/styles' as spinner-styles; // WrSpinner
+@include theme.loaded('avatar');
 
 .wr-avatar {
   // Defaults — `shape="rounded"` (the default) gets the soft rounded
@@ -28,6 +29,11 @@
   // a circle from 16px to 40px; at 0.4 the semibold `WW` in a 16px circle was
   // down to 0.6px.
   --wr-avatar-initials-scale: 0.375;
+  // The box behind the fallback. Transparent at rest, so an avatar that sets no
+  // `tint` paints as it always has; a `--tint-*` modifier below sets it.
+  --wr-avatar-bg: transparent;
+  --wr-avatar-initials-color: var(--wr-color-on-surface);
+  --wr-avatar-initials-weight: var(--wr-font-weight-semibold);
 
   display: inline-flex;
   align-items: center;
@@ -35,6 +41,7 @@
   position: relative;
   overflow: hidden;
   border-radius: var(--wr-avatar-radius);
+  background-color: var(--wr-avatar-bg);
   box-shadow: inset 0 0 0 1px var(--wr-avatar-ring);
 
   &--square {
@@ -57,6 +64,17 @@
     --wr-avatar-ring: transparent;
   }
 
+  // `tint`: an intent's `-soft` fill under its `-ink`, the pair the theme
+  // calibrates to 5:1 in both schemes and lifts to 7:1 under
+  // `prefers-contrast: more`. Set through the hooks, so a consumer's own
+  // `--wr-avatar-bg` on the element still wins.
+  @each $name in theme.$colors {
+    &--tint-#{$name} {
+      --wr-avatar-bg: var(--wr-color-#{$name}-soft);
+      --wr-avatar-initials-color: var(--wr-color-#{$name}-ink);
+    }
+  }
+
   // The projected fallback. `display: contents` keeps whatever is projected a
   // flex item of the host, laid out by the host's centring (and by any flex
   // setting a consumer put on the host) exactly as before this wrapper existed.
@@ -99,15 +117,31 @@
   // or attribute selector, loaded before this stylesheet or after it — still
   // wins. A rule inside a cascade layer does not (Tailwind v4 ships its
   // utilities in one): unlayered CSS beats layered CSS whatever the selector.
-  :where(&:has(> .wr-avatar__content:not(:empty))) {
+  :where(&:has(> .wr-avatar__content:not(:empty), > .wr-avatar__initials)) {
     font-size: min(1em, var(--wr-avatar-size) * var(--wr-avatar-initials-scale));
   }
 
+  // The initials `name` yields. Projected content wins over them, through the
+  // same `:empty` test that drops the spinner; otherwise they are the fallback,
+  // hidden and clipped once the image has loaded exactly as the projected one
+  // is below. Inert for the reason `__content` is.
+  &__initials {
+    color: var(--wr-avatar-initials-color);
+    font-weight: var(--wr-avatar-initials-weight);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  &__content:not(:empty) ~ &__initials {
+    display: none;
+  }
+
   // Once loaded, how the fallback leaves the paint follows whether the image is
   // NAMED, which the template states as `aria-hidden` on the wrapper. Named, the
   // initials are already out of the accessibility tree, so `visibility` (which
   // bare text nodes inherit) takes them out of the paint as well.
-  &--loaded &__content[aria-hidden='true'] {
+  &--loaded &__content[aria-hidden='true'],
+  &--loaded &__initials[aria-hidden='true'] {
     visibility: hidden;
     // Held until the image's own fade has finished, so the photo crossfades in
     // over the initials instead of over an empty box.
@@ -118,7 +152,8 @@
   // person, so they are clipped rather than hidden and stay announced. A clip
   // needs a box, hence the switch from `contents`; the host has a fixed size,
   // so taking them out of flow moves nothing around it.
-  &--loaded &__content:not([aria-hidden='true']) {
+  &--loaded &__content:not([aria-hidden='true']),
+  &--loaded &__initials:not([aria-hidden='true']) {
     display: block;
     position: absolute;
     width: 1px;
@@ -163,6 +198,10 @@
     display: none;
   }
 
+  &__initials ~ &__alt {
+    display: none;
+  }
+
   &__spin.wr-spinner {
     position: absolute;
     // A loading indicator is a status GRAPHIC, which 1.4.11 holds to 3:1: the
@@ -177,7 +216,8 @@
   // neither reads. The initials are placeholder enough while the photo loads.
   // `:empty` ignores comment nodes, so a projected `@if` that renders nothing
   // still gets the spinner.
-  &__content:not(:empty) ~ &__spin {
+  &__content:not(:empty) ~ &__spin,
+  &__initials ~ &__spin {
     display: none;
   }
 }

package/back-top/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('back-top');
 
 .wr-back-top {
   position: fixed;

package/badge/styles/_index.scss

@@ -19,6 +19,7 @@
 // these by hand still emits it once.
 @use '../../icon/styles' as icon-styles; // WrIcon
 @use '../../spinner/styles' as spinner-styles; // WrSpinner
+@include theme.loaded('badge');
 
 .wr-badge {
   display: inline-flex;

package/breadcrumbs/styles/_index.scss

@@ -27,3 +27,4 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../icon/styles' as icon-styles; // WrIcon
+@include styles.loaded('breadcrumbs');

package/burger/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('burger');
 
 .wr-burger {
   // Resting (hamburger) dash geometry. Each line is one SVG <path>; the

package/button/styles/_index.scss

@@ -14,6 +14,7 @@
 // these by hand still emits it once.
 @use '../../icon/styles' as icon-styles; // WrIcon
 @use '../../spinner/styles' as spinner-styles; // WrSpinner
+@include theme.loaded('button');
 
 .wr-btn {
   display: inline-flex;

package/calendar/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('calendar');
 
 .wr-calendar {
   --wr-calendar-width: 17rem;

package/card/styles/_index.scss

@@ -13,3 +13,4 @@
 // instead, so it carries this component's own CSS and nothing else.
 @use '../../theme/styles';
 @forward 'rules';
+@include styles.loaded('card');

package/carousel/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('carousel');
 
 .wr-carousel {
   --wr-carousel-font-family: var(--wr-font-family-base);

package/cascader/styles/_index.scss

@@ -13,3 +13,4 @@
 // instead, so it carries this component's own CSS and nothing else.
 @use '../../theme/styles';
 @forward 'rules';
+@include styles.loaded('cascader');

package/charts/bar-chart/styles/_index.scss

@@ -7,6 +7,7 @@
 // With `dataTable`, the figures render as a `<wr-chart-table>` beside the plot, which
 // its own sheet clips out of sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/bar-chart');
 
 // The gap between two categories standing up: the plot's gap, but never more than a
 // quarter of the track shared out among the gaps. A fixed gap took the whole track once

package/charts/boxplot-chart/styles/_index.scss

@@ -5,6 +5,7 @@
 // the figures render as a `<wr-chart-table>` beside the plot, which its own sheet clips
 // out of sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/boxplot-chart');
 
 .wr-boxplot-chart {
   --wr-boxplot-chart-font-family: var(--wr-font-family-base);

package/charts/bullet-chart/styles/_index.scss

@@ -1,5 +1,6 @@
 @use '../../../theme/styles' as theme;
 @use '../../../popover/styles' as popover-styles; // the `.wr-tooltip` chip the hover tooltip renders into
+@include theme.loaded('charts/bullet-chart');
 
 .wr-bullet-chart {
   --wr-bullet-chart-font-family: var(--wr-font-family-base);

package/charts/calendar-heatmap/styles/_index.scss

@@ -5,6 +5,7 @@
 // figures render as a `<wr-chart-table>` beside the grid, which its own sheet clips out of
 // sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/calendar-heatmap');
 
 .wr-calendar-heatmap {
   --wr-calendar-heatmap-font-family: var(--wr-font-family-base);

package/charts/candlestick-chart/styles/_index.scss

@@ -5,6 +5,7 @@
 // the figures render as a `<wr-chart-table>` beside the plot, which its own sheet clips
 // out of sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/candlestick-chart');
 
 // The lengths inside a candle, each against the candle's own height as every percentage
 // inside it is: the upper wick's share and the lower wick's, as the component writes

package/charts/chart-legend/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../../theme/styles' as theme;
+@include theme.loaded('charts/chart-legend');
 
 // The hooks, and the placement a chart decides for itself, at zero specificity: a chart
 // that draws its legend with this list puts it on its own `__legend` element and sets

package/charts/donut-chart/styles/_index.scss

@@ -4,6 +4,7 @@
 // Styles for the entry points this component's own markup renders. The legend is a
 // `ul[wr-chart-legend]`, so `@use 'ngwr/charts/donut-chart'` alone draws it styled.
 @use '../../chart-legend/styles' as chart-legend-styles; // WrChartLegend
+@include theme.loaded('charts/donut-chart');
 
 .wr-donut-chart {
   --wr-donut-chart-gap: var(--wr-space-lg);

package/charts/funnel-chart/styles/_index.scss

@@ -5,6 +5,7 @@
 // figures render as a `<wr-chart-table>` beside the stages, which its own sheet clips out
 // of sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/funnel-chart');
 
 .wr-funnel-chart {
   --wr-funnel-chart-font-family: var(--wr-font-family-base);

package/charts/gauge/styles/_index.scss

@@ -1,5 +1,6 @@
 @use '../../../theme/styles' as theme;
 @use '../../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
+@include theme.loaded('charts/gauge');
 
 .wr-gauge {
   --wr-gauge-font-family: var(--wr-font-family-base);

package/charts/heatmap-chart/styles/_index.scss

@@ -5,6 +5,7 @@
 // figures render as a `<wr-chart-table>` beside the matrix, which its own sheet clips out
 // of sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/heatmap-chart');
 
 // A level's paint: the scale's colour (`--wr-heatmap-chart-scale-color`, which the component
 // writes from its `color` input) mixed toward the surface, by the level's place on the scale

package/charts/line-chart/styles/_index.scss

@@ -6,6 +6,7 @@
 // With `dataTable`, the figures render as a `<wr-chart-table>` beside the plot, which
 // its own sheet clips out of sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/line-chart');
 
 .wr-line-chart {
   --wr-line-chart-font-family: var(--wr-font-family-base);

package/charts/meter-group/styles/_index.scss

@@ -4,6 +4,7 @@
 // Styles for the entry points this component's own markup renders. The legend is a
 // `ul[wr-chart-legend]`, so `@use 'ngwr/charts/meter-group'` alone draws it styled.
 @use '../../chart-legend/styles' as chart-legend-styles; // WrChartLegend
+@include theme.loaded('charts/meter-group');
 
 .wr-meter-group {
   --wr-meter-group-gap: var(--wr-space-sm);

package/charts/radar-chart/styles/_index.scss

@@ -7,6 +7,7 @@
 // With `dataTable`, the figures render as a `<wr-chart-table>` beside the drawing, which
 // its own sheet clips out of sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/radar-chart');
 
 .wr-radar-chart {
   --wr-radar-chart-font-family: var(--wr-font-family-base);

package/charts/scatter-chart/styles/_index.scss

@@ -7,6 +7,7 @@
 // With `dataTable`, the figures render as a `<wr-chart-table>` beside the plot, which
 // its own sheet clips out of sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/scatter-chart');
 
 .wr-scatter-chart {
   --wr-scatter-chart-font-family: var(--wr-font-family-base);

package/charts/sparkline/styles/_index.scss

@@ -1,4 +1,6 @@
 @use '../../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
+@use '../../../theme/styles/loaded' as theme;
+@include theme.loaded('charts/sparkline');
 
 .wr-sparkline {
   // How much of the line's colour the `showArea` fill takes, and the ring round the hover

package/charts/treemap-chart/styles/_index.scss

@@ -5,6 +5,7 @@
 // figures render as a `<wr-chart-table>` beside the drawing, which its own sheet clips
 // out of sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/treemap-chart');
 
 .wr-treemap-chart {
   --wr-treemap-chart-font-family: var(--wr-font-family-base);

package/charts/waterfall-chart/styles/_index.scss

@@ -5,6 +5,7 @@
 // figures render as a `<wr-chart-table>` beside the plot, which its own sheet clips out of
 // sight.
 @use '../../core/styles' as core-styles; // WrChartTable
+@include theme.loaded('charts/waterfall-chart');
 
 .wr-waterfall-chart {
   --wr-waterfall-chart-font-family: var(--wr-font-family-base);

package/checkbox/styles/_index.scss

@@ -13,6 +13,7 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../icon/styles' as icon-styles; // WrIcon
+@include theme.loaded('checkbox');
 
 .wr-checkbox {
   --wr-checkbox-size: 1.125rem; // md box (18px)

package/collapse/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@include theme.loaded('collapse');
 
 .wr-collapse {
   --wr-collapse-bg: var(--wr-color-surface);

package/color-picker/styles/_index.scss

@@ -13,6 +13,7 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../segmented/styles' as segmented-styles; // WrSegmented
+@include theme.loaded('color-picker');
 
 .wr-color-picker {
   --wr-color-picker-width: 17rem;

package/command-palette/styles/_index.scss

@@ -13,6 +13,7 @@
 // Sass deduplicates `@use` within a compilation, so an app that also loads one of
 // these by hand still emits it once.
 @use '../../icon/styles' as icon-styles; // WrIcon
+@include theme.loaded('command-palette');
 
 .wr-command-palette {
   // The top inset is the modal's own drop from the viewport edge, not a step on