@eagami/ui 5.52.0 → 5.53.0

package/README.md

@@ -20,11 +20,15 @@
 
 ## Why Eagami UI
 
-- **THEMES TO YOUR BRAND.** Give it one color per role and it generates a full, contrast-checked palette.
-- **LIGHTWEIGHT.** No runtime dependencies, no CSS framework, and standalone side-effect-free components, so your app bundles only what it imports.
-- **ACCESSIBLE AND LOCALIZED.** Every component meets WCAG 2.2 AA with full keyboard support and its own axe-core test suite. Built-in text ships in 15 languages you can switch at runtime.
-- **YOURS TO OWN.** Plain Angular and CSS with no lock-in: read, copy, or fork any component like the rest of your app.
-- **MODERN ANGULAR.** Signals and native control flow throughout, with SSR-safe rendering, prerendering, and hydration.
+**Themes to your brand.** Give it one color per role and it generates a full, contrast-checked palette.
+
+**Lightweight.** No runtime dependencies, no CSS framework, and standalone side-effect-free components, so your app bundles only what it imports.
+
+**Accessible and localized.** Every component meets WCAG 2.2 AA with full keyboard support and its own axe-core test suite. Built-in text ships in 15 languages you can switch at runtime.
+
+**Yours to own.** Plain Angular and CSS with no lock-in: read, copy, or fork any component like the rest of your app.
+
+**Modern Angular.** Signals and native control flow throughout, with SSR-safe rendering, prerendering, and hydration.
 
 ## Install
 

package/fesm2022/eagami-ui.mjs

@@ -3653,6 +3653,7 @@ var AccordionComponent = class AccordionComponent {
 	multi = input(false, ...ngDevMode ? [{ debugName: "multi" }] : 	/* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	headingLevel = input(3, ...ngDevMode ? [{ debugName: "headingLevel" }] : 	/* istanbul ignore next */ []);
+	highlightExpanded = input(false, ...ngDevMode ? [{ debugName: "highlightExpanded" }] : 	/* istanbul ignore next */ []);
 	expandedItems = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expandedItems" }] : 	/* istanbul ignore next */ []);
 	registeredItems = signal([], ...ngDevMode ? [{ debugName: "registeredItems" }] : 	/* istanbul ignore next */ []);
 	constructor() {
@@ -3718,6 +3719,13 @@ var AccordionComponent = class AccordionComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			highlightExpanded: {
+				classPropertyName: "highlightExpanded",
+				publicName: "highlightExpanded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		ngImport: i0,
@@ -3766,6 +3774,14 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "headingLevel",
 				required: false
 			}]
+		}],
+		highlightExpanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highlightExpanded",
+				required: false
+			}]
 		}]
 	}
 });
