@momentumcms/ui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/momentumcms-ui.mjs +98 -61
  2. package/fesm2022/momentumcms-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/momentumcms-ui.d.ts +27 -8
package/fesm2022/momentumcms-ui.mjs CHANGED
@@ -3,11 +3,11 @@ import { input, computed, ChangeDetectionStrategy, Component, inject, ElementRef
3
3
  import { DOCUMENT, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
4
4
  import { Overlay } from '@angular/cdk/overlay';
5
5
  import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
6
- import * as i1 from '@angular/aria/menu';
6
+ import * as i1 from '@angular/cdk/a11y';
7
+ import { A11yModule, LiveAnnouncer } from '@angular/cdk/a11y';
8
+ import * as i1$1 from '@angular/aria/menu';
7
9
  import { Menu, MenuItem, MenuBar } from '@angular/aria/menu';
8
10
  import { Subject, map } from 'rxjs';
9
- import * as i1$1 from '@angular/cdk/a11y';
10
- import { A11yModule, LiveAnnouncer } from '@angular/cdk/a11y';
11
11
  import { RouterLink, RouterLinkActive } from '@angular/router';
12
12
  import { BreakpointObserver } from '@angular/cdk/layout';
13
13
  import { toSignal } from '@angular/core/rxjs-interop';
@@ -40,6 +40,8 @@ import { Tree as Tree$1, TreeItem as TreeItem$1, TreeItemGroup } from '@angular/
40
40
  class Badge {
41
41
  variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
42
42
  class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
43
+ /** ARIA role. Set to 'status' for live-region badges, or null for decorative. */
44
+ role = input(null, ...(ngDevMode ? [{ debugName: "role" }] : []));
43
45
  /** Accessible label for screen reader override. */
44
46
  ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
45
47
  hostClass = computed(() => this.class(), ...(ngDevMode ? [{ debugName: "hostClass" }] : []));
@@ -84,19 +86,19 @@ class Badge {
84
86
  }
85
87
  }, ...(ngDevMode ? [{ debugName: "variantBorder" }] : []));
86
88
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Badge, deps: [], target: i0.ɵɵFactoryTarget.Component });
87
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Badge, isStandalone: true, selector: "mcms-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.aria-label": "ariaLabel() || null", "style.--badge-bg": "variantBg()", "style.--badge-color": "variantColor()", "style.--badge-border": "variantBorder()", "class": "hostClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .625rem;font-size:.75rem;font-weight:500;line-height:1.25rem;white-space:nowrap;transition:background-color .15s,color .15s;background-color:var(--badge-bg);color:var(--badge-color);border:1px solid var(--badge-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
89
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Badge, isStandalone: true, selector: "mcms-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "role() || null", "attr.aria-label": "ariaLabel() || null", "style.--badge-bg": "variantBg()", "style.--badge-color": "variantColor()", "style.--badge-border": "variantBorder()", "class": "hostClass()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .625rem;font-size:.75rem;font-weight:500;line-height:1.25rem;white-space:nowrap;transition:background-color .15s,color .15s;background-color:var(--badge-bg);color:var(--badge-color);border:1px solid var(--badge-border)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
88
90
  }
89
91
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Badge, decorators: [{
90
92
  type: Component,
91
93
  args: [{ selector: 'mcms-badge', host: {
92
- role: 'status',
94
+ '[attr.role]': 'role() || null',
93
95
  '[attr.aria-label]': 'ariaLabel() || null',
94
96
  '[style.--badge-bg]': 'variantBg()',
95
97
  '[style.--badge-color]': 'variantColor()',
96
98
  '[style.--badge-border]': 'variantBorder()',
97
99
  '[class]': 'hostClass()',
98
100
  }, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;align-items:center;border-radius:9999px;padding:.125rem .625rem;font-size:.75rem;font-weight:500;line-height:1.25rem;white-space:nowrap;transition:background-color .15s,color .15s;background-color:var(--badge-bg);color:var(--badge-color);border:1px solid var(--badge-border)}\n"] }]
99
- }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
101
+ }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
100
102
 
101
103
  /**
102
104
  * Label component for form fields.
@@ -327,6 +329,7 @@ class Input {
327
329
  name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
328
330
  placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
329
331
  autocomplete = input(undefined, ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
332
+ ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
330
333
  describedBy = input(undefined, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
331
334
  min = input(undefined, ...(ngDevMode ? [{ debugName: "min" }] : []));
332
335
  max = input(undefined, ...(ngDevMode ? [{ debugName: "max" }] : []));
@@ -345,7 +348,7 @@ class Input {
345
348
  return parts.length > 0 ? parts.join(' ') : null;
346
349
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
347
350
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
348
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Input, isStandalone: true, selector: "mcms-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", blurred: "blurred" }, host: { properties: { "class.mcms-input--error": "hasError()", "class.mcms-input--disabled": "disabled()", "attr.id": "null" }, classAttribute: "block" }, ngImport: i0, template: `
351
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Input, isStandalone: true, selector: "mcms-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", blurred: "blurred" }, host: { properties: { "class.mcms-input--error": "hasError()", "class.mcms-input--disabled": "disabled()", "attr.id": "null" }, classAttribute: "block" }, ngImport: i0, template: `
349
352
  <input
350
353
  #inputEl
351
354
  [type]="type()"
@@ -356,6 +359,7 @@ class Input {
356
359
  [placeholder]="placeholder()"
357
360
  [attr.aria-invalid]="hasError() || null"
358
361
  [attr.aria-describedby]="ariaDescribedBy()"
362
+ [attr.aria-label]="ariaLabel() || null"
359
363
  [attr.aria-required]="required() || null"
360
364
  [attr.autocomplete]="autocomplete()"
361
365
  [attr.min]="min()"
@@ -384,6 +388,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
384
388
  [placeholder]="placeholder()"
385
389
  [attr.aria-invalid]="hasError() || null"
386
390
  [attr.aria-describedby]="ariaDescribedBy()"
391
+ [attr.aria-label]="ariaLabel() || null"
387
392
  [attr.aria-required]="required() || null"
388
393
  [attr.autocomplete]="autocomplete()"
389
394
  [attr.min]="min()"
@@ -393,7 +398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
393
398
  (blur)="blurred.emit()"
394
399
  />
395
400
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["input{display:flex;height:2.5rem;width:100%;border-radius:.375rem;border:1px solid hsl(var(--mcms-input));background-color:hsl(var(--mcms-background));padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:hsl(var(--mcms-foreground))}input::placeholder{color:hsl(var(--mcms-muted-foreground))}input:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--mcms-background)),0 0 0 4px hsl(var(--mcms-ring))}input:disabled{cursor:not-allowed;opacity:.5}\n"] }]
396
- }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
401
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
397
402
 
398
403
  /**
399
404
  * Textarea component compatible with Angular Signal Forms.
@@ -419,6 +424,7 @@ class Textarea {
419
424
  name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
420
425
  placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
421
426
  rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : []));
427
+ ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
422
428
  describedBy = input(undefined, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
423
429
  /** Emitted when the textarea loses focus */
424
430
  blurred = output();
@@ -434,7 +440,7 @@ class Textarea {
434
440
  return parts.length > 0 ? parts.join(' ') : null;
435
441
  }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
436
442
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Textarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
437
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Textarea, isStandalone: true, selector: "mcms-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", blurred: "blurred" }, host: { properties: { "class.mcms-textarea--error": "hasError()", "class.mcms-textarea--disabled": "disabled()" }, classAttribute: "block" }, ngImport: i0, template: `
443
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Textarea, isStandalone: true, selector: "mcms-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", blurred: "blurred" }, host: { properties: { "class.mcms-textarea--error": "hasError()", "class.mcms-textarea--disabled": "disabled()" }, classAttribute: "block" }, ngImport: i0, template: `
438
444
  <textarea
