angular-visuals 0.1.2 → 0.1.3

package/fesm2022/angular-visuals.mjs

@@ -228,7 +228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class AvDropdown {
+class AvNavDropdown {
     config = inject(VISUALS_CONFIG);
     themeService = inject(ThemeService);
     badge = input(null, /* @ts-ignore */
@@ -244,20 +244,20 @@ class AvDropdown {
     expandedChange = output();
     internalExpanded = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "internalExpanded" }] : /* istanbul ignore next */ []));
-    panelId = `av-dropdown-${Math.random().toString(36).slice(2, 9)}`;
+    panelId = `av-nav-dropdown-${Math.random().toString(36).slice(2, 9)}`;
     isExpanded = computed(() => this.expanded() ?? this.internalExpanded(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
     themeVars = computed(() => {
         const variant = this.variant();
         const isDark = this.themeService.dark();
         return {
-            '--av-dropdown-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
-            '--av-dropdown-accent-hover': `var(--av-${variant}-${isDark ? 300 : 700})`,
-            '--av-dropdown-accent-soft': isDark
+            '--av-nav-dropdown-accent': `var(--av-${variant}-${isDark ? 400 : 500})`,
+            '--av-nav-dropdown-accent-hover': `var(--av-${variant}-${isDark ? 300 : 700})`,
+            '--av-nav-dropdown-accent-soft': isDark
                 ? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
                 : `var(--av-${variant}-50)`,
-            '--av-dropdown-text': 'var(--av-color-text-muted)',
-            '--av-dropdown-text-active': isDark ? `var(--av-${variant}-100)` : `var(--av-${variant}-800)`,
+            '--av-nav-dropdown-text': 'var(--av-color-text-muted)',
+            '--av-nav-dropdown-text-active': isDark ? `var(--av-${variant}-100)` : `var(--av-${variant}-800)`,
         };
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
@@ -276,12 +276,12 @@ class AvDropdown {
         this.internalExpanded.set(next);
         this.expandedChange.emit(next);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvDropdown, isStandalone: true, selector: "av-dropdown", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div class=\"av-dropdown\" [ngStyle]=\"themeVars()\">\n  <button\n    type=\"button\"\n    class=\"av-dropdown__trigger\"\n    [class.av-dropdown__trigger--active]=\"isExpanded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    (click)=\"toggle()\"\n  >\n    @if (icon()) {\n      <span class=\"av-dropdown__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n    }\n\n    <span class=\"av-dropdown__label\">\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content select=\"[av-dropdown-label]\"></ng-content>\n      }\n    </span>\n\n    @if (badge() !== null && badge() !== undefined) {\n      <span class=\"av-dropdown__badge\">{{ badge() }}</span>\n    }\n\n    <span\n      class=\"av-dropdown__chevron\"\n      av-icon\n      name=\"expand_more\"\n      size=\"md\"\n      [class.av-dropdown__chevron--open]=\"isExpanded()\"\n    ></span>\n  </button>\n\n  <div\n    class=\"av-dropdown__panel\"\n    [id]=\"panelId\"\n    [class.av-dropdown__panel--open]=\"isExpanded()\"\n    [attr.aria-hidden]=\"!isExpanded()\"\n    [attr.inert]=\"isExpanded() ? null : ''\"\n  >\n    <div class=\"av-dropdown__panel-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.av-dropdown{display:grid;gap:.125rem;min-width:0}.av-dropdown__trigger{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-dropdown-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:.625rem .75rem;text-align:left;transition:background-color .18s ease,border-color .18s ease,color .18s ease;width:100%}.av-dropdown__trigger:hover:not(:disabled),.av-dropdown__trigger--active{background:var(--av-dropdown-accent-soft);color:var(--av-dropdown-accent-hover)}.av-dropdown__trigger--active{border-color:color-mix(in srgb,var(--av-dropdown-accent) 24%,transparent);color:var(--av-dropdown-text-active);font-weight:700}.av-dropdown__trigger:disabled{cursor:not-allowed;opacity:.52}.av-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-dropdown-accent) 24%,transparent);outline:none}.av-dropdown__icon,.av-dropdown__chevron{color:currentColor;flex:0 0 auto}.av-dropdown__label{flex:1;font-size:.875rem;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-dropdown__badge{background:var(--av-dropdown-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}.av-dropdown__chevron{transition:transform .18s ease}.av-dropdown__chevron--open{transform:rotate(180deg)}.av-dropdown__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s ease,opacity .18s ease}.av-dropdown__panel--open{grid-template-rows:1fr;opacity:1}.av-dropdown__panel-inner{--av-nav-link-padding-left: 1rem;--av-nav-link-padding-y: .5rem;border-left:1px solid var(--av-color-border-soft);display:grid;gap:.125rem;margin-left:1.25rem;overflow:hidden;padding:.125rem 0 .125rem .5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvNavDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvNavDropdown, isStandalone: true, selector: "av-nav-dropdown", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div class=\"av-nav-dropdown\" [ngStyle]=\"themeVars()\">\n  <button\n    type=\"button\"\n    class=\"av-nav-dropdown__trigger\"\n    [class.av-nav-dropdown__trigger--active]=\"isExpanded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    (click)=\"toggle()\"\n  >\n    @if (icon()) {\n      <span class=\"av-nav-dropdown__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n    }\n\n    <span class=\"av-nav-dropdown__label\">\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content select=\"[av-nav-dropdown-label]\"></ng-content>\n      }\n    </span>\n\n    @if (badge() !== null && badge() !== undefined) {\n      <span class=\"av-nav-dropdown__badge\">{{ badge() }}</span>\n    }\n\n    <span\n      class=\"av-nav-dropdown__chevron\"\n      av-icon\n      name=\"expand_more\"\n      size=\"md\"\n      [class.av-nav-dropdown__chevron--open]=\"isExpanded()\"\n    ></span>\n  </button>\n\n  <div\n    class=\"av-nav-dropdown__panel\"\n    [id]=\"panelId\"\n    [class.av-nav-dropdown__panel--open]=\"isExpanded()\"\n    [attr.aria-hidden]=\"!isExpanded()\"\n    [attr.inert]=\"isExpanded() ? null : ''\"\n  >\n    <div class=\"av-nav-dropdown__panel-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.av-nav-dropdown{display:grid;gap:.125rem;min-width:0}.av-nav-dropdown__trigger{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-nav-dropdown-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:.625rem .75rem;text-align:left;transition:background-color .18s ease,border-color .18s ease,color .18s ease;width:100%}.av-nav-dropdown__trigger:hover:not(:disabled),.av-nav-dropdown__trigger--active{background:var(--av-nav-dropdown-accent-soft);color:var(--av-nav-dropdown-accent-hover)}.av-nav-dropdown__trigger--active{border-color:color-mix(in srgb,var(--av-nav-dropdown-accent) 24%,transparent);color:var(--av-nav-dropdown-text-active);font-weight:700}.av-nav-dropdown__trigger:disabled{cursor:not-allowed;opacity:.52}.av-nav-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-nav-dropdown-accent) 24%,transparent);outline:none}.av-nav-dropdown__icon,.av-nav-dropdown__chevron{color:currentColor;flex:0 0 auto}.av-nav-dropdown__label{flex:1;font-size:.875rem;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-nav-dropdown__badge{background:var(--av-nav-dropdown-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}.av-nav-dropdown__chevron{transition:transform .18s ease}.av-nav-dropdown__chevron--open{transform:rotate(180deg)}.av-nav-dropdown__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s ease,opacity .18s ease}.av-nav-dropdown__panel--open{grid-template-rows:1fr;opacity:1}.av-nav-dropdown__panel-inner{--av-nav-link-padding-left: 1rem;--av-nav-link-padding-y: .5rem;border-left:1px solid var(--av-color-border-soft);display:grid;gap:.125rem;margin-left:1.25rem;overflow:hidden;padding:.125rem 0 .125rem .5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvNavDropdown, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, AvIcon], selector: 'av-dropdown', template: "<div class=\"av-dropdown\" [ngStyle]=\"themeVars()\">\n  <button\n    type=\"button\"\n    class=\"av-dropdown__trigger\"\n    [class.av-dropdown__trigger--active]=\"isExpanded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    (click)=\"toggle()\"\n  >\n    @if (icon()) {\n      <span class=\"av-dropdown__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n    }\n\n    <span class=\"av-dropdown__label\">\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content select=\"[av-dropdown-label]\"></ng-content>\n      }\n    </span>\n\n    @if (badge() !== null && badge() !== undefined) {\n      <span class=\"av-dropdown__badge\">{{ badge() }}</span>\n    }\n\n    <span\n      class=\"av-dropdown__chevron\"\n      av-icon\n      name=\"expand_more\"\n      size=\"md\"\n      [class.av-dropdown__chevron--open]=\"isExpanded()\"\n    ></span>\n  </button>\n\n  <div\n    class=\"av-dropdown__panel\"\n    [id]=\"panelId\"\n    [class.av-dropdown__panel--open]=\"isExpanded()\"\n    [attr.aria-hidden]=\"!isExpanded()\"\n    [attr.inert]=\"isExpanded() ? null : ''\"\n  >\n    <div class=\"av-dropdown__panel-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.av-dropdown{display:grid;gap:.125rem;min-width:0}.av-dropdown__trigger{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-dropdown-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:.625rem .75rem;text-align:left;transition:background-color .18s ease,border-color .18s ease,color .18s ease;width:100%}.av-dropdown__trigger:hover:not(:disabled),.av-dropdown__trigger--active{background:var(--av-dropdown-accent-soft);color:var(--av-dropdown-accent-hover)}.av-dropdown__trigger--active{border-color:color-mix(in srgb,var(--av-dropdown-accent) 24%,transparent);color:var(--av-dropdown-text-active);font-weight:700}.av-dropdown__trigger:disabled{cursor:not-allowed;opacity:.52}.av-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-dropdown-accent) 24%,transparent);outline:none}.av-dropdown__icon,.av-dropdown__chevron{color:currentColor;flex:0 0 auto}.av-dropdown__label{flex:1;font-size:.875rem;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-dropdown__badge{background:var(--av-dropdown-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}.av-dropdown__chevron{transition:transform .18s ease}.av-dropdown__chevron--open{transform:rotate(180deg)}.av-dropdown__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s ease,opacity .18s ease}.av-dropdown__panel--open{grid-template-rows:1fr;opacity:1}.av-dropdown__panel-inner{--av-nav-link-padding-left: 1rem;--av-nav-link-padding-y: .5rem;border-left:1px solid var(--av-color-border-soft);display:grid;gap:.125rem;margin-left:1.25rem;overflow:hidden;padding:.125rem 0 .125rem .5rem}\n"] }]
+            args: [{ imports: [CommonModule, AvIcon], selector: 'av-nav-dropdown', template: "<div class=\"av-nav-dropdown\" [ngStyle]=\"themeVars()\">\n  <button\n    type=\"button\"\n    class=\"av-nav-dropdown__trigger\"\n    [class.av-nav-dropdown__trigger--active]=\"isExpanded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    (click)=\"toggle()\"\n  >\n    @if (icon()) {\n      <span class=\"av-nav-dropdown__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n    }\n\n    <span class=\"av-nav-dropdown__label\">\n      @if (label()) {\n        {{ label() }}\n      } @else {\n        <ng-content select=\"[av-nav-dropdown-label]\"></ng-content>\n      }\n    </span>\n\n    @if (badge() !== null && badge() !== undefined) {\n      <span class=\"av-nav-dropdown__badge\">{{ badge() }}</span>\n    }\n\n    <span\n      class=\"av-nav-dropdown__chevron\"\n      av-icon\n      name=\"expand_more\"\n      size=\"md\"\n      [class.av-nav-dropdown__chevron--open]=\"isExpanded()\"\n    ></span>\n  </button>\n\n  <div\n    class=\"av-nav-dropdown__panel\"\n    [id]=\"panelId\"\n    [class.av-nav-dropdown__panel--open]=\"isExpanded()\"\n    [attr.aria-hidden]=\"!isExpanded()\"\n    [attr.inert]=\"isExpanded() ? null : ''\"\n  >\n    <div class=\"av-nav-dropdown__panel-inner\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0}.av-nav-dropdown{display:grid;gap:.125rem;min-width:0}.av-nav-dropdown__trigger{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--av-radius-md);box-sizing:border-box;color:var(--av-nav-dropdown-text, var(--av-color-text-muted));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.5rem;min-width:0;padding:.625rem .75rem;text-align:left;transition:background-color .18s ease,border-color .18s ease,color .18s ease;width:100%}.av-nav-dropdown__trigger:hover:not(:disabled),.av-nav-dropdown__trigger--active{background:var(--av-nav-dropdown-accent-soft);color:var(--av-nav-dropdown-accent-hover)}.av-nav-dropdown__trigger--active{border-color:color-mix(in srgb,var(--av-nav-dropdown-accent) 24%,transparent);color:var(--av-nav-dropdown-text-active);font-weight:700}.av-nav-dropdown__trigger:disabled{cursor:not-allowed;opacity:.52}.av-nav-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-nav-dropdown-accent) 24%,transparent);outline:none}.av-nav-dropdown__icon,.av-nav-dropdown__chevron{color:currentColor;flex:0 0 auto}.av-nav-dropdown__label{flex:1;font-size:.875rem;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-nav-dropdown__badge{background:var(--av-nav-dropdown-accent);border-radius:var(--av-radius-full);color:var(--av-white);flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;min-width:1.25rem;padding:.25rem .375rem;text-align:center}.av-nav-dropdown__chevron{transition:transform .18s ease}.av-nav-dropdown__chevron--open{transform:rotate(180deg)}.av-nav-dropdown__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s ease,opacity .18s ease}.av-nav-dropdown__panel--open{grid-template-rows:1fr;opacity:1}.av-nav-dropdown__panel-inner{--av-nav-link-padding-left: 1rem;--av-nav-link-padding-y: .5rem;border-left:1px solid var(--av-color-border-soft);display:grid;gap:.125rem;margin-left:1.25rem;overflow:hidden;padding:.125rem 0 .125rem .5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 class AvNavLink {
@@ -900,6 +900,168 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 args: ['keydown.escape']
             }] } });
 