@@ -3923,6 +3939,7 @@ var AccordionItemComponent = class AccordionItemComponent {
 	id = input(uniqueId("ea-accordion-item"), ...ngDevMode ? [{ debugName: "id" }] : 	/* istanbul ignore next */ []);
 	isExpanded = computed(() => this.accordion.isExpanded(this.value()), ...ngDevMode ? [{ debugName: "isExpanded" }] : 	/* istanbul ignore next */ []);
 	headingLevel = computed(() => this.accordion.headingLevel(), ...ngDevMode ? [{ debugName: "headingLevel" }] : 	/* istanbul ignore next */ []);
+	isHighlighted = computed(() => this.accordion.highlightExpanded() && this.isExpanded(), ...ngDevMode ? [{ debugName: "isHighlighted" }] : 	/* istanbul ignore next */ []);
 	size = computed(() => this.accordion.size(), ...ngDevMode ? [{ debugName: "size" }] : 	/* istanbul ignore next */ []);
 	ngOnInit() {
 		this.accordion.registerItem(this);
@@ -3986,8 +4003,8 @@ var AccordionItemComponent = class AccordionItemComponent {
 			}
 		},
 		ngImport: i0,
-		template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
-		styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"],
+		template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--highlighted]=\"isHighlighted()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
+		styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item--highlighted .ea-accordion-item__trigger{font-weight:var(--font-weight-semibold);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-accordion-item--highlighted .ea-accordion-item__icon,.ea-accordion-item--highlighted .ea-accordion-item__chevron{color:var(--color-brand-default)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"],
 		dependencies: [{
 			kind: "component",
 			type: ChevronDownIconComponent,
@@ -4020,8 +4037,8 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "ea-accordion-item",
 			imports: [ChevronDownIconComponent, NgComponentOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
-			styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"]
+			template: "<div\n  class=\"ea-accordion-item ea-accordion-item--{{ size() }}\"\n  [class.ea-accordion-item--expanded]=\"isExpanded()\"\n  [class.ea-accordion-item--highlighted]=\"isHighlighted()\"\n  [class.ea-accordion-item--disabled]=\"disabled()\">\n  <div\n    class=\"ea-accordion-item__header\"\n    role=\"heading\"\n    [attr.aria-level]=\"headingLevel()\">\n    <button\n      class=\"ea-accordion-item__trigger\"\n      type=\"button\"\n      [id]=\"id() + '-trigger'\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"id() + '-content'\"\n      [disabled]=\"disabled()\"\n      (click)=\"toggle()\">\n      @if (icon(); as leadingIcon) {\n        <span\n          class=\"ea-accordion-item__icon\"\n          aria-hidden=\"true\">\n          <ng-container *ngComponentOutlet=\"leadingIcon\" />\n        </span>\n      }\n      <span class=\"ea-accordion-item__label\">{{ label() }}</span>\n      <ea-icon-chevron-down\n        class=\"ea-accordion-item__chevron\"\n        aria-hidden=\"true\" />\n    </button>\n  </div>\n  @if (isExpanded()) {\n    <div\n      class=\"ea-accordion-item__content\"\n      role=\"region\"\n      [id]=\"id() + '-content'\"\n      [attr.aria-labelledby]=\"id() + '-trigger'\">\n      <ng-content />\n    </div>\n  }\n</div>\n",
+			styles: [".ea-accordion-item{border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-accordion-item:last-child{border-bottom:none}.ea-accordion-item--2xs{font-size:var(--font-size-2xs)}.ea-accordion-item--xs{font-size:var(--font-size-xs)}.ea-accordion-item--sm{font-size:var(--font-size-sm)}.ea-accordion-item--md{font-size:var(--font-size-md)}.ea-accordion-item--lg{font-size:var(--font-size-lg)}.ea-accordion-item--xl{font-size:var(--font-size-xl)}.ea-accordion-item__trigger{display:flex;align-items:center;justify-content:space-between;gap:.75em;width:100%;padding:.75em 1em;font-size:inherit;font-weight:var(--font-weight-medium);font-family:var(--font-family-sans);line-height:var(--line-height-normal);text-align:start;background:none;border:none;color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-accordion-item__trigger:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-accordion-item__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-accordion-item__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-accordion-item__trigger:disabled{opacity:.5;cursor:default}.ea-accordion-item__icon{display:inline-flex;flex-shrink:0;color:var(--color-text-secondary)}.ea-accordion-item__icon+.ea-accordion-item__label{flex-grow:1}.ea-accordion-item__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:transform var(--duration-normal) var(--ease-out)}.ea-accordion-item--expanded .ea-accordion-item__chevron{transform:rotate(180deg)}.ea-accordion-item--highlighted .ea-accordion-item__trigger{font-weight:var(--font-weight-semibold);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-accordion-item--highlighted .ea-accordion-item__icon,.ea-accordion-item--highlighted .ea-accordion-item__chevron{color:var(--color-brand-default)}.ea-accordion-item__content{padding:.5em 1em 1em;line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-accordion-item--disabled{opacity:.5}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -19240,6 +19257,16 @@ function stepPath(points) {
 	return d;
 }
 function smoothPath(points) {
+	let d = "";
+	let start = 0;
+	for (let i = 1; i <= points.length; i++) if (i === points.length || points[i].x === points[i - 1].x) {
+		const run = monotonePath(points.slice(start, i));
+		d += start === 0 ? run : `L${run.slice(1)}`;
+		start = i;
+	}
+	return d;
+}
+function monotonePath(points) {
 	const n = points.length;
 	if (n < 3) return linearPath(points);
 	const slopes = [];