439
445
  #textareaEl
440
446
  [id]="id()"
@@ -445,6 +451,7 @@ class Textarea {
445
451
  [rows]="rows()"
446
452
  [attr.aria-invalid]="hasError() || null"
447
453
  [attr.aria-describedby]="ariaDescribedBy()"
454
+ [attr.aria-label]="ariaLabel() || null"
448
455
  [attr.aria-required]="required() || null"
449
456
  (input)="value.set(textareaEl.value)"
450
457
  (blur)="blurred.emit()"
@@ -473,6 +480,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
473
480
  [rows]="rows()"
474
481
  [attr.aria-invalid]="hasError() || null"
475
482
  [attr.aria-describedby]="ariaDescribedBy()"
483
+ [attr.aria-label]="ariaLabel() || null"
476
484
  [attr.aria-required]="required() || null"
477
485
  (input)="value.set(textareaEl.value)"
478
486
  (blur)="blurred.emit()"
@@ -483,7 +491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
483
491
  aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive"
484
492
  ></textarea>
485
493
  `, changeDetection: ChangeDetectionStrategy.OnPush }]
486
- }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
494
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
487
495
 
488
496
  /**
489
497
  * Checkbox component compatible with Angular Signal Forms.
@@ -648,6 +656,7 @@ class Switch {
648
656
  errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
649
657
  // === Component-specific configuration ===
650
658
  id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
659
+ ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
651
660
  describedBy = input(undefined, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
652
661
  hasLabel = input(true, ...(ngDevMode ? [{ debugName: "hasLabel" }] : []));
653
662
  // === Computed state ===
@@ -667,13 +676,14 @@ class Switch {
667
676
  }
668
677
  }
669
678
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Switch, deps: [], target: i0.ɵɵFactoryTarget.Component });
670
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: Switch, isStandalone: true, selector: "mcms-switch", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, hasLabel: { classPropertyName: "hasLabel", publicName: "hasLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mcms-switch--error": "hasError()", "class.mcms-switch--disabled": "disabled()" }, classAttribute: "inline-flex items-center gap-2" }, ngImport: i0, template: `
679
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: Switch, isStandalone: true, selector: "mcms-switch", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, hasLabel: { classPropertyName: "hasLabel", publicName: "hasLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.mcms-switch--error": "hasError()", "class.mcms-switch--disabled": "disabled()" }, classAttribute: "inline-flex items-center gap-2" }, ngImport: i0, template: `
671
680
  <button
672
681
  type="button"
673
682
  role="switch"
674
683
  [id]="id()"
675
684
  [attr.aria-checked]="value()"
676
685
  [attr.aria-invalid]="hasError() || null"
686
+ [attr.aria-label]="ariaLabel() || null"
677
687
  [attr.aria-describedby]="ariaDescribedBy()"
678
688
  [disabled]="disabled()"
679
689
  (click)="toggle()"
@@ -713,6 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
713
723
  [id]="id()"
714
724
  [attr.aria-checked]="value()"
715
725
  [attr.aria-invalid]="hasError() || null"
726
+ [attr.aria-label]="ariaLabel() || null"
716
727
  [attr.aria-describedby]="ariaDescribedBy()"
717
728
  [disabled]="disabled()"
718
729
  (click)="toggle()"
@@ -738,7 +749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
738
749
  </label>
739
750
  }
740
751
  `, changeDetection: ChangeDetectionStrategy.OnPush }]
741
- }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], hasLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLabel", required: false }] }] } });
752
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], hasLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLabel", required: false }] }] } });
742
753
 
