@momentumcms/ui 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentumcms/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Base UI component library for Momentum CMS",
   "license": "MIT",
   "author": "Momentum CMS Contributors",

package/types/momentumcms-ui.d.ts

@@ -32,6 +32,8 @@ type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'succe
 declare class Badge {
     readonly variant: _angular_core.InputSignal<BadgeVariant>;
     readonly class: _angular_core.InputSignal<string>;
+    /** ARIA role. Set to 'status' for live-region badges, or null for decorative. */
+    readonly role: _angular_core.InputSignal<string | null>;
     /** Accessible label for screen reader override. */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly hostClass: _angular_core.Signal<string>;
@@ -39,7 +41,7 @@ declare class Badge {
     readonly variantColor: _angular_core.Signal<string>;
     readonly variantBorder: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Badge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "mcms-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "mcms-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -115,7 +117,7 @@ interface ValidationError {
     message?: string;
     [key: string]: unknown;
 }
-type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local';
 
 /**
  * Text input component compatible with Angular Signal Forms.
@@ -147,6 +149,7 @@ declare class Input {
     readonly name: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly autocomplete: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly describedBy: _angular_core.InputSignal<string | undefined>;
     readonly min: _angular_core.InputSignal<number | undefined>;
     readonly max: _angular_core.InputSignal<number | undefined>;
@@ -156,7 +159,7 @@ declare class Input {
     readonly hasError: _angular_core.Signal<boolean>;
     readonly ariaDescribedBy: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "mcms-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "mcms-input", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 /**
@@ -181,13 +184,14 @@ declare class Textarea {
     readonly name: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly rows: _angular_core.InputSignal<number>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly describedBy: _angular_core.InputSignal<string | undefined>;
     /** Emitted when the textarea loses focus */
     readonly blurred: _angular_core.OutputEmitterRef<void>;
     readonly hasError: _angular_core.Signal<boolean>;
     readonly ariaDescribedBy: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Textarea, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Textarea, "mcms-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Textarea, "mcms-textarea", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 /**
@@ -236,13 +240,14 @@ declare class Switch {
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly errors: _angular_core.InputSignal<readonly ValidationError[]>;
     readonly id: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     readonly describedBy: _angular_core.InputSignal<string | undefined>;
     readonly hasLabel: _angular_core.InputSignal<boolean>;
     readonly hasError: _angular_core.Signal<boolean>;
     readonly ariaDescribedBy: _angular_core.Signal<string | null>;
     toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Switch, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Switch, "mcms-switch", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; "hasLabel": { "alias": "hasLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Switch, "mcms-switch", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; "hasLabel": { "alias": "hasLabel"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["*"], true, never>;
 }
 
 interface SelectOption {
@@ -308,6 +313,8 @@ declare class RadioGroup {
     readonly id: _angular_core.InputSignal<string>;
     readonly name: _angular_core.InputSignal<string>;
     readonly options: _angular_core.InputSignal<RadioOption[]>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
     readonly describedBy: _angular_core.InputSignal<string | undefined>;
     readonly required: _angular_core.InputSignal<boolean>;
     readonly hasError: _angular_core.Signal<boolean>;
@@ -317,7 +324,7 @@ declare class RadioGroup {
     selectOption(optionValue: string): void;
     protected onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioGroup, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioGroup, "mcms-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioGroup, "mcms-radio-group", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "describedBy": { "alias": "describedBy"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /**
@@ -370,9 +377,19 @@ declare class CardHeader {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardHeader, "mcms-card-header", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Card title component that renders as an ARIA heading.
+ *
+ * Uses `role="heading"` with `aria-level` on the host element instead of
+ * native heading elements inside `@switch` blocks. This avoids Angular SSR
+ * hydration issues where `<ng-content />` inside control flow blocks causes
+ * projected content to be dropped during client-side hydration.
+ */
 declare class CardTitle {
+    /** Heading level (1-4). Defaults to 2 for proper document hierarchy. */
+    readonly level: _angular_core.InputSignal<1 | 3 | 2 | 4>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardTitle, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardTitle, "mcms-card-title", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardTitle, "mcms-card-title", never, { "level": { "alias": "level"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class CardDescription {
@@ -1226,13 +1243,15 @@ declare class Progress {
     readonly value: _angular_core.InputSignal<number | null>;
     /** Maximum value. */
     readonly max: _angular_core.InputSignal<number>;
+    /** Accessible label for the progress bar. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
     /** Additional CSS classes. */
     readonly class: _angular_core.InputSignal<string>;
     readonly isIndeterminate: _angular_core.Signal<boolean>;
     readonly progressWidth: _angular_core.Signal<string>;
     readonly hostClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Progress, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "mcms-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "mcms-progress", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**