@eagami/ui 5.14.0 → 5.14.1

package/README.md

@@ -19,7 +19,7 @@
 
 ## Why Eagami UI
 
-Angular teams usually reach for [Angular Material](https://material.angular.io), [PrimeNG](https://primeng.org), or a Tailwind copy-paste kit like [Spartan](https://spartan.ng). Eagami UI is different where it counts:
+Angular teams usually reach for [Angular Material](https://material.angular.dev), [PrimeNG](https://primeng.org), or a Tailwind copy-paste kit like [Spartan](https://spartan.ng). Eagami UI is different where it counts:
 
 - **Themes to your brand.** Give it one color per role and it generates a full, accessibility-checked palette; every other style is a CSS variable you can override (see [design tokens](https://eagami.com/ui/design-tokens)). Light and dark are built in and follow the system preference.
 - **Lightweight.** One runtime dependency (`tslib`), no CSS framework, and standalone side-effect-free components, so your app bundles only what it imports (the whole library, every component and icon, is ~260 KB gzipped).
@@ -147,4 +147,4 @@ Eagami UI follows [Semantic Versioning](https://semver.org). Breaking changes sh
 | Rendering | Browser, SSR / prerender (Angular Universal), hydration |
 | Browsers | Last 2 stable versions of Chrome, Edge, Firefox (plus current ESR), Safari |
 
-> **Upgrading from v0.x?** See [MIGRATION.md](MIGRATION.md).
+> **Upgrading across a major version?** See [MIGRATION.md](MIGRATION.md).

package/fesm2022/eagami-ui.mjs

@@ -7851,9 +7851,9 @@ function parseRgbFunc(value) {
     if (parts.length < 3) {
         return null;
     }
-    const r = clampByte(parseFloat(parts[0]));
-    const g = clampByte(parseFloat(parts[1]));
-    const b = clampByte(parseFloat(parts[2]));
+    const r = parseByte(parts[0]);
+    const g = parseByte(parts[1]);
+    const b = parseByte(parts[2]);
     const a = parts[3] !== undefined ? clampAlpha(parts[3]) : 1;
     if ([r, g, b].some(Number.isNaN)) {
         return null;
@@ -7902,7 +7902,12 @@ function parseViaCanvas(value) {
     const data = ctx.getImageData(0, 0, 1, 1).data;
     return { r: data[0], g: data[1], b: data[2], a: data[3] / 255 };
 }
-function hslToRgb(h, s, l) {
+function hslToRgb(hue, sat, lum) {
+    // `sectorToRgb` assumes a non-negative sector and in-range channels; an out-of-range
+    // `hsl()` string would otherwise yield negative or >255 components
+    const h = ((hue % 360) + 360) % 360;
+    const s = clamp01(sat);
+    const l = clamp01(lum);
     const c = (1 - Math.abs(2 * l - 1)) * s;
     const hh = (h / 60) % 6;
     const x = c * (1 - Math.abs((hh % 2) - 1));
@@ -7914,6 +7919,10 @@ function hslToRgb(h, s, l) {
         b: Math.round((b + m) * 255),
     };
 }
+function parseByte(value) {
+    const n = parseFloat(value);
+    return clampByte(value.endsWith('%') ? (n / 100) * 255 : n);
+}
 function clampByte(n) {
     return Math.max(0, Math.min(255, Math.round(n)));
 }
@@ -8940,6 +8949,7 @@ class DatePickerComponent {
         else {
             this.viewMonth.set(month - 1);
         }
+        this.pullFocusIntoView();
     }
     goToNextMonth() {
         const month = this.viewMonth();
@@ -8950,12 +8960,28 @@ class DatePickerComponent {
         else {
             this.viewMonth.set(month + 1);
         }
+        this.pullFocusIntoView();
     }
     goToPrevYear() {
         this.viewYear.update(y => y - 1);
+        this.pullFocusIntoView();
     }
     goToNextYear() {
         this.viewYear.update(y => y + 1);
+        this.pullFocusIntoView();
+    }
+    /**
+     * Moves the roving date into the month now on screen, keeping the day where
+     * the month is long enough. Without this the only tabbable day cell stays in
+     * the month the user navigated away from, so inside the focus-trapped dialog
+     * no day is reachable and the next arrow key snaps the view back.
+     */
+    pullFocusIntoView() {
+        const year = this.viewYear();
+        const month = this.viewMonth();
+        const day = this.focusedDate()?.getDate() ?? 1;
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        this.focusedDate.set(new Date(year, month, Math.min(day, daysInMonth)));
     }
     goToToday() {
         const today = this.startOfDay(new Date());
@@ -9097,9 +9123,10 @@ class DatePickerComponent {
         return result;
     }
     addMonths(date, months) {
-        const result = new Date(date);
-        result.setMonth(date.getMonth() + months);
-        return result;
+        // Clamping to the target month's length keeps the step at exactly one
+        // month; a bare setMonth overflows short months into the one after
+        const daysInTarget = new Date(date.getFullYear(), date.getMonth() + months + 1, 0).getDate();
+        return new Date(date.getFullYear(), date.getMonth() + months, Math.min(date.getDate(), daysInTarget));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DatePickerComponent, isStandalone: true, selector: "ea-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "errorMsg", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
@@ -9506,6 +9533,12 @@ class DrawerComponent {
                 const ease = animation === 'linear' ? 'var(--ease-linear)' : 'var(--ease-out)';
                 target.style.transition = `padding var(--duration-slower) ${ease}`;
             }
+            // A target swap while open has to release the previous element too, or its
+            // offset sticks around with nothing left to clear it
+            if (this.pushedTarget && this.pushedTarget !== target) {
+                this.clearPushProperties(this.pushedTarget);
+                this.pushedTarget.style.removeProperty('transition');
+            }
             // Clear every side first so a position change never stacks two offsets
             this.clearPushProperties(target);
             target.style.setProperty(PUSH_PROPERTY[position], `${size}px`);