743
754
  /**
744
755
  * Select dropdown component compatible with Angular Signal Forms.
@@ -908,6 +919,8 @@ class RadioGroup {
908
919
  id = input('', ...(ngDevMode ? [{ debugName: "id" }] : []));
909
920
  name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
910
921
  options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
922
+ ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
923
+ ariaLabelledBy = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : []));
911
924
  describedBy = input(undefined, ...(ngDevMode ? [{ debugName: "describedBy" }] : []));
912
925
  required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
913
926
  // === Computed state ===
@@ -970,7 +983,7 @@ class RadioGroup {
970
983
  }
971
984
  }
972
985
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: RadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
973
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RadioGroup, isStandalone: true, selector: "mcms-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class.mcms-radio-group--error": "hasError()", "class.mcms-radio-group--disabled": "disabled()", "attr.aria-invalid": "hasError() || null", "attr.aria-describedby": "ariaDescribedBy()", "attr.aria-required": "required() || null" }, classAttribute: "block" }, ngImport: i0, template: `
986
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: RadioGroup, isStandalone: true, selector: "mcms-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class.mcms-radio-group--error": "hasError()", "class.mcms-radio-group--disabled": "disabled()", "attr.aria-invalid": "hasError() || null", "attr.aria-describedby": "ariaDescribedBy()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy() || null", "attr.aria-required": "required() || null" }, classAttribute: "block" }, ngImport: i0, template: `
974
987
  <div class="flex flex-col gap-2">
975
988
  @for (option of options(); track option.value) {
976
989
  <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -- label wraps button[role=radio], not a native input -->
@@ -1011,6 +1024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1011
1024
  '[class.mcms-radio-group--disabled]': 'disabled()',
1012
1025
  '[attr.aria-invalid]': 'hasError() || null',
1013
1026
  '[attr.aria-describedby]': 'ariaDescribedBy()',
1027
+ '[attr.aria-label]': 'ariaLabel() || null',
1028
+ '[attr.aria-labelledby]': 'ariaLabelledBy() || null',
1014
1029
  '[attr.aria-required]': 'required() || null',
1015
1030
  '(keydown)': 'onKeydown($event)',
1016
1031
  }, template: `
@@ -1044,7 +1059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1044
1059
  }
1045
1060
  </div>
1046
1061
  `, changeDetection: ChangeDetectionStrategy.OnPush }]
1047
- }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
1062
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
1048
1063
 
1049
1064
  /**
1050
1065
  * Form field wrapper that combines label, input, and error display.
@@ -1166,22 +1181,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1166
1181
  args: [{ selector: 'mcms-card-header', host: { class: 'block' }, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;flex-direction:column;gap:.375rem;padding:1.5rem}\n"] }]
1167
1182
  }] });
1168
1183
 
1184
+ /**
1185
+ * Card title component that renders as an ARIA heading.
1186
+ *
1187
+ * Uses `role="heading"` with `aria-level` on the host element instead of
1188
+ * native heading elements inside `@switch` blocks. This avoids Angular SSR
1189
+ * hydration issues where `<ng-content />` inside control flow blocks causes
1190
+ * projected content to be dropped during client-side hydration.
1191
+ */
1169
1192
  class CardTitle {
1193
+ /** Heading level (1-4). Defaults to 2 for proper document hierarchy. */
1194
+ level = input(2, ...(ngDevMode ? [{ debugName: "level" }] : []));
1170
1195
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CardTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
1171
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: CardTitle, isStandalone: true, selector: "mcms-card-title", host: { classAttribute: "contents" }, ngImport: i0, template: `
1172
- <h2 class="card-title">
1173
- <ng-content />
1174
- </h2>
1175
- `, isInline: true, styles: [".card-title{display:block;font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.025em;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1196
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: CardTitle, isStandalone: true, selector: "mcms-card-title", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "heading" }, properties: { "attr.aria-level": "level()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.025em;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1176
1197
  }
1177
1198
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CardTitle, decorators: [{
1178
1199
  type: Component,
1179
- args: [{ selector: 'mcms-card-title', host: { class: 'contents' }, template: `
1180
- <h2 class="card-title">
1181
- <ng-content />
1182
- </h2>
1183
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".card-title{display:block;font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.025em;margin:0}\n"] }]
1184
- }] });
1200
+ args: [{ selector: 'mcms-card-title', host: {
1201
+ role: 'heading',
1202
+ '[attr.aria-level]': 'level()',
1203
+ }, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;font-size:1.5rem;font-weight:600;line-height:1;letter-spacing:-.025em;margin:0}\n"] }]
1204
+ }], propDecorators: { level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }] } });
1185
1205
 
1186
1206
  class CardDescription {
1187
1207
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CardDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -1307,11 +1327,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1307
1327
  */
1308
1328
  class AlertTitle {
1309
1329
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
1310
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: AlertTitle, isStandalone: true, selector: "mcms-alert-title", host: { classAttribute: "block" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;margin-bottom:.25rem;font-weight:500;line-height:1.375;letter-spacing:-.025em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1330
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: AlertTitle, isStandalone: true, selector: "mcms-alert-title", host: { attributes: { "role": "heading", "aria-level": "2" }, classAttribute: "block" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;margin-bottom:.25rem;font-weight:500;line-height:1.375;letter-spacing:-.025em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1311
1331
  }
1312
1332
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AlertTitle, decorators: [{
1313
1333
  type: Component,
1314
- args: [{ selector: 'mcms-alert-title', host: { class: 'block' }, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;margin-bottom:.25rem;font-weight:500;line-height:1.375;letter-spacing:-.025em}\n"] }]
1334
+ args: [{ selector: 'mcms-alert-title', host: {
1335
+ class: 'block',
1336
+ role: 'heading',
1337
+ 'aria-level': '2',
1338
+ }, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;margin-bottom:.25rem;font-weight:500;line-height:1.375;letter-spacing:-.025em}\n"] }]
1315
1339
  }] });
1316
1340
 
1317
1341
  /**
@@ -1671,7 +1695,7 @@ class PopoverTrigger {
1671
1695
  .withPush(true);
1672
1696
  }
1673
1697
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopoverTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1674
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: PopoverTrigger, isStandalone: true, selector: "[mcmsPopoverTrigger]", inputs: { mcmsPopoverTrigger: { classPropertyName: "mcmsPopoverTrigger", publicName: "mcmsPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, popoverSide: { classPropertyName: "popoverSide", publicName: "popoverSide", isSignal: true, isRequired: false, transformFunction: null }, popoverAlign: { classPropertyName: "popoverAlign", publicName: "popoverAlign", isSignal: true, isRequired: false, transformFunction: null }, popoverOffset: { classPropertyName: "popoverOffset", publicName: "popoverOffset", isSignal: true, isRequired: false, transformFunction: null }, popoverDisabled: { classPropertyName: "popoverDisabled", publicName: "popoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"" } }, exportAs: ["mcmsPopoverTrigger"], ngImport: i0 });
1698
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.2", type: PopoverTrigger, isStandalone: true, selector: "[mcmsPopoverTrigger]", inputs: { mcmsPopoverTrigger: { classPropertyName: "mcmsPopoverTrigger", publicName: "mcmsPopoverTrigger", isSignal: true, isRequired: true, transformFunction: null }, popoverSide: { classPropertyName: "popoverSide", publicName: "popoverSide", isSignal: true, isRequired: false, transformFunction: null }, popoverAlign: { classPropertyName: "popoverAlign", publicName: "popoverAlign", isSignal: true, isRequired: false, transformFunction: null }, popoverOffset: { classPropertyName: "popoverOffset", publicName: "popoverOffset", isSignal: true, isRequired: false, transformFunction: null }, popoverDisabled: { classPropertyName: "popoverDisabled", publicName: "popoverDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "toggle()", "keydown.enter": "toggle(); $event.preventDefault()", "keydown.space": "toggle(); $event.preventDefault()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"" } }, exportAs: ["mcmsPopoverTrigger"], ngImport: i0 });
1675
1699
  }
1676
1700
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopoverTrigger, decorators: [{
1677
1701
  type: Directive,
@@ -1680,6 +1704,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1680
1704
  exportAs: 'mcmsPopoverTrigger',
1681
1705
  host: {
1682
1706
  '(click)': 'toggle()',
1707
+ '(keydown.enter)': 'toggle(); $event.preventDefault()',
1708
+ '(keydown.space)': 'toggle(); $event.preventDefault()',
1683
1709
  '[attr.aria-expanded]': 'isOpen()',
1684
1710
  '[attr.aria-haspopup]': '"dialog"',
1685
1711
  },
@@ -1698,14 +1724,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
1698
1724
  */
1699
1725
  class PopoverContent {
1700
1726
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopoverContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1701
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PopoverContent, isStandalone: true, selector: "mcms-popover-content", host: { attributes: { "role": "dialog" }, classAttribute: "block" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;z-index:50;min-width:8rem;overflow:hidden;border-radius:.375rem;border:1px solid hsl(var(--mcms-border));background-color:hsl(var(--mcms-card));color:hsl(var(--mcms-card-foreground));padding:.25rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:popover-in .15s ease-out}@keyframes popover-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1727
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: PopoverContent, isStandalone: true, selector: "mcms-popover-content", host: { attributes: { "role": "dialog" }, classAttribute: "block" }, ngImport: i0, template: `<div cdkTrapFocus cdkTrapFocusAutoCapture><ng-content /></div>`, isInline: true, styles: [":host{display:block;z-index:50;min-width:8rem;overflow:hidden;border-radius:.375rem;border:1px solid hsl(var(--mcms-border));background-color:hsl(var(--mcms-card));color:hsl(var(--mcms-card-foreground));padding:.25rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:popover-in .15s ease-out}@keyframes popover-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1702
1728
  }
1703
1729
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PopoverContent, decorators: [{
1704
1730
  type: Component,
1705
- args: [{ selector: 'mcms-popover-content', host: {
1731
+ args: [{ selector: 'mcms-popover-content', imports: [A11yModule], host: {
1706
1732
  class: 'block',
1707
1733
  role: 'dialog',
1708
- }, template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;z-index:50;min-width:8rem;overflow:hidden;border-radius:.375rem;border:1px solid hsl(var(--mcms-border));background-color:hsl(var(--mcms-card));color:hsl(var(--mcms-card-foreground));padding:.25rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:popover-in .15s ease-out}@keyframes popover-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
1734
+ }, template: `<div cdkTrapFocus cdkTrapFocusAutoCapture><ng-content /></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;z-index:50;min-width:8rem;overflow:hidden;border-radius:.375rem;border:1px solid hsl(var(--mcms-border));background-color:hsl(var(--mcms-card));color:hsl(var(--mcms-card-foreground));padding:.25rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:popover-in .15s ease-out}@keyframes popover-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
1709
1735
  }] });