+class AvDropdown {
+    config = inject(VISUALS_CONFIG);
+    themeService = inject(ThemeService);
+    badge = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    closeOnContentClick = input(true, { ...(ngDevMode ? { debugName: "closeOnContentClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    matchTriggerWidth = input(false, { ...(ngDevMode ? { debugName: "matchTriggerWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    offset = input(8, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    open = input(undefined, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: (value) => value === undefined ? undefined : booleanAttribute(value) });
+    placement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    rounded = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    openChange = output();
+    triggerEl;
+    internalOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalOpen" }] : /* istanbul ignore next */ []));
+    panelId = `av-dropdown-${Math.random().toString(36).slice(2, 9)}`;
+    isOpen = computed(() => this.open() ?? this.internalOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    overlayPositions = computed(() => this.positionsFor(this.placement()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayPositions" }] : /* istanbul ignore next */ []));
+    themeVars = computed(() => {
+        const variant = this.variant();
+        const isDark = this.themeService.dark();
+        const accent = `var(--av-${variant}-${isDark ? 400 : 500})`;
+        return {
+            '--av-dropdown-accent': accent,
+            '--av-dropdown-accent-strong': `var(--av-${variant}-${isDark ? 300 : 600})`,
+            '--av-dropdown-accent-soft': isDark
+                ? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
+                : `var(--av-${variant}-50)`,
+            '--av-dropdown-bg': 'var(--av-color-surface)',
+            '--av-dropdown-border': 'var(--av-color-border)',
+            '--av-dropdown-panel-bg': 'var(--av-color-surface-raised)',
+            '--av-dropdown-panel-border': 'var(--av-color-border-soft)',
+            '--av-dropdown-shadow': 'var(--av-shadow-raised)',
+            '--av-dropdown-text': 'var(--av-color-text)',
+            '--av-dropdown-muted': 'var(--av-color-text-muted)',
+            '--av-dropdown-focus-ring': `color-mix(in srgb, ${accent} 24%, transparent)`,
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const controlledOpen = this.open();
+            if (controlledOpen !== undefined) {
+                this.internalOpen.set(controlledOpen);
+            }
+        });
+    }
+    get roundedStyle() {
+        if (typeof this.rounded() === 'string') {
+            return `var(--av-radius-${this.rounded()})`;
+        }
+        return `${this.rounded()}px`;
+    }
+    toggle() {
+        if (this.disabled())
+            return;
+        this.setOpen(!this.isOpen());
+    }
+    close() {
+        this.setOpen(false);
+    }
+    handleTriggerKeydown(event) {
+        if (event.key === 'Escape') {
+            this.close();
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'ArrowDown')
+            return;
+        event.preventDefault();
+        this.setOpen(true);
+    }
+    handlePanelClick() {
+        if (this.closeOnContentClick()) {
+            this.close();
+        }
+    }
+    setOpen(open) {
+        if (open && this.disabled())
+            return;
+        if (open === this.isOpen())
+            return;
+        this.internalOpen.set(open);
+        this.openChange.emit(open);
+    }
+    positionsFor(placement) {
+        const offset = Math.max(0, this.offset());
+        const positions = {
+            'bottom-start': [
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },
+            ],
+            'bottom-end': [
+                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: offset },
+                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offset },
+            ],
+            'top-start': [
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },
+            ],
+            'top-end': [
+                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -offset },
+                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: offset },
+            ],
+        };
+        return positions[placement] ?? positions['bottom-start'];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvDropdown, isStandalone: true, selector: "av-dropdown", inputs: { badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, closeOnContentClick: { classPropertyName: "closeOnContentClick", publicName: "closeOnContentClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, matchTriggerWidth: { classPropertyName: "matchTriggerWidth", publicName: "matchTriggerWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange" }, viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: "<div class=\"av-dropdown\" [ngStyle]=\"themeVars()\">\n  <button\n    #triggerEl\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    type=\"button\"\n    class=\"av-dropdown__trigger\"\n    [class.av-dropdown__trigger--open]=\"isOpen()\"\n    [disabled]=\"disabled()\"\n    [style.border-radius]=\"roundedStyle\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"menu\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    @if (label() || icon() || (badge() !== null && badge() !== undefined)) {\n      @if (icon()) {\n        <span class=\"av-dropdown__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n      }\n\n      <span class=\"av-dropdown__label\">\n        {{ label() }}\n      </span>\n\n      @if (badge() !== null && badge() !== undefined) {\n        <span class=\"av-dropdown__badge\">{{ badge() }}</span>\n      }\n    } @else {\n      <span class=\"av-dropdown__custom-trigger\">\n        <ng-content select=\"[av-dropdown-trigger]\"></ng-content>\n      </span>\n    }\n\n    <span\n      class=\"av-dropdown__chevron\"\n      av-icon\n      name=\"expand_more\"\n      size=\"md\"\n      [class.av-dropdown__chevron--open]=\"isOpen()\"\n    ></span>\n  </button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"av-dropdown__panel\"\n    [id]=\"panelId\"\n    [ngStyle]=\"themeVars()\"\n    [style.border-radius]=\"roundedStyle\"\n    [style.min-width.px]=\"matchTriggerWidth() ? triggerEl.offsetWidth : null\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    (click)=\"handlePanelClick()\"\n    (keydown.escape)=\"close()\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}.av-dropdown{display:inline-block}.av-dropdown__trigger{align-items:center;background:var(--av-dropdown-bg);border:1px solid var(--av-dropdown-border);color:var(--av-dropdown-text);cursor:pointer;display:inline-flex;font:inherit;font-size:.875rem;font-weight:700;gap:.5rem;justify-content:center;line-height:1.2;min-height:2.5rem;min-width:0;padding:.625rem .75rem;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}.av-dropdown__trigger:hover:not(:disabled),.av-dropdown__trigger--open{background:var(--av-dropdown-accent-soft);border-color:color-mix(in srgb,var(--av-dropdown-accent) 36%,var(--av-dropdown-border));color:var(--av-dropdown-accent-strong)}.av-dropdown__trigger:disabled{cursor:not-allowed;opacity:.52}.av-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px var(--av-dropdown-focus-ring);outline:none}.av-dropdown__icon,.av-dropdown__chevron{color:currentColor;flex:0 0 auto}.av-dropdown__label,.av-dropdown__custom-trigger{min-width:0}.av-dropdown__badge{align-items:center;background:var(--av-dropdown-accent);border-radius:var(--av-radius-full);color:var(--av-white);display:inline-flex;flex:0 0 auto;font-size:.6875rem;font-weight:800;justify-content:center;line-height:1;min-width:1.25rem;padding:.25rem .375rem}.av-dropdown__chevron{transition:transform .18s ease}.av-dropdown__chevron--open{transform:rotate(180deg)}.av-dropdown__panel{animation:av-dropdown-panel-in .14s cubic-bezier(.2,0,0,1);background:var(--av-dropdown-panel-bg);border:1px solid var(--av-dropdown-panel-border);box-shadow:var(--av-dropdown-shadow);box-sizing:border-box;color:var(--av-dropdown-text);display:grid;gap:.125rem;max-width:min(24rem,calc(100vw - 2rem));min-width:12rem;padding:.375rem}@keyframes av-dropdown-panel-in{0%{opacity:0;transform:translateY(-.15rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDropdown, decorators: [{
+            type: Component,
+            args: [{ imports: [CommonModule, OverlayModule, AvIcon], selector: 'av-dropdown', standalone: true, template: "<div class=\"av-dropdown\" [ngStyle]=\"themeVars()\">\n  <button\n    #triggerEl\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    type=\"button\"\n    class=\"av-dropdown__trigger\"\n    [class.av-dropdown__trigger--open]=\"isOpen()\"\n    [disabled]=\"disabled()\"\n    [style.border-radius]=\"roundedStyle\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-expanded]=\"isOpen()\"\n    aria-haspopup=\"menu\"\n    (click)=\"toggle()\"\n    (keydown)=\"handleTriggerKeydown($event)\"\n  >\n    @if (label() || icon() || (badge() !== null && badge() !== undefined)) {\n      @if (icon()) {\n        <span class=\"av-dropdown__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n      }\n\n      <span class=\"av-dropdown__label\">\n        {{ label() }}\n      </span>\n\n      @if (badge() !== null && badge() !== undefined) {\n        <span class=\"av-dropdown__badge\">{{ badge() }}</span>\n      }\n    } @else {\n      <span class=\"av-dropdown__custom-trigger\">\n        <ng-content select=\"[av-dropdown-trigger]\"></ng-content>\n      </span>\n    }\n\n    <span\n      class=\"av-dropdown__chevron\"\n      av-icon\n      name=\"expand_more\"\n      size=\"md\"\n      [class.av-dropdown__chevron--open]=\"isOpen()\"\n    ></span>\n  </button>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"trigger\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n>\n  <div\n    class=\"av-dropdown__panel\"\n    [id]=\"panelId\"\n    [ngStyle]=\"themeVars()\"\n    [style.border-radius]=\"roundedStyle\"\n    [style.min-width.px]=\"matchTriggerWidth() ? triggerEl.offsetWidth : null\"\n    role=\"menu\"\n    tabindex=\"-1\"\n    (click)=\"handlePanelClick()\"\n    (keydown.escape)=\"close()\"\n  >\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block}.av-dropdown{display:inline-block}.av-dropdown__trigger{align-items:center;background:var(--av-dropdown-bg);border:1px solid var(--av-dropdown-border);color:var(--av-dropdown-text);cursor:pointer;display:inline-flex;font:inherit;font-size:.875rem;font-weight:700;gap:.5rem;justify-content:center;line-height:1.2;min-height:2.5rem;min-width:0;padding:.625rem .75rem;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}.av-dropdown__trigger:hover:not(:disabled),.av-dropdown__trigger--open{background:var(--av-dropdown-accent-soft);border-color:color-mix(in srgb,var(--av-dropdown-accent) 36%,var(--av-dropdown-border));color:var(--av-dropdown-accent-strong)}.av-dropdown__trigger:disabled{cursor:not-allowed;opacity:.52}.av-dropdown__trigger:focus-visible{box-shadow:0 0 0 3px var(--av-dropdown-focus-ring);outline:none}.av-dropdown__icon,.av-dropdown__chevron{color:currentColor;flex:0 0 auto}.av-dropdown__label,.av-dropdown__custom-trigger{min-width:0}.av-dropdown__badge{align-items:center;background:var(--av-dropdown-accent);border-radius:var(--av-radius-full);color:var(--av-white);display:inline-flex;flex:0 0 auto;font-size:.6875rem;font-weight:800;justify-content:center;line-height:1;min-width:1.25rem;padding:.25rem .375rem}.av-dropdown__chevron{transition:transform .18s ease}.av-dropdown__chevron--open{transform:rotate(180deg)}.av-dropdown__panel{animation:av-dropdown-panel-in .14s cubic-bezier(.2,0,0,1);background:var(--av-dropdown-panel-bg);border:1px solid var(--av-dropdown-panel-border);box-shadow:var(--av-dropdown-shadow);box-sizing:border-box;color:var(--av-dropdown-text);display:grid;gap:.125rem;max-width:min(24rem,calc(100vw - 2rem));min-width:12rem;padding:.375rem}@keyframes av-dropdown-panel-in{0%{opacity:0;transform:translateY(-.15rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], closeOnContentClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnContentClick", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], matchTriggerWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchTriggerWidth", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], triggerEl: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }] } });
+
+class AvDropdownItem {
+    danger = input(false, { ...(ngDevMode ? { debugName: "danger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    description = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    icon = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    role = input('menuitem', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    handleClick(event) {
+        if (!this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvDropdownItem, isStandalone: true, selector: "button[av-dropdown-item], a[av-dropdown-item]", inputs: { danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)" }, properties: { "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.disabled": "disabled() ? \"\" : null", "attr.role": "role()", "attr.tabindex": "disabled() ? -1 : 0", "attr.type": "type()", "class.av-dropdown-item--danger": "danger()", "class.av-dropdown-item--disabled": "disabled()" } }, ngImport: i0, template: "@if (icon()) {\n  <span class=\"av-dropdown-item__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n}\n\n<span class=\"av-dropdown-item__content\">\n  <span class=\"av-dropdown-item__label\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (description()) {\n    <span class=\"av-dropdown-item__description\">{{ description() }}</span>\n  }\n</span>\n", styles: [":host{align-items:center;background:transparent;border:0;border-radius:var(--av-radius-sm);box-sizing:border-box;color:var(--av-dropdown-text, var(--av-color-text));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.25rem;min-width:0;padding:.5rem .625rem;text-align:left;text-decoration:none;transition:background-color .16s ease,color .16s ease;width:100%}:host(:hover),:host(:focus-visible){background:var(--av-dropdown-accent-soft, var(--av-color-surface-muted));color:var(--av-dropdown-accent-strong, var(--av-color-text));outline:none}:host(.av-dropdown-item--danger){color:var(--av-red-600, #dc2626)}:host(.av-dropdown-item--danger:hover),:host(.av-dropdown-item--danger:focus-visible){background:color-mix(in srgb,var(--av-red-500, #ef4444) 12%,transparent);color:var(--av-red-700, #b91c1c)}:host(.av-dropdown-item--disabled){cursor:not-allowed;opacity:.52}:host(.av-dropdown-item--disabled:hover),:host(.av-dropdown-item--disabled:focus-visible){background:transparent;color:var(--av-dropdown-text, var(--av-color-text))}.av-dropdown-item__icon{color:currentColor;flex:0 0 auto}.av-dropdown-item__content{display:grid;gap:.125rem;min-width:0}.av-dropdown-item__label{font-size:.875rem;font-weight:700;line-height:1.25;min-width:0}.av-dropdown-item__description{color:var(--av-dropdown-muted, var(--av-color-text-muted));font-size:.75rem;line-height:1.25;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvDropdownItem, decorators: [{
+            type: Component,
+            args: [{ host: {
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.role]': 'role()',
+                        '[attr.tabindex]': 'disabled() ? -1 : 0',
+                        '[attr.type]': 'type()',
+                        '[class.av-dropdown-item--danger]': 'danger()',
+                        '[class.av-dropdown-item--disabled]': 'disabled()',
+                        '(click)': 'handleClick($event)',
+                    }, imports: [CommonModule, AvIcon], selector: 'button[av-dropdown-item], a[av-dropdown-item]', standalone: true, template: "@if (icon()) {\n  <span class=\"av-dropdown-item__icon\" av-icon [name]=\"icon()\" size=\"md\"></span>\n}\n\n<span class=\"av-dropdown-item__content\">\n  <span class=\"av-dropdown-item__label\">\n    <ng-content></ng-content>\n  </span>\n\n  @if (description()) {\n    <span class=\"av-dropdown-item__description\">{{ description() }}</span>\n  }\n</span>\n", styles: [":host{align-items:center;background:transparent;border:0;border-radius:var(--av-radius-sm);box-sizing:border-box;color:var(--av-dropdown-text, var(--av-color-text));cursor:pointer;display:flex;font:inherit;gap:.625rem;min-height:2.25rem;min-width:0;padding:.5rem .625rem;text-align:left;text-decoration:none;transition:background-color .16s ease,color .16s ease;width:100%}:host(:hover),:host(:focus-visible){background:var(--av-dropdown-accent-soft, var(--av-color-surface-muted));color:var(--av-dropdown-accent-strong, var(--av-color-text));outline:none}:host(.av-dropdown-item--danger){color:var(--av-red-600, #dc2626)}:host(.av-dropdown-item--danger:hover),:host(.av-dropdown-item--danger:focus-visible){background:color-mix(in srgb,var(--av-red-500, #ef4444) 12%,transparent);color:var(--av-red-700, #b91c1c)}:host(.av-dropdown-item--disabled){cursor:not-allowed;opacity:.52}:host(.av-dropdown-item--disabled:hover),:host(.av-dropdown-item--disabled:focus-visible){background:transparent;color:var(--av-dropdown-text, var(--av-color-text))}.av-dropdown-item__icon{color:currentColor;flex:0 0 auto}.av-dropdown-item__content{display:grid;gap:.125rem;min-width:0}.av-dropdown-item__label{font-size:.875rem;font-weight:700;line-height:1.25;min-width:0}.av-dropdown-item__description{color:var(--av-dropdown-muted, var(--av-color-text-muted));font-size:.75rem;line-height:1.25;min-width:0}\n"] }]
+        }], propDecorators: { danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }] } });
+
 class AvTextArea {
     ngControl;
     config = inject(VISUALS_CONFIG);
@@ -949,7 +1111,7 @@ class AvTextArea {
         return !!(this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched));
     }
     writeValue(value) {
-        this.value = value || '';
+        this.value = value ?? '';
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1738,7 +1900,7 @@ class AvInput {
         return !!(this.ngControl && this.ngControl.invalid && (this.ngControl.dirty || this.ngControl.touched));
     }
     writeValue(value) {
-        this.value = value || '';
+        this.value = value ?? '';
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1823,7 +1985,9 @@ class AvSelect {
             this.ngControl.valueAccessor = this;
         }
         effect(() => {
-            this._value.set(this.value());
+            if (!this.ngControl) {
+                this._value.set(this.value());
+            }
         });
     }
     get roundedStyle() {
@@ -2668,6 +2832,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     }, template: "<ng-content></ng-content>\n", styles: [":host{align-items:start;display:grid;gap:var(--av-grid-gap, .5rem);grid-template-columns:repeat(var(--av-grid-cols-xs, 1),minmax(0,1fr));justify-content:start;width:100%}:host(.av-grid--empty){align-items:center;display:flex;justify-content:center;min-height:8rem}@media(min-width:640px){:host{grid-template-columns:repeat(var(--av-grid-cols-sm, var(--av-grid-cols-xs, 1)),minmax(0,1fr))}}@media(min-width:768px){:host{grid-template-columns:repeat(var(--av-grid-cols-md, var(--av-grid-cols-sm, 1)),minmax(0,1fr))}}@media(min-width:1024px){:host{grid-template-columns:repeat(var(--av-grid-cols-lg, var(--av-grid-cols-md, 1)),minmax(0,1fr))}}@media(min-width:1280px){:host{grid-template-columns:repeat(var(--av-grid-cols-xl, var(--av-grid-cols-lg, 1)),minmax(0,1fr))}}@media(min-width:1536px){:host{grid-template-columns:repeat(var(--av-grid-cols-2xl, var(--av-grid-cols-xl, 1)),minmax(0,1fr))}}\n"] }]
         }], propDecorators: { cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
 
+class AvCard {
+    config = inject(VISUALS_CONFIG);
+    themeService = inject(ThemeService);
+    appearance = input('outlined', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    padding = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    rounded = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    themeVars = computed(() => {
+        const variant = this.variant();
+        const isDark = this.themeService.dark();
+        const accent = `var(--av-${variant}-${isDark ? 400 : 500})`;
+        return {
+            '--av-card-accent': accent,
+            '--av-card-accent-soft': isDark
+                ? `color-mix(in srgb, var(--av-${variant}-400) 14%, transparent)`
+                : `var(--av-${variant}-50)`,
+            '--av-card-bg': 'var(--av-color-surface)',
+            '--av-card-border': 'var(--av-color-border-soft)',
+            '--av-card-muted': 'var(--av-color-text-muted)',
+            '--av-card-padding': this.paddingStyle(),
+            '--av-card-radius': this.roundedStyle(),
+            '--av-card-shadow': 'var(--av-shadow-control)',
+            '--av-card-text': 'var(--av-color-text)',
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
+    isFilled = computed(() => this.appearance() === 'filled', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFilled" }] : /* istanbul ignore next */ []));
+    isElevated = computed(() => this.appearance() === 'elevated', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isElevated" }] : /* istanbul ignore next */ []));
+    paddingStyle() {
+        const padding = this.padding();
+        if (typeof padding === 'number') {
+            return `${padding}px`;
+        }
+        const sizes = {
+            none: '0',
+            xs: '.5rem',
+            sm: '.75rem',
+            md: '1rem',
+            lg: '1.25rem',
+            xl: '1.5rem',
+        };
+        return sizes[padding] ?? sizes.md;
+    }
+    roundedStyle() {
+        const rounded = this.rounded();
+        return typeof rounded === 'string'
+            ? `var(--av-radius-${rounded})`
+            : `${rounded}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AvCard, isStandalone: true, selector: "av-card", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article\n  class=\"av-card\"\n  [class.av-card--filled]=\"isFilled()\"\n  [class.av-card--elevated]=\"isElevated()\"\n  [ngStyle]=\"themeVars()\"\n>\n  <div class=\"av-card__header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n\n  <div class=\"av-card__content\">\n    <ng-content select=\"[content]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"av-card__footer\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n</article>\n", styles: [":host{display:block;min-width:0}.av-card{background:var(--av-card-bg, var(--av-color-surface));border:1px solid var(--av-card-border, var(--av-color-border-soft));border-radius:var(--av-card-radius, var(--av-radius-md));box-shadow:var(--av-card-shadow, var(--av-shadow-control));color:var(--av-card-text, var(--av-color-text));display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}.av-card:before{background:var(--av-card-accent);content:\"\";flex:0 0 3px}.av-card--filled{background:var(--av-card-accent-soft);border-color:color-mix(in srgb,var(--av-card-accent) 26%,var(--av-card-border))}.av-card--elevated{border-color:transparent;box-shadow:var(--av-shadow-raised)}.av-card__header,.av-card__content,.av-card__footer{min-width:0;padding:var(--av-card-padding, 1rem)}.av-card__header{color:var(--av-card-text, var(--av-color-text));font-weight:600}.av-card__footer{color:var(--av-card-muted, var(--av-color-text-muted))}.av-card__header:not(:empty){border-bottom:1px solid var(--av-card-border, var(--av-color-border-soft))}.av-card__footer:not(:empty){border-top:1px solid var(--av-card-border, var(--av-color-border-soft))}.av-card__header:empty,.av-card__content:empty,.av-card__footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCard, decorators: [{
+            type: Component,
+            args: [{ imports: [CommonModule], selector: 'av-card', standalone: true, template: "<article\n  class=\"av-card\"\n  [class.av-card--filled]=\"isFilled()\"\n  [class.av-card--elevated]=\"isElevated()\"\n  [ngStyle]=\"themeVars()\"\n>\n  <div class=\"av-card__header\">\n    <ng-content select=\"[header]\"></ng-content>\n  </div>\n\n  <div class=\"av-card__content\">\n    <ng-content select=\"[content]\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"av-card__footer\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n</article>\n", styles: [":host{display:block;min-width:0}.av-card{background:var(--av-card-bg, var(--av-color-surface));border:1px solid var(--av-card-border, var(--av-color-border-soft));border-radius:var(--av-card-radius, var(--av-radius-md));box-shadow:var(--av-card-shadow, var(--av-shadow-control));color:var(--av-card-text, var(--av-color-text));display:flex;flex-direction:column;min-width:0;overflow:hidden;position:relative;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}.av-card:before{background:var(--av-card-accent);content:\"\";flex:0 0 3px}.av-card--filled{background:var(--av-card-accent-soft);border-color:color-mix(in srgb,var(--av-card-accent) 26%,var(--av-card-border))}.av-card--elevated{border-color:transparent;box-shadow:var(--av-shadow-raised)}.av-card__header,.av-card__content,.av-card__footer{min-width:0;padding:var(--av-card-padding, 1rem)}.av-card__header{color:var(--av-card-text, var(--av-color-text));font-weight:600}.av-card__footer{color:var(--av-card-muted, var(--av-color-text-muted))}.av-card__header:not(:empty){border-bottom:1px solid var(--av-card-border, var(--av-color-border-soft))}.av-card__footer:not(:empty){border-top:1px solid var(--av-card-border, var(--av-color-border-soft))}.av-card__header:empty,.av-card__content:empty,.av-card__footer:empty{display:none}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
 class AvButton {
     config = inject(VISUALS_CONFIG);
     icon = input(/* @ts-ignore */
@@ -2699,11 +2926,11 @@ class AvButton {
         return `var(--av-${this.variant()}-500)`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvButton, isStandalone: true, selector: "button[av-button], a[av-button]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.border-radius": "this.roundedClass", "style.--av-button-light-bg": "this.lightBackground", "style.--av-button-light-hover-bg": "this.lightHoverBackground", "style.--av-button-dark-bg": "this.darkBackground", "style.--av-button-dark-hover-bg": "this.darkHoverBackground" } }, ngImport: i0, template: "@if(icon() || loading()) {<span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>}\n<div>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--av-button-focus-color: var(--av-button-light-bg);--av-button-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px;display:inline-flex;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:5px;padding:8px 16px;font-size:14px;font-weight:500;background-color:var(--av-button-light-bg);color:var(--av-white);transition:background-color .15s ease,color .15s ease,transform .15s ease;cursor:pointer;box-shadow:var(--av-button-shadow)}:host:hover{background-color:var(--av-button-light-hover-bg)}:host:active{transform:scale(.95)}:host:focus-visible{outline:none;box-shadow:var(--av-button-shadow),0 0 0 2px var(--av-button-focus-color);box-shadow:var(--av-button-shadow),0 0 0 3px color-mix(in srgb,var(--av-button-focus-color) 28%,transparent)}:host-context([data-av-theme=\"dark\"]){--av-button-focus-color: var(--av-button-dark-hover-bg);--av-button-shadow: 0 12px 24px -12px rgb(0 0 0 / .62), 0 4px 10px -6px rgb(0 0 0 / .5);background-color:var(--av-button-dark-bg)}:host-context([data-av-theme=\"dark\"]):hover{background-color:var(--av-button-dark-hover-bg)}\n"], dependencies: [{ kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvButton, isStandalone: true, selector: "button[av-button], a[av-button]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.border-radius": "this.roundedClass", "style.--av-button-light-bg": "this.lightBackground", "style.--av-button-light-hover-bg": "this.lightHoverBackground", "style.--av-button-dark-bg": "this.darkBackground", "style.--av-button-dark-hover-bg": "this.darkHoverBackground" } }, ngImport: i0, template: "@if(icon() || loading()) {<span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>}\n<div class=\"btn-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--av-button-focus-color: var(--av-button-light-bg);--av-button-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px;display:inline-flex;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:5px;padding:8px 16px;font-size:14px;font-weight:500;background-color:var(--av-button-light-bg);color:var(--av-white);transition:background-color .15s ease,color .15s ease,transform .15s ease;cursor:pointer;box-shadow:var(--av-button-shadow)}:host:hover{background-color:var(--av-button-light-hover-bg)}:host:active{transform:scale(.95)}:host:focus-visible{outline:none;box-shadow:var(--av-button-shadow),0 0 0 2px var(--av-button-focus-color);box-shadow:var(--av-button-shadow),0 0 0 3px color-mix(in srgb,var(--av-button-focus-color) 28%,transparent)}:host-context([data-av-theme=\"dark\"]){--av-button-focus-color: var(--av-button-dark-hover-bg);--av-button-shadow: 0 12px 24px -12px rgb(0 0 0 / .62), 0 4px 10px -6px rgb(0 0 0 / .5);background-color:var(--av-button-dark-bg)}:host-context([data-av-theme=\"dark\"]):hover{background-color:var(--av-button-dark-hover-bg)}.btn-content{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvButton, decorators: [{
             type: Component,
-            args: [{ imports: [AvIcon], selector: 'button[av-button], a[av-button]', template: "@if(icon() || loading()) {<span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>}\n<div>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--av-button-focus-color: var(--av-button-light-bg);--av-button-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px;display:inline-flex;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:5px;padding:8px 16px;font-size:14px;font-weight:500;background-color:var(--av-button-light-bg);color:var(--av-white);transition:background-color .15s ease,color .15s ease,transform .15s ease;cursor:pointer;box-shadow:var(--av-button-shadow)}:host:hover{background-color:var(--av-button-light-hover-bg)}:host:active{transform:scale(.95)}:host:focus-visible{outline:none;box-shadow:var(--av-button-shadow),0 0 0 2px var(--av-button-focus-color);box-shadow:var(--av-button-shadow),0 0 0 3px color-mix(in srgb,var(--av-button-focus-color) 28%,transparent)}:host-context([data-av-theme=\"dark\"]){--av-button-focus-color: var(--av-button-dark-hover-bg);--av-button-shadow: 0 12px 24px -12px rgb(0 0 0 / .62), 0 4px 10px -6px rgb(0 0 0 / .5);background-color:var(--av-button-dark-bg)}:host-context([data-av-theme=\"dark\"]):hover{background-color:var(--av-button-dark-hover-bg)}\n"] }]
+            args: [{ imports: [AvIcon], selector: 'button[av-button], a[av-button]', template: "@if(icon() || loading()) {<span av-icon [name]=\"loading()? loadingIcon()!: icon()!\"></span>}\n<div class=\"btn-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--av-button-focus-color: var(--av-button-light-bg);--av-button-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px;display:inline-flex;width:fit-content;flex-shrink:0;align-items:center;justify-content:center;gap:5px;padding:8px 16px;font-size:14px;font-weight:500;background-color:var(--av-button-light-bg);color:var(--av-white);transition:background-color .15s ease,color .15s ease,transform .15s ease;cursor:pointer;box-shadow:var(--av-button-shadow)}:host:hover{background-color:var(--av-button-light-hover-bg)}:host:active{transform:scale(.95)}:host:focus-visible{outline:none;box-shadow:var(--av-button-shadow),0 0 0 2px var(--av-button-focus-color);box-shadow:var(--av-button-shadow),0 0 0 3px color-mix(in srgb,var(--av-button-focus-color) 28%,transparent)}:host-context([data-av-theme=\"dark\"]){--av-button-focus-color: var(--av-button-dark-hover-bg);--av-button-shadow: 0 12px 24px -12px rgb(0 0 0 / .62), 0 4px 10px -6px rgb(0 0 0 / .5);background-color:var(--av-button-dark-bg)}:host-context([data-av-theme=\"dark\"]):hover{background-color:var(--av-button-dark-hover-bg)}.btn-content{display:flex;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], roundedClass: [{
                 type: HostBinding,
                 args: ['style.border-radius']
@@ -3261,6 +3488,370 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             args: [{ selector: 'av-table', standalone: true, imports: [CommonModule, AvSelect, AvPaginator], template: "<div class=\"av-table\">\n  <div class=\"av-table__scroll\">\n    <table class=\"av-table__table\">\n      @if (headerTemplate()) {\n        <thead class=\"av-table__header\">\n          <ng-container *ngTemplateOutlet=\"headerTemplate()!\"></ng-container>\n        </thead>\n      }\n\n      <tbody class=\"av-table__body\">\n        @if (bodyTemplate()) {\n          @for (item of value(); track $index) {\n            <ng-container *ngTemplateOutlet=\"bodyTemplate()!; context: { $implicit: item, index: $index }\"></ng-container>\n          } @empty {\n            <tr>\n              <td colspan=\"100%\" class=\"av-table__empty\">\n                {{ emptyMessage() }}\n              </td>\n            </tr>\n          }\n        } @else {\n          <tr>\n            <td colspan=\"100%\" class=\"av-table__empty\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n\n  @if (paginator()) {\n    <div class=\"av-table__pagination\">\n      @if (currentPageLabel() !== '') {\n        <div class=\"av-table__page-label\">\n          <span>{{ formattedPageLabel() }}</span>\n        </div>\n      }\n\n      <div class=\"av-table__pagination-controls\">\n        @if (rowsPerPageOptions().length > 0) {\n          <div class=\"av-table__page-size\">\n            <span>Itens por p\u00E1gina:</span>\n            <av-select\n              [data]=\"pageSizeOptions()\"\n              [searchable]=\"false\"\n              [value]=\"pageSize()\"\n              [variant]=\"variant()\"\n              (valueChange)=\"changePageSize($event)\"\n            />\n          </div>\n        }\n\n        <av-paginator\n          [variant]=\"variant()\"\n          [pageIndex]=\"pageIndex()\"\n          [totalPages]=\"totalPages()\"\n          (pageChanged)=\"changePage($event)\"\n        />\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.av-table{background:var(--av-color-surface);border:1px solid var(--av-color-border-soft);border-radius:var(--av-radius-xl);box-shadow:var(--av-shadow-control);color:var(--av-color-text);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.av-table__header{background:var(--av-color-surface-muted);color:var(--av-color-text-muted);font-size:.75rem;font-weight:700;text-transform:uppercase}.av-table__header tr{border-bottom:1px solid var(--av-color-border-soft)}.av-table__scroll{flex:1;min-height:0;overflow:auto}.av-table__table{border-collapse:collapse;color:var(--av-color-text);font-size:.875rem;text-align:left;width:100%}.av-table__body tr+tr{border-top:1px solid var(--av-color-border-soft)}.av-table__empty{color:var(--av-color-text-subtle);padding:2rem 1.5rem;text-align:center}.av-table__pagination{align-items:center;background:var(--av-color-surface-muted);border-top:1px solid var(--av-color-border-soft);color:var(--av-color-text-muted);display:flex;flex-wrap:wrap;font-size:.75rem;gap:.75rem;justify-content:space-between;padding:.75rem 1rem}.av-table__pagination-controls,.av-table__page-size{align-items:center;display:flex}.av-table__pagination-controls{flex:1;gap:1rem;justify-content:flex-end;min-width:18rem}.av-table__page-size{gap:.5rem;white-space:nowrap}.av-table__page-size av-select{min-width:5rem}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: false }] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], currentPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageLabel", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }], onSort: [{ type: i0.Output, args: ["onSort"] }], onPage: [{ type: i0.Output, args: ["onPage"] }], headerTemplate: [{ type: i0.ContentChild, args: ['header', { isSignal: true }] }], bodyTemplate: [{ type: i0.ContentChild, args: ['body', { isSignal: true }] }] } });
 
+class AvCalendar {
+    config = inject(VISUALS_CONFIG);
+    themeService = inject(ThemeService);
+    events = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    locale = input('pt-BR', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    maxVisibleEvents = input(3, { ...(ngDevMode ? { debugName: "maxVisibleEvents" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    rounded = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+    selectedDate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+    showAdjacentDays = input(true, { ...(ngDevMode ? { debugName: "showAdjacentDays" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    view = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    viewDate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
+    weekdayFormat = input('short', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayFormat" }] : /* istanbul ignore next */ []));
+    dateSelect = output();
+    eventSelect = output();
+    selectedDateChange = output();
+    viewChange = output();
+    viewDateChange = output();
+    currentView = signal('month', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentView" }] : /* istanbul ignore next */ []));
+    currentViewDate = signal(this.startOfMonth(new Date()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentViewDate" }] : /* istanbul ignore next */ []));
+    currentSelectedDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSelectedDate" }] : /* istanbul ignore next */ []));
+    activeVariant = computed(() => this.variant(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
+    themeVars = computed(() => {
+        const variant = this.activeVariant();
+        const isDark = this.themeService.dark();
+        const accent = `var(--av-${variant}-${isDark ? 400 : 500})`;
+        return {
+            '--av-calendar-accent': accent,
+            '--av-calendar-accent-strong': `var(--av-${variant}-${isDark ? 300 : 700})`,
+            '--av-calendar-accent-soft': isDark
+                ? `color-mix(in srgb, var(--av-${variant}-400) 16%, transparent)`
+                : `var(--av-${variant}-50)`,
+            '--av-calendar-bg': 'var(--av-color-surface)',
+            '--av-calendar-border': 'var(--av-color-border-soft)',
+            '--av-calendar-cell-bg': 'var(--av-color-surface)',
+            '--av-calendar-cell-muted-bg': 'var(--av-color-surface-muted)',
+            '--av-calendar-panel-bg': 'var(--av-color-surface-raised)',
+            '--av-calendar-shadow': 'var(--av-shadow-raised)',
+            '--av-calendar-text': 'var(--av-color-text)',
+            '--av-calendar-muted': 'var(--av-color-text-muted)',
+            '--av-calendar-radius': this.roundedStyle(),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "themeVars" }] : /* istanbul ignore next */ []));
+    eventEntries = computed(() => {
+        return this.events()
+            .map((event) => this.normalizeEvent(event))
+            .filter((event) => event !== null)
+            .sort((a, b) => a.start.getTime() - b.start.getTime());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "eventEntries" }] : /* istanbul ignore next */ []));
+    weekdayLabels = computed(() => {
+        const firstDay = this.safeFirstDayOfWeek();
+        const formatter = new Intl.DateTimeFormat(this.locale(), { weekday: this.weekdayFormat() });
+        const sunday = new Date(2026, 0, 4);
+        return Array.from({ length: 7 }, (_, index) => {
+            const date = this.addDays(sunday, firstDay + index);
+            return formatter.format(date);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
+    monthLabel = computed(() => {
+        return new Intl.DateTimeFormat(this.locale(), {
+            month: 'long',
+            year: 'numeric',
+        }).format(this.currentViewDate());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+    yearLabel = computed(() => String(this.currentViewDate().getFullYear()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearLabel" }] : /* istanbul ignore next */ []));
+    monthDays = computed(() => {
+        return this.buildMonthDays(this.currentViewDate());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthDays" }] : /* istanbul ignore next */ []));
+    yearMonths = computed(() => {
+        const year = this.currentViewDate().getFullYear();
+        const monthFormatter = new Intl.DateTimeFormat(this.locale(), { month: 'long' });
+        return Array.from({ length: 12 }, (_, month) => {
+            const date = new Date(year, month, 1);
+            const days = this.buildMonthDays(date);
+            const events = this.eventEntries().filter(({ start, end }) => {
+                const monthStart = this.startOfMonth(date);
+                const monthEnd = this.endOfMonth(date);
+                return start <= monthEnd && end >= monthStart;
+            });
+            return {
+                date,
+                days,
+                eventCount: events.length,
+                key: `${year}-${month}`,
+                label: monthFormatter.format(date),
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearMonths" }] : /* istanbul ignore next */ []));
+    selectedSummary = computed(() => {
+        const selectedDate = this.currentSelectedDate();
+        if (!selectedDate)
+            return null;
+        return {
+            date: selectedDate,
+            events: this.eventsForDate(selectedDate),
+            label: new Intl.DateTimeFormat(this.locale(), {
+                day: '2-digit',
+                month: 'long',
+                year: 'numeric',
+            }).format(selectedDate),
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedSummary" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const view = this.view();
+            if (view !== undefined) {
+                this.currentView.set(this.safeView(view));
+            }
+        });
+        effect(() => {
+            const date = this.viewDate();
+            if (date !== undefined) {
+                this.currentViewDate.set(this.startOfMonth(this.toDate(date) ?? new Date()));
+            }
+        });
+        effect(() => {
+            const date = this.selectedDate();
+            if (date !== undefined) {
+                this.currentSelectedDate.set(this.toDate(date));
+            }
+        });
+    }
+    get title() {
+        return this.currentView() === 'year' ? this.yearLabel() : this.monthLabel();
+    }
+    previous() {
+        const current = this.currentViewDate();
+        const next = this.currentView() === 'year'
+            ? new Date(current.getFullYear() - 1, 0, 1)
+            : new Date(current.getFullYear(), current.getMonth() - 1, 1);
+        this.setViewDate(next);
+    }
+    next() {
+        const current = this.currentViewDate();
+        const next = this.currentView() === 'year'
+            ? new Date(current.getFullYear() + 1, 0, 1)
+            : new Date(current.getFullYear(), current.getMonth() + 1, 1);
+        this.setViewDate(next);
+    }
+    goToday() {
+        const today = this.stripTime(new Date());
+        this.setViewDate(today);
+        this.selectDate(today);
+    }
+    setView(view) {
+        const next = this.safeView(view);
+        if (next === this.currentView())
+            return;
+        this.currentView.set(next);
+        this.viewChange.emit(next);
+    }
+    openMonth(date) {
+        this.setViewDate(date);
+        this.setView('month');
+    }
+    selectDay(day) {
+        if (day.isAdjacent && !this.showAdjacentDays())
+            return;
+        this.selectDate(day.date);
+    }
+    handleDayKeydown(event, day) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        this.selectDay(day);
+    }
+    selectEvent(event, date, mouseEvent) {
+        mouseEvent.stopPropagation();
+        if (event.disabled)
+            return;
+        this.eventSelect.emit({
+            date: this.cloneDate(date),
+            event,
+        });
+    }
+    visibleEvents(events) {
+        return events.slice(0, this.safeMaxVisibleEvents());
+    }
+    hiddenEventCount(events) {
+        return Math.max(0, events.length - this.safeMaxVisibleEvents());
+    }
+    dotEvents(events) {
+        return events.slice(0, 4);
+    }
+    eventColor(event) {
+        if (event.color)
+            return event.color;
+        const variant = event.variant || this.activeVariant();
+        const shade = this.themeService.dark() ? 400 : 500;
+        return `var(--av-${variant}-${shade})`;
+    }
+    eventTimeLabel(event) {
+        if (event.allDay)
+            return 'Dia todo';
+        const start = this.toDate(event.start);
+        if (!start)
+            return '';
+        return new Intl.DateTimeFormat(this.locale(), {
+            hour: '2-digit',
+            minute: '2-digit',
+        }).format(start);
+    }
+    dayAriaLabel(day) {
+        const label = new Intl.DateTimeFormat(this.locale(), {
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        }).format(day.date);
+        if (!day.events.length)
+            return label;
+        return `${label}, ${day.events.length} evento${day.events.length === 1 ? '' : 's'}`;
+    }
+    trackEvent(_index, event) {
+        return event.id;
+    }
+    trackDay(_index, day) {
+        return day.key;
+    }
+    selectDate(date) {
+        const selected = this.stripTime(date);
+        const events = this.eventsForDate(selected);
+        this.currentSelectedDate.set(selected);
+        this.selectedDateChange.emit(this.cloneDate(selected));
+        this.dateSelect.emit({
+            date: this.cloneDate(selected),
+            events,
+        });
+    }
+    setViewDate(date) {
+        const next = this.startOfMonth(date);
+        this.currentViewDate.set(next);
+        this.viewDateChange.emit(this.cloneDate(next));
+    }
+    buildMonthDays(date) {
+        const monthStart = this.startOfMonth(date);
+        const monthEnd = this.endOfMonth(date);
+        const start = this.startOfWeek(monthStart);
+        const end = this.endOfWeek(monthEnd);
+        const days = [];
+        for (let day = start; day <= end; day = this.addDays(day, 1)) {
+            const dayDate = this.stripTime(day);
+            const isCurrentMonth = dayDate.getMonth() === monthStart.getMonth();
+            days.push({
+                date: dayDate,
+                events: this.eventsForDate(dayDate),
+                isAdjacent: !isCurrentMonth,
+                isCurrentMonth,
+                isSelected: this.isSameDay(dayDate, this.currentSelectedDate()),
+                isToday: this.isSameDay(dayDate, new Date()),
+                key: this.dateKey(dayDate),
+            });
+        }
+        return days;
+    }
+    eventsForDate(date) {
+        const day = this.stripTime(date);
+        return this.eventEntries()
+            .filter(({ start, end }) => start <= day && end >= day)
+            .map(({ event }) => event);
+    }
+    normalizeEvent(event) {
+        const start = this.toDate(event.start);
+        if (!start)
+            return null;
+        const end = this.toDate(event.end ?? event.start) ?? start;
+        const startDay = this.stripTime(start);
+        const endDay = this.stripTime(end);
+        return {
+            event,
+            start: startDay,
+            end: endDay >= startDay ? endDay : startDay,
+        };
+    }
+    roundedStyle() {
+        const rounded = this.rounded();
+        return typeof rounded === 'string'
+            ? `var(--av-radius-${rounded})`
+            : `${rounded}px`;
+    }
+    safeFirstDayOfWeek() {
+        const firstDay = Math.trunc(Number(this.firstDayOfWeek()));
+        if (!Number.isFinite(firstDay))
+            return 0;
+        return ((firstDay % 7) + 7) % 7;
+    }
+    safeMaxVisibleEvents() {
+        const max = Math.trunc(Number(this.maxVisibleEvents()));
+        return Number.isFinite(max) && max > 0 ? max : 3;
+    }
+    safeView(view) {
+        return view === 'year' ? 'year' : 'month';
+    }
+    startOfMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth(), 1);
+    }
+    endOfMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+    }
+    startOfWeek(date) {
+        const day = this.stripTime(date);
+        const offset = (day.getDay() - this.safeFirstDayOfWeek() + 7) % 7;
+        return this.addDays(day, -offset);
+    }
+    endOfWeek(date) {
+        return this.addDays(this.startOfWeek(date), 6);
+    }
+    addDays(date, days) {
+        const next = this.cloneDate(date);
+        next.setDate(next.getDate() + days);
+        return next;
+    }
+    stripTime(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    cloneDate(date) {
+        return new Date(date.getTime());
+    }
+    toDate(value) {
+        if (value === null || value === undefined || value === '')
+            return null;
+        const date = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+        return Number.isNaN(date.getTime()) ? null : date;
+    }
+    isSameDay(first, second) {
+        if (!first || !second)
+            return false;
+        return first.getDate() === second.getDate()
+            && first.getMonth() === second.getMonth()
+            && first.getFullYear() === second.getFullYear();
+    }
+    dateKey(date) {
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${date.getFullYear()}-${month}-${day}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AvCalendar, isStandalone: true, selector: "av-calendar", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleEvents: { classPropertyName: "maxVisibleEvents", publicName: "maxVisibleEvents", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null }, showAdjacentDays: { classPropertyName: "showAdjacentDays", publicName: "showAdjacentDays", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, viewDate: { classPropertyName: "viewDate", publicName: "viewDate", isSignal: true, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateSelect: "dateSelect", eventSelect: "eventSelect", selectedDateChange: "selectedDateChange", viewChange: "viewChange", viewDateChange: "viewDateChange" }, ngImport: i0, template: "<div class=\"av-calendar\" [ngStyle]=\"themeVars()\">\n  <header class=\"av-calendar__header\">\n    <div class=\"av-calendar__nav\">\n      <button type=\"button\" class=\"av-calendar__nav-button\" (click)=\"previous()\" aria-label=\"Periodo anterior\">\n        <span av-icon name=\"chevron_left\"></span>\n      </button>\n\n      <h2 class=\"av-calendar__title\">{{ title }}</h2>\n\n      <button type=\"button\" class=\"av-calendar__nav-button\" (click)=\"next()\" aria-label=\"Proximo periodo\">\n        <span av-icon name=\"chevron_right\"></span>\n      </button>\n    </div>\n\n    <div class=\"av-calendar__actions\">\n      <button type=\"button\" class=\"av-calendar__today\" (click)=\"goToday()\">Hoje</button>\n\n      <div class=\"av-calendar__view-switch\" role=\"tablist\" aria-label=\"Visualizacao do calendario\">\n        <button\n          type=\"button\"\n          class=\"av-calendar__view-button\"\n          [class.av-calendar__view-button--active]=\"currentView() === 'month'\"\n          [attr.aria-selected]=\"currentView() === 'month'\"\n          role=\"tab\"\n          (click)=\"setView('month')\"\n        >\n          Mes\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"av-calendar__view-button\"\n          [class.av-calendar__view-button--active]=\"currentView() === 'year'\"\n          [attr.aria-selected]=\"currentView() === 'year'\"\n          role=\"tab\"\n          (click)=\"setView('year')\"\n        >\n          Ano\n        </button>\n      </div>\n    </div>\n  </header>\n\n  @if (currentView() === 'month') {\n    <section class=\"av-calendar__month\" [attr.aria-label]=\"monthLabel()\">\n      <div class=\"av-calendar__weekdays\">\n        @for (weekday of weekdayLabels(); track weekday) {\n          <span class=\"av-calendar__weekday\">{{ weekday }}</span>\n        }\n      </div>\n\n      <div class=\"av-calendar__month-grid\">\n        @for (day of monthDays(); track trackDay($index, day)) {\n          <div\n            class=\"av-calendar__day\"\n            [class.av-calendar__day--adjacent]=\"day.isAdjacent\"\n            [class.av-calendar__day--hidden]=\"day.isAdjacent && !showAdjacentDays()\"\n            [class.av-calendar__day--selected]=\"day.isSelected\"\n            [class.av-calendar__day--today]=\"day.isToday\"\n            [attr.aria-label]=\"dayAriaLabel(day)\"\n            [attr.tabindex]=\"day.isAdjacent && !showAdjacentDays() ? -1 : 0\"\n            role=\"button\"\n            (click)=\"selectDay(day)\"\n            (keydown)=\"handleDayKeydown($event, day)\"\n          >\n            <span class=\"av-calendar__day-number\">{{ day.date.getDate() }}</span>\n\n            @if (day.events.length) {\n              <div class=\"av-calendar__event-list\">\n                @for (event of visibleEvents(day.events); track trackEvent($index, event)) {\n                  <button\n                    type=\"button\"\n                    class=\"av-calendar__event\"\n                    [class.av-calendar__event--disabled]=\"event.disabled\"\n                    [style.--av-calendar-event-color]=\"eventColor(event)\"\n                    [title]=\"event.title\"\n                    (click)=\"selectEvent(event, day.date, $event)\"\n                  >\n                    @if (!event.allDay) {\n                      <span class=\"av-calendar__event-time\">{{ eventTimeLabel(event) }}</span>\n                    }\n                    <span class=\"av-calendar__event-title\">{{ event.title }}</span>\n                  </button>\n                }\n\n                @if (hiddenEventCount(day.events) > 0) {\n                  <span class=\"av-calendar__event-more\">+{{ hiddenEventCount(day.events) }}</span>\n                }\n              </div>\n\n              <div class=\"av-calendar__dots\" aria-hidden=\"true\">\n                @for (event of dotEvents(day.events); track trackEvent($index, event)) {\n                  <span class=\"av-calendar__dot\" [style.background]=\"eventColor(event)\"></span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </section>\n  } @else {\n    <section class=\"av-calendar__year\" [attr.aria-label]=\"yearLabel()\">\n      @for (month of yearMonths(); track month.key) {\n        <article class=\"av-calendar__year-month\">\n          <button type=\"button\" class=\"av-calendar__year-month-title\" (click)=\"openMonth(month.date)\">\n            <span>{{ month.label }}</span>\n            @if (month.eventCount) {\n              <span class=\"av-calendar__year-month-count\">{{ month.eventCount }}</span>\n            }\n          </button>\n\n          <div class=\"av-calendar__mini-weekdays\">\n            @for (weekday of weekdayLabels(); track weekday) {\n              <span>{{ weekday.slice(0, 1) }}</span>\n            }\n          </div>\n\n          <div class=\"av-calendar__mini-grid\">\n            @for (day of month.days; track trackDay($index, day)) {\n              <button\n                type=\"button\"\n                class=\"av-calendar__mini-day\"\n                [class.av-calendar__mini-day--adjacent]=\"day.isAdjacent\"\n                [class.av-calendar__mini-day--selected]=\"day.isSelected\"\n                [class.av-calendar__mini-day--today]=\"day.isToday\"\n                [disabled]=\"day.isAdjacent\"\n                [attr.aria-label]=\"dayAriaLabel(day)\"\n                (click)=\"selectDay(day)\"\n              >\n                @if (!day.isAdjacent) {\n                  <span class=\"av-calendar__mini-day-number\">{{ day.date.getDate() }}</span>\n\n                  @if (day.events.length) {\n                    <span class=\"av-calendar__mini-dots\" aria-hidden=\"true\">\n                      @for (event of dotEvents(day.events); track trackEvent($index, event)) {\n                        <span class=\"av-calendar__mini-dot\" [style.background]=\"eventColor(event)\"></span>\n                      }\n                    </span>\n                  }\n                }\n              </button>\n            }\n          </div>\n        </article>\n      }\n    </section>\n  }\n\n  @if (selectedSummary(); as selected) {\n    <section class=\"av-calendar__selected\">\n      <div class=\"av-calendar__selected-header\">\n        <span class=\"av-calendar__selected-date\">{{ selected.label }}</span>\n        <span class=\"av-calendar__selected-count\">{{ selected.events.length }}</span>\n      </div>\n\n      @if (selected.events.length) {\n        <div class=\"av-calendar__selected-events\">\n          @for (event of selected.events; track trackEvent($index, event)) {\n            <button\n              type=\"button\"\n              class=\"av-calendar__selected-event\"\n              [style.--av-calendar-event-color]=\"eventColor(event)\"\n              (click)=\"selectEvent(event, selected.date, $event)\"\n            >\n              <span class=\"av-calendar__selected-event-body\">\n                <span class=\"av-calendar__selected-event-title\">{{ event.title }}</span>\n                <span class=\"av-calendar__selected-event-time\">{{ eventTimeLabel(event) }}</span>\n              </span>\n            </button>\n          }\n        </div>\n      } @else {\n        <span class=\"av-calendar__empty\">Sem eventos</span>\n      }\n    </section>\n  }\n</div>\n", styles: [":host{container-type:inline-size;display:block}.av-calendar{background:var(--av-calendar-bg);border:1px solid var(--av-calendar-border);border-radius:var(--av-calendar-radius);box-sizing:border-box;color:var(--av-calendar-text);display:grid;gap:1rem;padding:1rem}.av-calendar__header{align-items:center;display:flex;gap:.75rem;justify-content:space-between}.av-calendar__nav,.av-calendar__actions{align-items:center;display:flex;gap:.5rem}.av-calendar__title{color:var(--av-calendar-text);font-size:1.05rem;font-weight:800;line-height:1.2;margin:0;text-transform:capitalize}.av-calendar__nav-button,.av-calendar__today,.av-calendar__view-button{align-items:center;background:var(--av-calendar-cell-bg);border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);color:var(--av-calendar-text);cursor:pointer;display:inline-flex;font:inherit;justify-content:center}.av-calendar__nav-button{height:2.25rem;padding:0;width:2.25rem}.av-calendar__today,.av-calendar__view-button{font-size:.8125rem;font-weight:800;min-height:2.25rem;padding:.45rem .7rem}.av-calendar__nav-button:hover,.av-calendar__today:hover,.av-calendar__view-button:hover,.av-calendar__view-button--active{background:var(--av-calendar-accent-soft);border-color:color-mix(in srgb,var(--av-calendar-accent) 34%,var(--av-calendar-border));color:var(--av-calendar-accent-strong)}.av-calendar__nav-button:focus-visible,.av-calendar__today:focus-visible,.av-calendar__view-button:focus-visible,.av-calendar__day:focus-visible,.av-calendar__mini-day:focus-visible,.av-calendar__event:focus-visible,.av-calendar__selected-event:focus-visible,.av-calendar__year-month-title:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-calendar-accent) 24%,transparent);outline:none}.av-calendar__view-switch{background:var(--av-calendar-cell-muted-bg);border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);display:inline-flex;padding:.125rem}.av-calendar__view-button{background:transparent;border-color:transparent;min-height:2rem;padding-inline:.65rem}.av-calendar__weekdays,.av-calendar__month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.av-calendar__weekdays{gap:.25rem;margin-bottom:.25rem}.av-calendar__weekday{color:var(--av-calendar-muted);font-size:.72rem;font-weight:800;padding:.25rem;text-align:center;text-transform:capitalize}.av-calendar__month-grid{background:var(--av-calendar-border);border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);gap:1px;overflow:hidden}.av-calendar__day{background:var(--av-calendar-cell-bg);box-sizing:border-box;cursor:pointer;display:grid;grid-template-rows:auto 1fr auto;min-height:7rem;min-width:0;padding:.5rem}.av-calendar__day:hover{background:var(--av-calendar-accent-soft)}.av-calendar__day--adjacent{background:var(--av-calendar-cell-muted-bg);color:var(--av-calendar-muted)}.av-calendar__day--hidden{cursor:default;opacity:.28}.av-calendar__day--selected{box-shadow:inset 0 0 0 2px var(--av-calendar-accent)}.av-calendar__day--today .av-calendar__day-number,.av-calendar__mini-day--today .av-calendar__mini-day-number{background:var(--av-calendar-accent);color:var(--av-white)}.av-calendar__day-number{align-items:center;border-radius:var(--av-radius-full);display:inline-flex;font-size:.8125rem;font-weight:800;height:1.7rem;justify-content:center;justify-self:end;line-height:1;width:1.7rem}.av-calendar__event-list{align-content:start;display:grid;gap:.25rem;margin-top:.35rem;min-width:0}.av-calendar__event,.av-calendar__event-more{border-radius:var(--av-radius-xs);font-size:.72rem;line-height:1.2;min-width:0}.av-calendar__event{align-items:center;background:color-mix(in srgb,var(--av-calendar-event-color) 12%,transparent);border:0;border-left:3px solid var(--av-calendar-event-color);color:var(--av-calendar-text);cursor:pointer;display:flex;gap:.3rem;padding:.25rem .35rem;text-align:left}.av-calendar__event:hover{background:color-mix(in srgb,var(--av-calendar-event-color) 18%,transparent)}.av-calendar__event--disabled{cursor:not-allowed;opacity:.52}.av-calendar__event-time{color:var(--av-calendar-muted);flex:0 0 auto;font-weight:800}.av-calendar__event-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-calendar__event-more{color:var(--av-calendar-muted);font-weight:800;padding-inline:.35rem}.av-calendar__dots,.av-calendar__mini-dots{align-items:center;display:flex;gap:.16rem;justify-content:center}.av-calendar__dots{display:none;margin-top:.2rem}.av-calendar__dot,.av-calendar__mini-dot{border-radius:var(--av-radius-full);flex:0 0 auto;height:.34rem;width:.34rem}.av-calendar__year{display:grid;gap:.75rem;grid-template-columns:repeat(4,minmax(0,1fr))}.av-calendar__year-month{background:var(--av-calendar-panel-bg);border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);display:grid;gap:.35rem;padding:.625rem}.av-calendar__year-month-title{align-items:center;background:transparent;border:0;border-radius:var(--av-radius-sm);color:var(--av-calendar-text);cursor:pointer;display:flex;font:inherit;font-size:.85rem;font-weight:800;justify-content:space-between;min-height:2rem;padding:.25rem .35rem;text-align:left;text-transform:capitalize}.av-calendar__year-month-count{background:var(--av-calendar-accent);border-radius:var(--av-radius-full);color:var(--av-white);font-size:.68rem;padding:.25rem .35rem}.av-calendar__mini-weekdays,.av-calendar__mini-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.av-calendar__mini-weekdays{color:var(--av-calendar-muted);font-size:.64rem;font-weight:800;text-align:center}.av-calendar__mini-day{align-items:center;aspect-ratio:1;background:transparent;border:0;border-radius:var(--av-radius-sm);color:var(--av-calendar-text);cursor:pointer;display:grid;gap:.08rem;justify-items:center;padding:.12rem}.av-calendar__mini-day:not(:disabled):hover,.av-calendar__mini-day--selected{background:var(--av-calendar-accent-soft);color:var(--av-calendar-accent-strong)}.av-calendar__mini-day-number{align-items:center;border-radius:var(--av-radius-full);display:inline-flex;font-size:.68rem;font-weight:800;height:1.25rem;justify-content:center;line-height:1;width:1.25rem}@container (max-width: 56rem){.av-calendar__year{grid-template-columns:repeat(3,minmax(0,1fr))}}@container (max-width: 42rem){.av-calendar__year{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (max-width: 28rem){.av-calendar__year{grid-template-columns:1fr}}.av-calendar__selected{border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);padding:.75rem}.av-calendar__selected-header,.av-calendar__selected-event{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.av-calendar__selected-date,.av-calendar__selected-event-title{font-weight:800}.av-calendar__selected-event-body{min-width:0}.av-calendar__selected-event{background:transparent;border:0;border-left:3px solid var(--av-calendar-event-color);color:var(--av-calendar-text);cursor:pointer;font:inherit;padding:.4rem;text-align:left;width:100%}.av-calendar__selected-event:hover{background:color-mix(in srgb,var(--av-calendar-event-color) 12%,transparent)}.av-calendar__selected-event-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-calendar__selected-count,.av-calendar__selected-event-time,.av-calendar__empty{color:var(--av-calendar-muted);font-size:.75rem;font-weight:700}@media(max-width:640px){.av-calendar{gap:.75rem;padding:.75rem}.av-calendar__header{align-items:stretch;display:grid}.av-calendar__nav,.av-calendar__actions{justify-content:space-between}.av-calendar__title{font-size:.98rem}.av-calendar__weekday{font-size:.68rem;padding:.2rem 0}.av-calendar__day{align-content:start;aspect-ratio:1;gap:.12rem;min-height:0;padding:.3rem .18rem}.av-calendar__day-number{font-size:.75rem;height:1.45rem;justify-self:center;width:1.45rem}.av-calendar__event-list{display:none}.av-calendar__dots{display:flex}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AvIcon, selector: "span[av-icon], i[av-icon]", inputs: ["name", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AvCalendar, decorators: [{
+            type: Component,
+            args: [{ imports: [CommonModule, AvIcon], selector: 'av-calendar', standalone: true, template: "<div class=\"av-calendar\" [ngStyle]=\"themeVars()\">\n  <header class=\"av-calendar__header\">\n    <div class=\"av-calendar__nav\">\n      <button type=\"button\" class=\"av-calendar__nav-button\" (click)=\"previous()\" aria-label=\"Periodo anterior\">\n        <span av-icon name=\"chevron_left\"></span>\n      </button>\n\n      <h2 class=\"av-calendar__title\">{{ title }}</h2>\n\n      <button type=\"button\" class=\"av-calendar__nav-button\" (click)=\"next()\" aria-label=\"Proximo periodo\">\n        <span av-icon name=\"chevron_right\"></span>\n      </button>\n    </div>\n\n    <div class=\"av-calendar__actions\">\n      <button type=\"button\" class=\"av-calendar__today\" (click)=\"goToday()\">Hoje</button>\n\n      <div class=\"av-calendar__view-switch\" role=\"tablist\" aria-label=\"Visualizacao do calendario\">\n        <button\n          type=\"button\"\n          class=\"av-calendar__view-button\"\n          [class.av-calendar__view-button--active]=\"currentView() === 'month'\"\n          [attr.aria-selected]=\"currentView() === 'month'\"\n          role=\"tab\"\n          (click)=\"setView('month')\"\n        >\n          Mes\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"av-calendar__view-button\"\n          [class.av-calendar__view-button--active]=\"currentView() === 'year'\"\n          [attr.aria-selected]=\"currentView() === 'year'\"\n          role=\"tab\"\n          (click)=\"setView('year')\"\n        >\n          Ano\n        </button>\n      </div>\n    </div>\n  </header>\n\n  @if (currentView() === 'month') {\n    <section class=\"av-calendar__month\" [attr.aria-label]=\"monthLabel()\">\n      <div class=\"av-calendar__weekdays\">\n        @for (weekday of weekdayLabels(); track weekday) {\n          <span class=\"av-calendar__weekday\">{{ weekday }}</span>\n        }\n      </div>\n\n      <div class=\"av-calendar__month-grid\">\n        @for (day of monthDays(); track trackDay($index, day)) {\n          <div\n            class=\"av-calendar__day\"\n            [class.av-calendar__day--adjacent]=\"day.isAdjacent\"\n            [class.av-calendar__day--hidden]=\"day.isAdjacent && !showAdjacentDays()\"\n            [class.av-calendar__day--selected]=\"day.isSelected\"\n            [class.av-calendar__day--today]=\"day.isToday\"\n            [attr.aria-label]=\"dayAriaLabel(day)\"\n            [attr.tabindex]=\"day.isAdjacent && !showAdjacentDays() ? -1 : 0\"\n            role=\"button\"\n            (click)=\"selectDay(day)\"\n            (keydown)=\"handleDayKeydown($event, day)\"\n          >\n            <span class=\"av-calendar__day-number\">{{ day.date.getDate() }}</span>\n\n            @if (day.events.length) {\n              <div class=\"av-calendar__event-list\">\n                @for (event of visibleEvents(day.events); track trackEvent($index, event)) {\n                  <button\n                    type=\"button\"\n                    class=\"av-calendar__event\"\n                    [class.av-calendar__event--disabled]=\"event.disabled\"\n                    [style.--av-calendar-event-color]=\"eventColor(event)\"\n                    [title]=\"event.title\"\n                    (click)=\"selectEvent(event, day.date, $event)\"\n                  >\n                    @if (!event.allDay) {\n                      <span class=\"av-calendar__event-time\">{{ eventTimeLabel(event) }}</span>\n                    }\n                    <span class=\"av-calendar__event-title\">{{ event.title }}</span>\n                  </button>\n                }\n\n                @if (hiddenEventCount(day.events) > 0) {\n                  <span class=\"av-calendar__event-more\">+{{ hiddenEventCount(day.events) }}</span>\n                }\n              </div>\n\n              <div class=\"av-calendar__dots\" aria-hidden=\"true\">\n                @for (event of dotEvents(day.events); track trackEvent($index, event)) {\n                  <span class=\"av-calendar__dot\" [style.background]=\"eventColor(event)\"></span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </section>\n  } @else {\n    <section class=\"av-calendar__year\" [attr.aria-label]=\"yearLabel()\">\n      @for (month of yearMonths(); track month.key) {\n        <article class=\"av-calendar__year-month\">\n          <button type=\"button\" class=\"av-calendar__year-month-title\" (click)=\"openMonth(month.date)\">\n            <span>{{ month.label }}</span>\n            @if (month.eventCount) {\n              <span class=\"av-calendar__year-month-count\">{{ month.eventCount }}</span>\n            }\n          </button>\n\n          <div class=\"av-calendar__mini-weekdays\">\n            @for (weekday of weekdayLabels(); track weekday) {\n              <span>{{ weekday.slice(0, 1) }}</span>\n            }\n          </div>\n\n          <div class=\"av-calendar__mini-grid\">\n            @for (day of month.days; track trackDay($index, day)) {\n              <button\n                type=\"button\"\n                class=\"av-calendar__mini-day\"\n                [class.av-calendar__mini-day--adjacent]=\"day.isAdjacent\"\n                [class.av-calendar__mini-day--selected]=\"day.isSelected\"\n                [class.av-calendar__mini-day--today]=\"day.isToday\"\n                [disabled]=\"day.isAdjacent\"\n                [attr.aria-label]=\"dayAriaLabel(day)\"\n                (click)=\"selectDay(day)\"\n              >\n                @if (!day.isAdjacent) {\n                  <span class=\"av-calendar__mini-day-number\">{{ day.date.getDate() }}</span>\n\n                  @if (day.events.length) {\n                    <span class=\"av-calendar__mini-dots\" aria-hidden=\"true\">\n                      @for (event of dotEvents(day.events); track trackEvent($index, event)) {\n                        <span class=\"av-calendar__mini-dot\" [style.background]=\"eventColor(event)\"></span>\n                      }\n                    </span>\n                  }\n                }\n              </button>\n            }\n          </div>\n        </article>\n      }\n    </section>\n  }\n\n  @if (selectedSummary(); as selected) {\n    <section class=\"av-calendar__selected\">\n      <div class=\"av-calendar__selected-header\">\n        <span class=\"av-calendar__selected-date\">{{ selected.label }}</span>\n        <span class=\"av-calendar__selected-count\">{{ selected.events.length }}</span>\n      </div>\n\n      @if (selected.events.length) {\n        <div class=\"av-calendar__selected-events\">\n          @for (event of selected.events; track trackEvent($index, event)) {\n            <button\n              type=\"button\"\n              class=\"av-calendar__selected-event\"\n              [style.--av-calendar-event-color]=\"eventColor(event)\"\n              (click)=\"selectEvent(event, selected.date, $event)\"\n            >\n              <span class=\"av-calendar__selected-event-body\">\n                <span class=\"av-calendar__selected-event-title\">{{ event.title }}</span>\n                <span class=\"av-calendar__selected-event-time\">{{ eventTimeLabel(event) }}</span>\n              </span>\n            </button>\n          }\n        </div>\n      } @else {\n        <span class=\"av-calendar__empty\">Sem eventos</span>\n      }\n    </section>\n  }\n</div>\n", styles: [":host{container-type:inline-size;display:block}.av-calendar{background:var(--av-calendar-bg);border:1px solid var(--av-calendar-border);border-radius:var(--av-calendar-radius);box-sizing:border-box;color:var(--av-calendar-text);display:grid;gap:1rem;padding:1rem}.av-calendar__header{align-items:center;display:flex;gap:.75rem;justify-content:space-between}.av-calendar__nav,.av-calendar__actions{align-items:center;display:flex;gap:.5rem}.av-calendar__title{color:var(--av-calendar-text);font-size:1.05rem;font-weight:800;line-height:1.2;margin:0;text-transform:capitalize}.av-calendar__nav-button,.av-calendar__today,.av-calendar__view-button{align-items:center;background:var(--av-calendar-cell-bg);border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);color:var(--av-calendar-text);cursor:pointer;display:inline-flex;font:inherit;justify-content:center}.av-calendar__nav-button{height:2.25rem;padding:0;width:2.25rem}.av-calendar__today,.av-calendar__view-button{font-size:.8125rem;font-weight:800;min-height:2.25rem;padding:.45rem .7rem}.av-calendar__nav-button:hover,.av-calendar__today:hover,.av-calendar__view-button:hover,.av-calendar__view-button--active{background:var(--av-calendar-accent-soft);border-color:color-mix(in srgb,var(--av-calendar-accent) 34%,var(--av-calendar-border));color:var(--av-calendar-accent-strong)}.av-calendar__nav-button:focus-visible,.av-calendar__today:focus-visible,.av-calendar__view-button:focus-visible,.av-calendar__day:focus-visible,.av-calendar__mini-day:focus-visible,.av-calendar__event:focus-visible,.av-calendar__selected-event:focus-visible,.av-calendar__year-month-title:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--av-calendar-accent) 24%,transparent);outline:none}.av-calendar__view-switch{background:var(--av-calendar-cell-muted-bg);border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);display:inline-flex;padding:.125rem}.av-calendar__view-button{background:transparent;border-color:transparent;min-height:2rem;padding-inline:.65rem}.av-calendar__weekdays,.av-calendar__month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.av-calendar__weekdays{gap:.25rem;margin-bottom:.25rem}.av-calendar__weekday{color:var(--av-calendar-muted);font-size:.72rem;font-weight:800;padding:.25rem;text-align:center;text-transform:capitalize}.av-calendar__month-grid{background:var(--av-calendar-border);border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);gap:1px;overflow:hidden}.av-calendar__day{background:var(--av-calendar-cell-bg);box-sizing:border-box;cursor:pointer;display:grid;grid-template-rows:auto 1fr auto;min-height:7rem;min-width:0;padding:.5rem}.av-calendar__day:hover{background:var(--av-calendar-accent-soft)}.av-calendar__day--adjacent{background:var(--av-calendar-cell-muted-bg);color:var(--av-calendar-muted)}.av-calendar__day--hidden{cursor:default;opacity:.28}.av-calendar__day--selected{box-shadow:inset 0 0 0 2px var(--av-calendar-accent)}.av-calendar__day--today .av-calendar__day-number,.av-calendar__mini-day--today .av-calendar__mini-day-number{background:var(--av-calendar-accent);color:var(--av-white)}.av-calendar__day-number{align-items:center;border-radius:var(--av-radius-full);display:inline-flex;font-size:.8125rem;font-weight:800;height:1.7rem;justify-content:center;justify-self:end;line-height:1;width:1.7rem}.av-calendar__event-list{align-content:start;display:grid;gap:.25rem;margin-top:.35rem;min-width:0}.av-calendar__event,.av-calendar__event-more{border-radius:var(--av-radius-xs);font-size:.72rem;line-height:1.2;min-width:0}.av-calendar__event{align-items:center;background:color-mix(in srgb,var(--av-calendar-event-color) 12%,transparent);border:0;border-left:3px solid var(--av-calendar-event-color);color:var(--av-calendar-text);cursor:pointer;display:flex;gap:.3rem;padding:.25rem .35rem;text-align:left}.av-calendar__event:hover{background:color-mix(in srgb,var(--av-calendar-event-color) 18%,transparent)}.av-calendar__event--disabled{cursor:not-allowed;opacity:.52}.av-calendar__event-time{color:var(--av-calendar-muted);flex:0 0 auto;font-weight:800}.av-calendar__event-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-calendar__event-more{color:var(--av-calendar-muted);font-weight:800;padding-inline:.35rem}.av-calendar__dots,.av-calendar__mini-dots{align-items:center;display:flex;gap:.16rem;justify-content:center}.av-calendar__dots{display:none;margin-top:.2rem}.av-calendar__dot,.av-calendar__mini-dot{border-radius:var(--av-radius-full);flex:0 0 auto;height:.34rem;width:.34rem}.av-calendar__year{display:grid;gap:.75rem;grid-template-columns:repeat(4,minmax(0,1fr))}.av-calendar__year-month{background:var(--av-calendar-panel-bg);border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);display:grid;gap:.35rem;padding:.625rem}.av-calendar__year-month-title{align-items:center;background:transparent;border:0;border-radius:var(--av-radius-sm);color:var(--av-calendar-text);cursor:pointer;display:flex;font:inherit;font-size:.85rem;font-weight:800;justify-content:space-between;min-height:2rem;padding:.25rem .35rem;text-align:left;text-transform:capitalize}.av-calendar__year-month-count{background:var(--av-calendar-accent);border-radius:var(--av-radius-full);color:var(--av-white);font-size:.68rem;padding:.25rem .35rem}.av-calendar__mini-weekdays,.av-calendar__mini-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.av-calendar__mini-weekdays{color:var(--av-calendar-muted);font-size:.64rem;font-weight:800;text-align:center}.av-calendar__mini-day{align-items:center;aspect-ratio:1;background:transparent;border:0;border-radius:var(--av-radius-sm);color:var(--av-calendar-text);cursor:pointer;display:grid;gap:.08rem;justify-items:center;padding:.12rem}.av-calendar__mini-day:not(:disabled):hover,.av-calendar__mini-day--selected{background:var(--av-calendar-accent-soft);color:var(--av-calendar-accent-strong)}.av-calendar__mini-day-number{align-items:center;border-radius:var(--av-radius-full);display:inline-flex;font-size:.68rem;font-weight:800;height:1.25rem;justify-content:center;line-height:1;width:1.25rem}@container (max-width: 56rem){.av-calendar__year{grid-template-columns:repeat(3,minmax(0,1fr))}}@container (max-width: 42rem){.av-calendar__year{grid-template-columns:repeat(2,minmax(0,1fr))}}@container (max-width: 28rem){.av-calendar__year{grid-template-columns:1fr}}.av-calendar__selected{border:1px solid var(--av-calendar-border);border-radius:var(--av-radius-sm);padding:.75rem}.av-calendar__selected-header,.av-calendar__selected-event{align-items:center;display:flex;gap:.5rem;justify-content:space-between}.av-calendar__selected-date,.av-calendar__selected-event-title{font-weight:800}.av-calendar__selected-event-body{min-width:0}.av-calendar__selected-event{background:transparent;border:0;border-left:3px solid var(--av-calendar-event-color);color:var(--av-calendar-text);cursor:pointer;font:inherit;padding:.4rem;text-align:left;width:100%}.av-calendar__selected-event:hover{background:color-mix(in srgb,var(--av-calendar-event-color) 12%,transparent)}.av-calendar__selected-event-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.av-calendar__selected-count,.av-calendar__selected-event-time,.av-calendar__empty{color:var(--av-calendar-muted);font-size:.75rem;font-weight:700}@media(max-width:640px){.av-calendar{gap:.75rem;padding:.75rem}.av-calendar__header{align-items:stretch;display:grid}.av-calendar__nav,.av-calendar__actions{justify-content:space-between}.av-calendar__title{font-size:.98rem}.av-calendar__weekday{font-size:.68rem;padding:.2rem 0}.av-calendar__day{align-content:start;aspect-ratio:1;gap:.12rem;min-height:0;padding:.3rem .18rem}.av-calendar__day-number{font-size:.75rem;height:1.45rem;justify-self:center;width:1.45rem}.av-calendar__event-list{display:none}.av-calendar__dots{display:flex}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], maxVisibleEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleEvents", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selectedDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedDate", required: false }] }], showAdjacentDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAdjacentDays", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], viewDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewDate", required: false }] }], weekdayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdayFormat", required: false }] }], dateSelect: [{ type: i0.Output, args: ["dateSelect"] }], eventSelect: [{ type: i0.Output, args: ["eventSelect"] }], selectedDateChange: [{ type: i0.Output, args: ["selectedDateChange"] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], viewDateChange: [{ type: i0.Output, args: ["viewDateChange"] }] } });
+
 class AvBadge {
     config = inject(VISUALS_CONFIG);
     variant = input(this.config.theme.defaultVariant, /* @ts-ignore */
@@ -3289,5 +3880,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvBadge, AvButton, AvCarousel, AvCarouselItem, AvCheckbox, AvCluster, AvCurrencyInput, AvDateTimePicker, AvDivider, AvDropdown, AvFileUpload, AvForm, AvGrid, AvIcon, AvIconRegistry, AvInline, AvInput, AvMultiSelect, AvNavLink, AvPaginator, AvProgressBar, AvProgressBarCircle, AvSelect, AvSidenav, AvSlider, AvStack, AvStep, AvStepper, AvSwitch, AvTab, AvTable, AvTabs, AvText, AvTextArea, AvTooltip, ThemeService, VISUALS_CONFIG, provideAngularVisuals };
+export { AvBadge, AvButton, AvCalendar, AvCard, AvCarousel, AvCarouselItem, AvCheckbox, AvCluster, AvCurrencyInput, AvDateTimePicker, AvDivider, AvDropdown, AvDropdownItem, AvFileUpload, AvForm, AvGrid, AvIcon, AvIconRegistry, AvInline, AvInput, AvMultiSelect, AvNavDropdown, AvNavLink, AvPaginator, AvProgressBar, AvProgressBarCircle, AvSelect, AvSidenav, AvSlider, AvStack, AvStep, AvStepper, AvSwitch, AvTab, AvTable, AvTabs, AvText, AvTextArea, AvTooltip, ThemeService, VISUALS_CONFIG, provideAngularVisuals };
 //# sourceMappingURL=angular-visuals.mjs.map