1710
1736
 
1711
1737
  function getDropdownPositions(side, align, offset) {
@@ -1926,7 +1952,7 @@ class DropdownMenu {
1926
1952
  return `${base} ${this.class()}`.trim();
1927
1953
  }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
1928
1954
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DropdownMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
1929
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: DropdownMenu, isStandalone: true, selector: "mcms-dropdown-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, host: { attributes: { "role": "menu" }, properties: { "class": "hostClasses()", "attr.aria-orientation": "\"vertical\"" } }, hostDirectives: [{ directive: i1.Menu, inputs: ["disabled", "disabled", "wrap", "wrap", "typeaheadDelay", "typeaheadDelay"] }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1955
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: DropdownMenu, isStandalone: true, selector: "mcms-dropdown-menu", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected" }, host: { attributes: { "role": "menu" }, properties: { "class": "hostClasses()", "attr.aria-orientation": "\"vertical\"" } }, hostDirectives: [{ directive: i1$1.Menu, inputs: ["disabled", "disabled", "wrap", "wrap", "typeaheadDelay", "typeaheadDelay"] }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1930
1956
  }
1931
1957
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DropdownMenu, decorators: [{
1932
1958
  type: Component,
@@ -1989,7 +2015,7 @@ class DropdownMenuItem {
1989
2015
  this.selected.emit();
1990
2016
  }
1991
2017
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DropdownMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
1992
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: DropdownMenuItem, isStandalone: true, selector: "button[mcms-dropdown-item], a[mcms-dropdown-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event); $event.preventDefault()" }, properties: { "class": "hostClasses()", "attr.tabindex": "disabled() ? -1 : 0", "attr.disabled": "disabled() || null", "attr.aria-disabled": "disabled()" } }, hostDirectives: [{ directive: i1.MenuItem, inputs: ["value", "value", "disabled", "disabled", "searchTerm", "searchTerm"] }], ngImport: i0, template: `
2018
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: DropdownMenuItem, isStandalone: true, selector: "button[mcms-dropdown-item], a[mcms-dropdown-item]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "role": "menuitem" }, listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event); $event.preventDefault()" }, properties: { "class": "hostClasses()", "attr.tabindex": "disabled() ? -1 : 0", "attr.disabled": "disabled() || null", "attr.aria-disabled": "disabled()" } }, hostDirectives: [{ directive: i1$1.MenuItem, inputs: ["value", "value", "disabled", "disabled", "searchTerm", "searchTerm"] }], ngImport: i0, template: `
1993
2019
  <ng-content />
1994
2020
  @if (shortcut()) {
1995
2021
  <span class="ml-auto text-xs tracking-widest text-muted-foreground">{{ shortcut() }}</span>
@@ -2321,7 +2347,7 @@ class Dialog {
2321
2347
  <div class="dialog-content" cdkTrapFocus cdkTrapFocusAutoCapture>
2322
2348
  <ng-content />
2323
2349
  </div>
2324
- `, isInline: true, styles: [":host{display:block;position:relative;border-radius:.5rem;border:1px solid hsl(var(--mcms-border));background-color:hsl(var(--mcms-card));color:hsl(var(--mcms-card-foreground));box-shadow:0 25px 50px -12px #00000040;animation:dialog-content-in .2s ease-out;max-height:85vh;overflow:hidden;display:flex;flex-direction:column}.dialog-content{display:flex;flex-direction:column;overflow:hidden}@keyframes dialog-content-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2350
+ `, isInline: true, styles: [":host{display:block;position:relative;border-radius:.5rem;border:1px solid hsl(var(--mcms-border));background-color:hsl(var(--mcms-card));color:hsl(var(--mcms-card-foreground));box-shadow:0 25px 50px -12px #00000040;animation:dialog-content-in .2s ease-out;max-height:85vh;overflow:hidden;display:flex;flex-direction:column}.dialog-content{display:flex;flex-direction:column;overflow:hidden}@keyframes dialog-content-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2325
2351
  }
2326
2352
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Dialog, decorators: [{
2327
2353
  type: Component,
@@ -2619,7 +2645,7 @@ class ToastComponent {
2619
2645
  this.dismiss();
2620
2646
  }
2621
2647
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2622
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ToastComponent, isStandalone: true, selector: "mcms-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { attributes: { "role": "status" }, properties: { "style.--toast-bg": "variantBg()", "style.--toast-border": "variantBorder()", "style.--toast-color": "variantColor()" } }, ngImport: i0, template: `
2648
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ToastComponent, isStandalone: true, selector: "mcms-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "style.--toast-bg": "variantBg()", "style.--toast-border": "variantBorder()", "style.--toast-color": "variantColor()" } }, ngImport: i0, template: `
2623
2649
  <div class="toast-content">
2624
2650
  <div class="toast-title">{{ toast().title }}</div>
2625
2651
  @if (toast().description) {
@@ -2650,12 +2676,11 @@ class ToastComponent {
2650
2676
  </svg>
2651
2677
  </button>
2652
2678
  }
2653
- `, isInline: true, styles: [":host{display:flex;align-items:flex-start;gap:.75rem;width:100%;padding:1rem;border-radius:.5rem;border:1px solid var(--toast-border);background-color:var(--toast-bg);color:var(--toast-color);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:toast-slide-in .3s ease-out;pointer-events:auto}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-content{flex:1;min-width:0}.toast-title{font-weight:500;font-size:.875rem;line-height:1.25rem}.toast-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;opacity:.9}.toast-action{flex-shrink:0;padding:.25rem .75rem;font-size:.75rem;font-weight:500;border-radius:.25rem;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;opacity:.8;transition:opacity .15s}.toast-action:hover{opacity:1}.toast-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.5;transition:opacity .15s;padding:0}.toast-close:hover{opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2679
+ `, isInline: true, styles: [":host{display:flex;align-items:flex-start;gap:.75rem;width:100%;padding:1rem;border-radius:.5rem;border:1px solid var(--toast-border);background-color:var(--toast-bg);color:var(--toast-color);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:toast-slide-in .3s ease-out;pointer-events:auto}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-content{flex:1;min-width:0}.toast-title{font-weight:500;font-size:.875rem;line-height:1.25rem}.toast-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;opacity:.9}.toast-action{flex-shrink:0;padding:.25rem .75rem;font-size:.75rem;font-weight:500;border-radius:.25rem;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;opacity:.8;transition:opacity .15s}.toast-action:hover{opacity:1}.toast-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.5;transition:opacity .15s;padding:0}.toast-close:hover{opacity:1}.toast-action:focus-visible,.toast-close:focus-visible{outline:none;box-shadow:0 0 0 2px var(--toast-bg),0 0 0 4px hsl(var(--mcms-ring, 215 20% 65%))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2654
2680
  }
2655
2681
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ToastComponent, decorators: [{
2656
2682
  type: Component,
2657
2683
  args: [{ selector: 'mcms-toast', host: {
2658
- role: 'status',
2659
2684
  '[style.--toast-bg]': 'variantBg()',
2660
2685
  '[style.--toast-border]': 'variantBorder()',
2661
2686
  '[style.--toast-color]': 'variantColor()',
@@ -2690,7 +2715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
2690
2715
  </svg>
2691
2716
  </button>
2692
2717
  }
2693
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:flex-start;gap:.75rem;width:100%;padding:1rem;border-radius:.5rem;border:1px solid var(--toast-border);background-color:var(--toast-bg);color:var(--toast-color);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:toast-slide-in .3s ease-out;pointer-events:auto}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-content{flex:1;min-width:0}.toast-title{font-weight:500;font-size:.875rem;line-height:1.25rem}.toast-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;opacity:.9}.toast-action{flex-shrink:0;padding:.25rem .75rem;font-size:.75rem;font-weight:500;border-radius:.25rem;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;opacity:.8;transition:opacity .15s}.toast-action:hover{opacity:1}.toast-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.5;transition:opacity .15s;padding:0}.toast-close:hover{opacity:1}\n"] }]
2718
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;align-items:flex-start;gap:.75rem;width:100%;padding:1rem;border-radius:.5rem;border:1px solid var(--toast-border);background-color:var(--toast-bg);color:var(--toast-color);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;animation:toast-slide-in .3s ease-out;pointer-events:auto}@keyframes toast-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-content{flex:1;min-width:0}.toast-title{font-weight:500;font-size:.875rem;line-height:1.25rem}.toast-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;opacity:.9}.toast-action{flex-shrink:0;padding:.25rem .75rem;font-size:.75rem;font-weight:500;border-radius:.25rem;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;opacity:.8;transition:opacity .15s}.toast-action:hover{opacity:1}.toast-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.5;transition:opacity .15s;padding:0}.toast-close:hover{opacity:1}.toast-action:focus-visible,.toast-close:focus-visible{outline:none;box-shadow:0 0 0 2px var(--toast-bg),0 0 0 4px hsl(var(--mcms-ring, 215 20% 65%))}\n"] }]
2694
2719
  }], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
2695
2720
 
2696
2721
  /**
@@ -2713,7 +2738,7 @@ class ToastContainer {
2713
2738
  this.toastService.dismiss(id);
2714
2739
  }
2715
2740
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ToastContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
2716
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ToastContainer, isStandalone: true, selector: "mcms-toast-container", host: { attributes: { "aria-live": "polite", "aria-atomic": "true" }, properties: { "class": "hostClass()" } }, ngImport: i0, template: `
2741
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ToastContainer, isStandalone: true, selector: "mcms-toast-container", host: { attributes: { "aria-live": "polite" }, properties: { "class": "hostClass()" } }, ngImport: i0, template: `
2717
2742
  @for (toast of toasts(); track toast.id) {
2718
2743
  <mcms-toast [toast]="toast" (dismissed)="onDismiss(toast.id)" />
2719
2744
  }
@@ -2723,7 +2748,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
2723
2748
  type: Component,
2724
2749
  args: [{ selector: 'mcms-toast-container', imports: [ToastComponent], host: {
2725
2750
  'aria-live': 'polite',
2726
- 'aria-atomic': 'true',
2727
2751
  '[class]': 'hostClass()',
2728
2752
  }, template: `
2729
2753
  @for (toast of toasts(); track toast.id) {
@@ -3264,6 +3288,8 @@ class Progress {
3264
3288
  value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
3265
3289
  /** Maximum value. */
3266
3290
  max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
3291
+ /** Accessible label for the progress bar. */
3292
+ ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
3267
3293
  /** Additional CSS classes. */
3268
3294
  class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
3269
3295
  isIndeterminate = computed(() => this.value() === null, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
@@ -3278,7 +3304,7 @@ class Progress {
3278
3304
  return `relative block h-2 w-full overflow-hidden rounded-full bg-muted ${this.class()}`.trim();
3279
3305
  }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
3280
3306
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Progress, deps: [], target: i0.ɵɵFactoryTarget.Component });
3281
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Progress, isStandalone: true, selector: "mcms-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "hostClasses()", "attr.aria-valuenow": "value()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()" } }, ngImport: i0, template: `
3307
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Progress, isStandalone: true, selector: "mcms-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "class": "hostClasses()", "attr.aria-valuenow": "value()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "max()", "attr.aria-label": "ariaLabel() || null" } }, ngImport: i0, template: `
3282
3308
  <div
3283
3309
  class="h-full bg-primary transition-all duration-300"
3284
3310
  [class.animate-progress-indeterminate]="isIndeterminate()"
@@ -3294,6 +3320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
3294
3320
  '[attr.aria-valuenow]': 'value()',
3295
3321
  '[attr.aria-valuemin]': '0',
3296
3322
  '[attr.aria-valuemax]': 'max()',
3323
+ '[attr.aria-label]': 'ariaLabel() || null',
3297
3324
  }, template: `
3298
3325
  <div
3299
3326
  class="h-full bg-primary transition-all duration-300"
@@ -3301,7 +3328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
3301
3328
  [style.width]="progressWidth()"
3302
3329
  ></div>
3303
3330
  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@keyframes progress-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}.animate-progress-indeterminate{width:25%!important;animation:progress-indeterminate 1.5s ease-in-out infinite}\n"] }]
3304
- }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
3331
+ }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
3305
3332
 
3306
3333
  /**
3307
3334
  * A container that maintains a specific aspect ratio.
@@ -3867,6 +3894,7 @@ class Sidebar {
3867
3894
  role="dialog"
3868
3895
  [attr.aria-modal]="sidebar.open() || null"
3869
3896
  aria-label="Sidebar navigation"
3897
+ (keydown.escape)="sidebar.setOpen(false)"
3870
3898
  >
3871
3899
  <ng-container *ngTemplateOutlet="sidebarContent" />
3872
3900
  </aside>
@@ -3892,7 +3920,7 @@ class Sidebar {
3892
3920
  </div>
3893
3921
  <ng-content />
3894
3922
  </ng-template>
3895
- `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3923
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3896
3924
  }
3897
3925
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Sidebar, decorators: [{
3898
3926
  type: Component,
@@ -3919,6 +3947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
3919
3947
  role="dialog"
3920
3948
  [attr.aria-modal]="sidebar.open() || null"
3921
3949
  aria-label="Sidebar navigation"
3950
+ (keydown.escape)="sidebar.setOpen(false)"
3922
3951
  >
3923
3952
  <ng-container *ngTemplateOutlet="sidebarContent" />
3924
3953
  </aside>
@@ -4184,7 +4213,7 @@ class SidebarNavItem {
4184
4213
  <mcms-badge variant="secondary" class="ml-auto">{{ badge() }}</mcms-badge>
4185
4214
  }
4186
4215
  </ng-template>
4187
- `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: Badge, selector: "mcms-badge", inputs: ["variant", "class", "ariaLabel"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4216
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: Badge, selector: "mcms-badge", inputs: ["variant", "class", "role", "ariaLabel"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4188
4217
  }
4189
4218
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SidebarNavItem, decorators: [{
4190
4219
  type: Component,
@@ -6090,7 +6119,9 @@ class DataTable {
6090
6119
  <mcms-table-row
6091
6120
  [class.bg-muted/50]="isSelected(item)"
6092
6121
  [class.cursor-pointer]="clickableRows()"
6122
+ [attr.tabindex]="clickableRows() ? 0 : null"
6093
6123
  (click)="onRowClicked(item)"
6124
+ (keydown.enter)="onRowClicked(item)"
6094
6125
  >
6095
6126
  @if (selectable()) {
6096
6127
  <mcms-table-cell (click)="$event.stopPropagation()">
@@ -6337,7 +6368,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
6337
6368
  <mcms-table-row
6338
6369
  [class.bg-muted/50]="isSelected(item)"
6339
6370
  [class.cursor-pointer]="clickableRows()"
6371
+ [attr.tabindex]="clickableRows() ? 0 : null"
6340
6372
  (click)="onRowClicked(item)"
6373
+ (keydown.enter)="onRowClicked(item)"
6341
6374
  >
6342
6375
  @if (selectable()) {
6343
6376
  <mcms-table-cell (click)="$event.stopPropagation()">
@@ -7320,7 +7353,7 @@ class Menubar {
7320
7353
  return `${base} ${this.class()}`.trim();
7321
7354
  }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
7322
7355
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Menubar, deps: [], target: i0.ɵɵFactoryTarget.Component });
7323
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Menubar, isStandalone: true, selector: "mcms-menubar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange" }, host: { attributes: { "role": "menubar" }, properties: { "class": "hostClasses()", "attr.aria-orientation": "\"horizontal\"" } }, exportAs: ["mcmsMenubar"], hostDirectives: [{ directive: i1.MenuBar, inputs: ["disabled", "disabled", "wrap", "wrap", "typeaheadDelay", "typeaheadDelay", "values", "values"], outputs: ["valuesChange", "valuesChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7356
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: Menubar, isStandalone: true, selector: "mcms-menubar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange" }, host: { attributes: { "role": "menubar" }, properties: { "class": "hostClasses()", "attr.aria-orientation": "\"horizontal\"" } }, exportAs: ["mcmsMenubar"], hostDirectives: [{ directive: i1$1.MenuBar, inputs: ["disabled", "disabled", "wrap", "wrap", "typeaheadDelay", "typeaheadDelay", "values", "values"], outputs: ["valuesChange", "valuesChange"] }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7324
7357
  }
7325
7358
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: Menubar, decorators: [{
7326
7359
  type: Component,
@@ -7379,7 +7412,7 @@ class MenubarItem {
7379
7412
  return `${base} ${interactiveClasses} ${activeClasses} ${expandedClasses} ${disabledClasses} ${this.class()}`.trim();
7380
7413
  }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
7381
7414
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenubarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
7382
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: MenubarItem, isStandalone: true, selector: "mcms-menubar-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, host: { attributes: { "role": "menuitem" }, properties: { "class": "hostClasses()", "attr.aria-haspopup": "menuItem.hasPopup() ? \"menu\" : null", "attr.aria-expanded": "menuItem.expanded() || null", "attr.tabindex": "menuItem.active() ? 0 : -1" } }, exportAs: ["mcmsMenubarItem"], hostDirectives: [{ directive: i1.MenuItem, inputs: ["value", "value", "disabled", "disabled", "searchTerm", "searchTerm", "submenu", "submenu"] }], ngImport: i0, template: `
7415
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: MenubarItem, isStandalone: true, selector: "mcms-menubar-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, host: { attributes: { "role": "menuitem" }, properties: { "class": "hostClasses()", "attr.aria-haspopup": "menuItem.hasPopup() ? \"menu\" : null", "attr.aria-expanded": "menuItem.expanded() || null", "attr.tabindex": "menuItem.active() ? 0 : -1" } }, exportAs: ["mcmsMenubarItem"], hostDirectives: [{ directive: i1$1.MenuItem, inputs: ["value", "value", "disabled", "disabled", "searchTerm", "searchTerm", "submenu", "submenu"] }], ngImport: i0, template: `
7383
7416
  <span class="flex items-center gap-2">
7384
7417
  <ng-content select="[mcms-menubar-item-icon]" />
7385
7418
  {{ label() }}
@@ -7475,7 +7508,7 @@ class MenubarSubmenu {
7475
7508
  return `${base} ${this.class()}`.trim();
7476
7509
  }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
7477
7510
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenubarSubmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
7478
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: MenubarSubmenu, isStandalone: true, selector: "mcms-menubar-submenu", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { parent: "parentChange" }, host: { attributes: { "role": "menu" }, properties: { "class": "hostClasses()", "attr.aria-orientation": "\"vertical\"" } }, exportAs: ["mcmsMenubarSubmenu"], hostDirectives: [{ directive: i1.Menu, inputs: ["disabled", "disabled", "wrap", "wrap", "typeaheadDelay", "typeaheadDelay"] }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7511
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: MenubarSubmenu, isStandalone: true, selector: "mcms-menubar-submenu", inputs: { parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { parent: "parentChange" }, host: { attributes: { "role": "menu" }, properties: { "class": "hostClasses()", "attr.aria-orientation": "\"vertical\"" } }, exportAs: ["mcmsMenubarSubmenu"], hostDirectives: [{ directive: i1$1.Menu, inputs: ["disabled", "disabled", "wrap", "wrap", "typeaheadDelay", "typeaheadDelay"] }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
7479
7512
  }
7480
7513
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenubarSubmenu, decorators: [{
7481
7514
  type: Component,
@@ -7529,7 +7562,7 @@ class MenubarSubmenuItem {
7529
7562
  return `${base} ${interactiveClasses} ${activeClasses} ${disabledClasses} ${this.class()}`.trim();
7530
7563
  }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
7531
7564
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MenubarSubmenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
7532
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: MenubarSubmenuItem, isStandalone: true, selector: "mcms-menubar-submenu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, host: { attributes: { "role": "menuitem" }, properties: { "class": "hostClasses()", "attr.aria-haspopup": "menuItem.hasPopup() ? \"menu\" : null", "attr.aria-expanded": "menuItem.expanded() || null", "attr.tabindex": "menuItem.active() ? 0 : -1" } }, exportAs: ["mcmsMenubarSubmenuItem"], hostDirectives: [{ directive: i1.MenuItem, inputs: ["value", "value", "disabled", "disabled", "searchTerm", "searchTerm", "submenu", "submenu"] }], ngImport: i0, template: `
7565
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: MenubarSubmenuItem, isStandalone: true, selector: "mcms-menubar-submenu-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, submenu: { classPropertyName: "submenu", publicName: "submenu", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTerm: "searchTermChange" }, host: { attributes: { "role": "menuitem" }, properties: { "class": "hostClasses()", "attr.aria-haspopup": "menuItem.hasPopup() ? \"menu\" : null", "attr.aria-expanded": "menuItem.expanded() || null", "attr.tabindex": "menuItem.active() ? 0 : -1" } }, exportAs: ["mcmsMenubarSubmenuItem"], hostDirectives: [{ directive: i1$1.MenuItem, inputs: ["value", "value", "disabled", "disabled", "searchTerm", "searchTerm", "submenu", "submenu"] }], ngImport: i0, template: `
7533
7566
  <span class="flex flex-1 items-center gap-2">
7534
7567
  <ng-content select="[mcms-menubar-submenu-item-icon]" />
7535
7568
  {{ label() }}
@@ -7943,6 +7976,7 @@ class FieldDisplay {
7943
7976
  <div
7944
7977
  class="prose prose-sm dark:prose-invert max-w-none"
7945
7978
  [innerHTML]="stringValue()"
7979
+ [attr.aria-label]="label() ? label() + ' rich content' : 'Rich text content'"
7946
7980
  ></div>
7947
7981
  }
7948
7982
  }
@@ -7969,11 +8003,11 @@ class FieldDisplay {
7969
8003
  <span class="text-muted-foreground">{{ emptyText() }}</span>
7970
8004
  } @else {
7971
8005
  <div class="overflow-auto rounded-md border border-border">
7972
- <table class="w-full text-sm">
8006
+ <table class="w-full text-sm" [attr.aria-label]="label() || 'Data table'">
7973
8007
  <thead>
7974
8008
  <tr class="border-b bg-muted/50">
7975
8009
  @for (meta of fieldMeta(); track meta.name) {
7976
- <th class="px-3 py-2 text-left font-medium text-muted-foreground">
8010
+ <th scope="col" class="px-3 py-2 text-left font-medium text-muted-foreground">
7977
8011
  {{ meta.label || meta.name }}
7978
8012
  </th>
7979
8013
  }
@@ -8004,7 +8038,7 @@ class FieldDisplay {
8004
8038
  }
8005
8039
  }
8006
8040
  </div>
8007
- `, isInline: true, dependencies: [{ kind: "component", type: Badge, selector: "mcms-badge", inputs: ["variant", "class", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8041
+ `, isInline: true, dependencies: [{ kind: "component", type: Badge, selector: "mcms-badge", inputs: ["variant", "class", "role", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8008
8042
  }
8009
8043
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FieldDisplay, decorators: [{
8010
8044
  type: Component,
@@ -8132,6 +8166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
8132
8166
  <div
8133
8167
  class="prose prose-sm dark:prose-invert max-w-none"
8134
8168
  [innerHTML]="stringValue()"
8169
+ [attr.aria-label]="label() ? label() + ' rich content' : 'Rich text content'"
8135
8170
  ></div>
8136
8171
  }
8137
8172
  }
@@ -8158,11 +8193,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
8158
8193
  <span class="text-muted-foreground">{{ emptyText() }}</span>
8159
8194
  } @else {
8160
8195
  <div class="overflow-auto rounded-md border border-border">
8161
- <table class="w-full text-sm">
8196
+ <table class="w-full text-sm" [attr.aria-label]="label() || 'Data table'">
8162
8197
  <thead>
8163
8198
  <tr class="border-b bg-muted/50">
8164
8199
  @for (meta of fieldMeta(); track meta.name) {
8165
- <th class="px-3 py-2 text-left font-medium text-muted-foreground">
8200
+ <th scope="col" class="px-3 py-2 text-left font-medium text-muted-foreground">
8166
8201
  {{ meta.label || meta.name }}
8167
8202
  </th>
8168
8203
  }
@@ -8406,12 +8441,13 @@ class BlockRendererComponent {
8406
8441
  <mcms-block-outlet [blockType]="type" [blockData]="block" />
8407
8442
  <!-- Admin edit overlay -->
8408
8443
  <div
8409
- class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
8444
+ class="absolute inset-0 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity pointer-events-none"
8410
8445
  >
8411
8446
  <div class="absolute inset-0 border-2 border-primary/40 rounded-md"></div>
8412
8447
  <button
8413
- class="absolute top-2 right-2 pointer-events-auto bg-primary text-primary-foreground px-3 py-1.5 rounded-md text-sm font-medium shadow-lg hover:bg-primary/90 transition-colors"
8448
+ class="absolute top-2 right-2 pointer-events-auto bg-primary text-primary-foreground px-3 py-1.5 rounded-md text-sm font-medium shadow-lg hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors"
8414
8449
  (click)="onEditBlock($index)"
8450
+ [attr.aria-label]="'Edit ' + type + ' block at position ' + ($index + 1)"
8415
8451
  data-testid="block-edit-button"
8416
8452
  >
8417
8453
  Edit Block
@@ -8454,12 +8490,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
8454
8490
  <mcms-block-outlet [blockType]="type" [blockData]="block" />
8455
8491
  <!-- Admin edit overlay -->
8456
8492
  <div
8457
- class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
8493
+ class="absolute inset-0 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity pointer-events-none"
8458
8494
  >
8459
8495
  <div class="absolute inset-0 border-2 border-primary/40 rounded-md"></div>
8460
8496
  <button
8461
- class="absolute top-2 right-2 pointer-events-auto bg-primary text-primary-foreground px-3 py-1.5 rounded-md text-sm font-medium shadow-lg hover:bg-primary/90 transition-colors"
8497
+ class="absolute top-2 right-2 pointer-events-auto bg-primary text-primary-foreground px-3 py-1.5 rounded-md text-sm font-medium shadow-lg hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors"
8462
8498
  (click)="onEditBlock($index)"
8499
+ [attr.aria-label]="'Edit ' + type + ' block at position ' + ($index + 1)"
8463
8500
  data-testid="block-edit-button"
8464
8501
  >
8465
8502
  Edit Block
@@ -9357,15 +9394,15 @@ class KitchenSinkPage {
9357
9394
  </div>
9358
9395
  `, isInline: true, dependencies: [{ kind: "component", type:
9359
9396
  // Form
9360
- Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Input, selector: "mcms-input", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "type", "id", "name", "placeholder", "autocomplete", "describedBy", "min", "max", "step"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Textarea, selector: "mcms-textarea", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "rows", "describedBy"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Checkbox, selector: "mcms-checkbox", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "describedBy", "indeterminate", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: Switch, selector: "mcms-switch", inputs: ["value", "disabled", "errors", "id", "describedBy", "hasLabel"], outputs: ["valueChange"] }, { kind: "component", type: Select, selector: "mcms-select", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "options", "describedBy", "ariaLabel"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: RadioGroup, selector: "mcms-radio-group", inputs: ["value", "disabled", "errors", "id", "name", "options", "describedBy", "required"], outputs: ["valueChange"] }, { kind: "component", type: Label, selector: "mcms-label", inputs: ["for", "required", "disabled", "class"] }, { kind: "component", type:
9397
+ Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Input, selector: "mcms-input", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "type", "id", "name", "placeholder", "autocomplete", "ariaLabel", "describedBy", "min", "max", "step"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Textarea, selector: "mcms-textarea", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "rows", "ariaLabel", "describedBy"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Checkbox, selector: "mcms-checkbox", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "describedBy", "indeterminate", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: Switch, selector: "mcms-switch", inputs: ["value", "disabled", "errors", "id", "ariaLabel", "describedBy", "hasLabel"], outputs: ["valueChange"] }, { kind: "component", type: Select, selector: "mcms-select", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "options", "describedBy", "ariaLabel"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: RadioGroup, selector: "mcms-radio-group", inputs: ["value", "disabled", "errors", "id", "name", "options", "ariaLabel", "ariaLabelledBy", "describedBy", "required"], outputs: ["valueChange"] }, { kind: "component", type: Label, selector: "mcms-label", inputs: ["for", "required", "disabled", "class"] }, { kind: "component", type:
9361
9398
  // Card
9362
- Card, selector: "mcms-card" }, { kind: "component", type: CardHeader, selector: "mcms-card-header" }, { kind: "component", type: CardTitle, selector: "mcms-card-title" }, { kind: "component", type: CardDescription, selector: "mcms-card-description" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }, { kind: "component", type:
9399
+ Card, selector: "mcms-card" }, { kind: "component", type: CardHeader, selector: "mcms-card-header" }, { kind: "component", type: CardTitle, selector: "mcms-card-title", inputs: ["level"] }, { kind: "component", type: CardDescription, selector: "mcms-card-description" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }, { kind: "component", type:
9363
9400
  // Alert
9364
9401
  Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: AlertTitle, selector: "mcms-alert-title" }, { kind: "component", type: AlertDescription, selector: "mcms-alert-description" }, { kind: "component", type:
9365
9402
  // Toast
9366
9403
  ToastContainer, selector: "mcms-toast-container" }, { kind: "component", type:
9367
9404
  // Feedback
9368
- Spinner, selector: "mcms-spinner", inputs: ["size", "label", "class"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }, { kind: "component", type: Progress, selector: "mcms-progress", inputs: ["value", "max", "class"] }, { kind: "component", type: EmptyState, selector: "mcms-empty-state", inputs: ["title", "description", "size", "class"] }, { kind: "directive", type:
9405
+ Spinner, selector: "mcms-spinner", inputs: ["size", "label", "class"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }, { kind: "component", type: Progress, selector: "mcms-progress", inputs: ["value", "max", "ariaLabel", "class"] }, { kind: "component", type: EmptyState, selector: "mcms-empty-state", inputs: ["title", "description", "size", "class"] }, { kind: "directive", type:
9369
9406
  // Tooltip
9370
9407
  TooltipTrigger, selector: "[mcmsTooltip]", inputs: ["mcmsTooltip", "tooltipPosition", "tooltipDelay", "tooltipDisabled"] }, { kind: "directive", type:
9371
9408
  // Popover
@@ -9385,7 +9422,7 @@ class KitchenSinkPage {
9385
9422
  // Table
9386
9423
  Table, selector: "mcms-table", inputs: ["enableSelection", "disabled", "focusMode", "rowWrap", "colWrap", "multi", "selectionMode", "enableRangeSelection", "class"] }, { kind: "component", type: TableHeader, selector: "mcms-table-header, thead[mcms-table-header]", inputs: ["class"] }, { kind: "component", type: TableBody, selector: "mcms-table-body", inputs: ["class"] }, { kind: "component", type: TableRow, selector: "mcms-table-row", inputs: ["rowIndex", "selected", "class"] }, { kind: "component", type: TableHead, selector: "mcms-table-head", inputs: ["disabled", "colSpan", "rowSpan", "class"] }, { kind: "component", type: TableCell, selector: "mcms-table-cell", inputs: ["disabled", "selected", "colSpan", "rowSpan", "class"], outputs: ["selectedChange"] }, { kind: "component", type: TableCaption, selector: "mcms-table-caption", inputs: ["class"] }, { kind: "component", type:
9387
9424
  // Data Display
9388
- Badge, selector: "mcms-badge", inputs: ["variant", "class", "ariaLabel"] }, { kind: "component", type: Avatar, selector: "mcms-avatar", inputs: ["size", "class", "ariaLabel"] }, { kind: "component", type: AvatarFallback, selector: "mcms-avatar-fallback", inputs: ["delayMs", "class"] }, { kind: "component", type: Separator, selector: "mcms-separator", inputs: ["orientation", "decorative", "class"] }, { kind: "component", type:
9425
+ Badge, selector: "mcms-badge", inputs: ["variant", "class", "role", "ariaLabel"] }, { kind: "component", type: Avatar, selector: "mcms-avatar", inputs: ["size", "class", "ariaLabel"] }, { kind: "component", type: AvatarFallback, selector: "mcms-avatar-fallback", inputs: ["delayMs", "class"] }, { kind: "component", type: Separator, selector: "mcms-separator", inputs: ["orientation", "decorative", "class"] }, { kind: "component", type:
9389
9426
  // Command
9390
9427
  Command, selector: "mcms-command", inputs: ["filterMode", "disabled", "alwaysExpanded", "class"] }, { kind: "component", type: CommandInput, selector: "mcms-command-input", inputs: ["placeholder", "value", "disabled", "autofocus", "ariaControls", "ariaExpanded", "ariaLabel", "class"], outputs: ["valueChange"] }, { kind: "component", type: CommandList, selector: "mcms-command-list", inputs: ["maxHeight", "class"] }, { kind: "component", type: CommandEmpty, selector: "mcms-command-empty", inputs: ["class"] }, { kind: "component", type: CommandGroup, selector: "mcms-command-group", inputs: ["label", "class"] }, { kind: "component", type: CommandItem, selector: "mcms-command-item", inputs: ["value", "label", "disabled", "selected", "class"], outputs: ["itemSelect"] }, { kind: "component", type: CommandSeparator, selector: "mcms-command-separator", inputs: ["class"] }, { kind: "component", type:
9391
9428
  // DataTable