@daffodil/design 0.93.0 → 0.94.0

package/tag/README.md

@@ -1,8 +1,8 @@
 # Tag
-Tags are compact visual indicators used to display short pieces of information such as status, categories, or labels.
+Tags are interactive indicators and filters that can be edited or removed, used to represent selections, categories, or applied filters.
 
 ## Overview
-Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container.
+Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container. Tags can be dismissed to remove a selection or filter, making them well suited for filter chips, applied search criteria, and editable selections.
 
 <daff-docs-example-viewer example="basic-tag"></daff-docs-example-viewer>
 
@@ -36,7 +36,7 @@ A tag is composed of a wrapper, an optional prefix, a label, and an optional clo
 - **`<daff-tag>`**: The wrapper component that holds all tag content.
 - **`[daffPrefix]`**: A leading visual, typically an icon, displayed before the label.
 - **Label**: The text content of the tag, projected as a child element.
-- **Close button**: A trailing dismiss button, displayed when `dismissible` is `true`.
+- **Close button**: A trailing remove button, displayed when `dismissible` is `true`.
 
 ## Features
 
@@ -46,7 +46,7 @@ Set `dismissible` to `true` to display a close button. The button emits a `close
 <daff-docs-example-viewer example="dismissible-tag"></daff-docs-example-viewer>
 
 ### Disabled tags
-Set `disabled` to `true` to disable the tag. Disabled tags cannot be dismissed.
+Set `disabled` to `true` to disable the tag. Disabled tags cannot be removed.
 
 <daff-docs-example-viewer example="disabled-tag"></daff-docs-example-viewer>
 
@@ -63,15 +63,19 @@ Use the `color` property to change the color of a tag. Supported colors: `primar
 ### Statuses
 Use the `status` property to convey semantic meaning. Supported statuses: `warn`, `critical`, `info`, `success`.
 
+> **Deprecation notice:**
+>
+> The `status` property is deprecated. Tags are intended for selections, categories, and applied filters, so use the `color` property instead.
+
 <daff-docs-example-viewer example="statusable-tag"></daff-docs-example-viewer>
 
 ## Accessibility
 
 ### Built-in behavior
 - Default tags are not interactive and do not receive focus.
-- Dismissible tags include a focusable close button that can be activated with `Enter` or `Space`.
+- Removable tags include a focusable close button that can be activated with `Enter` or `Space`.
 - Disabled tags expose `aria-disabled="true"` and ignore close button activation.
 
 ### Developer responsibilities
 - Always provide a text label unless the icon is universally understood and accessible.
-- Use the `status` property to communicate semantic meaning, rather than relying on color alone.
+- Communicate meaning through the tag's label or an accessible icon, rather than relying on color alone.

package/tag/src/tag-theme.scss

@@ -1,3 +1,4 @@
+// stylelint-disable selector-class-pattern
 @use '../../scss/theming' as *;
 
 @mixin daff-tag-theme($theme) {
@@ -14,123 +15,219 @@
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-tag {
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			background: daff-color($neutral, 20);
 			color: $black;
 
+			&::after {
+				background: daff-color($neutral, 30);
+			}
+
 			&.daff-primary {
 				background: daff-color($primary, 10);
 				color: daff-color($primary, 70);
+
+				&::after {
+					background: daff-color($primary, 20);
+				}
 			}
 
 			&.daff-secondary {
 				background: daff-color($secondary, 10);
 				color: daff-color($secondary, 70);
+
+				&::after {
+					background: daff-color($secondary, 20);
+				}
 			}
 
 			&.daff-tertiary {
 				background: daff-color($tertiary, 10);
 				color: daff-color($tertiary, 70);
+
+				&::after {
+					background: daff-color($tertiary, 20);
+				}
 			}
 
 			&.daff-dark {
 				background: daff-color($neutral, 90);
 				color: daff-color($neutral, 10);
+
+				&::after {
+					background: daff-color($neutral, 100);
+				}
 			}
 
 			&.daff-light {
 				background: daff-color($neutral, 10);
 				color: daff-color($neutral, 90);
+
+				&::after {
+					background: daff-color($neutral, 20);
+				}
 			}
 
 			&.daff-theme {
 				background: $white;
 				color: $black;
+
+				&::after {
+					background: daff-color($neutral, 20);
+				}
 			}
 
 			&.daff-theme-contrast {
 				background: $black;
 				color: $white;
+
+				&::after {
+					background: daff-color($neutral, 90);
+				}
 			}
 
 			&.daff-warn {
 				background: daff-color($warn, 10);
 				color: daff-color($warn, 70);
+
+				&::after {
+					background: daff-color($warn, 20);
+				}
 			}
 
 			&.daff-success {
 				background: daff-color($success, 10);
 				color: daff-color($success, 70);
+
+				&::after {
+					background: daff-color($success, 20);
+				}
 			}
 
 			&.daff-critical {
 				background: daff-color($critical, 10);
 				color: daff-color($critical, 70);
+
+				&::after {
+					background: daff-color($critical, 20);
+				}
 			}
 
 			&.daff-info {
 				background: daff-color($info, 10);
-				color: daff-color($info, 70);
+				color: daff-color($info, 90);
+
+				&::after {
+					background: daff-color($info, 20);
+				}
 			}
 		}
 
-		@include dark($mode) {
-			background: daff-color($neutral, 90);
+		@include daff-dark-mode($mode) {
+			background: daff-color($neutral, 80);
 			color: daff-color($neutral, 20);
 
+			&::after {
+				background: daff-color($neutral, 90);
+			}
+
 			&.daff-primary {
 				background: daff-color($primary, 90);
 				color: daff-color($primary, 10);
+
+				&::after {
+					background: daff-color($primary, 100);
+				}
 			}
 
 			&.daff-secondary {
 				background: daff-color($secondary, 90);
 				color: daff-color($secondary, 10);
+
+				&::after {
+					background: daff-color($secondary, 100);
+				}
 			}
 
 			&.daff-tertiary {
 				background: daff-color($tertiary, 90);
 				color: daff-color($tertiary, 10);
+
+				&::after {
+					background: daff-color($tertiary, 100);
+				}
 			}
 
 			&.daff-dark {
 				background: daff-color($neutral, 90);
 				color: daff-color($neutral, 10);
+
+				&::after {
+					background: daff-color($neutral, 100);
+				}
 			}
 
 			&.daff-light {
 				background: daff-color($neutral, 10);
 				color: daff-color($neutral, 90);
+
+				&::after {
+					background: daff-color($neutral, 30);
+				}
 			}
 
 			&.daff-theme {
 				background: $black;
 				color: $white;
+
+				&::after {
+					background: daff-color($neutral, 100);
+				}
 			}
 
 			&.daff-theme-contrast {
 				background: $white;
 				color: $black;
+
+				&::after {
+					background: daff-color($neutral, 20);
+				}
 			}
 
 			&.daff-warn {
 				background: daff-color($warn, 90);
 				color: daff-color($warn, 10);
+
+				&::after {
+					background: daff-color($warn, 100);
+				}
 			}
 
 			&.daff-success {
 				background: daff-color($success, 90);
 				color: daff-color($success, 10);
+
+				&::after {
+					background: daff-color($success, 100);
+				}
 			}
 
 			&.daff-critical {
 				background: daff-color($critical, 90);
 				color: daff-color($critical, 10);
+
+				&::after {
+					background: daff-color($critical, 100);
+				}
 			}
 
 			&.daff-info {
-				background: daff-color($info, 70);
+				background: daff-color($info, 80);
 				color: daff-color($info, 10);
+
+				&::after {
+					background: daff-color($neutral, 80);
+				}
 			}
 		}
 	}

package/toast/src/toast-theme.scss

@@ -12,7 +12,7 @@
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-toast {
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			background: daff-color($neutral, 10);
 			box-shadow: 0 -16px 24px -4px rgba($black, 0.04),
 				0 8px 24px -4px rgba($black, 0.1);
@@ -62,7 +62,7 @@
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			background: daff-color($neutral, 90);
 			box-shadow: 0 -16px 24px -4px rgba($black, 0.04),
 				0 8px 24px -4px rgba($black, 0.1);

package/tree/src/tree-theme.scss

@@ -11,7 +11,7 @@
 	.daff-tree-item {
 		$root: &;
 
-		@include light($mode) {
+		@include daff-light-mode($mode) {
 			background-color: $base;
 			color: daff-color($neutral, 90);
 
@@ -35,7 +35,7 @@
 			}
 		}
 
-		@include dark($mode) {
+		@include daff-dark-mode($mode) {
 			background-color: $base;
 			color: daff-color($neutral, 20);
 

package/types/daffodil-design-accordion.d.ts

@@ -43,15 +43,15 @@ declare class DaffAccordionItemComponent implements OnInit, DaffOpenable, DaffDi
     /**
      * The unique id of an accordion item. Defaults to an autogenerated value.
      */
-    itemId: string;
+    itemId: i0.InputSignal<string>;
     /**
      * The unique id of an accordion item content. Defaults to an autogenerated value.
      */
-    contentId: string;
+    contentId: i0.InputSignal<string>;
     /**
      * Whether or not an accordion item is initially expanded by default.
      */
-    initiallyExpanded: boolean;
+    initiallyExpanded: i0.InputSignal<boolean>;
     /**
      * @docs-private
      *
@@ -80,7 +80,7 @@ declare class DaffAccordionItemComponent implements OnInit, DaffOpenable, DaffDi
      */
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "itemId": { "alias": "itemId"; "required": false; }; "contentId": { "alias": "contentId"; "required": false; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], true, [{ directive: typeof i1.DaffOpenableDirective; inputs: {}; outputs: { "toggled": "toggled"; }; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "itemId": { "alias": "itemId"; "required": false; "isSignal": true; }; "contentId": { "alias": "contentId"; "required": false; "isSignal": true; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; "isSignal": true; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], true, [{ directive: typeof i1.DaffOpenableDirective; inputs: {}; outputs: { "toggled": "toggled"; }; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
 /**

package/types/daffodil-design-badge.d.ts

@@ -0,0 +1,63 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@daffodil/design';
+import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffPrefixDirective, DaffColorableDirective } from '@daffodil/design';
+
+/**
+ * The visual style of a badge.
+ *
+ * - `filled` renders a solid background (the default).
+ * - `outlined` renders a semi-transparent background with a colored border.
+ */
+type DaffBadgeAppearance = 'filled' | 'outlined';
+declare enum DaffBadgeAppearanceEnum {
+    Filled = "filled",
+    Outlined = "outlined"
+}
+
+/**
+ * The size types that the DaffBadgeComponent can implement.
+ */
+type DaffBadgeSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
+declare class DaffBadgeSizableDirective extends DaffSizableDirective<DaffBadgeSize> {
+    /**
+     * @docs-private
+     */
+    defaultSize: DaffBadgeSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffBadgeSizableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffBadgeSizableDirective, never, never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * DaffBadgeComponent is a compact visual label or indicator used to
+ * convey status or display short pieces of information.
+ *
+ * @example
+ * ```html
+ *  <daff-badge color="primary" appearance="outlined">
+ *   <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
+ *   Verified
+ *  </daff-badge>
+ * ```
+ */
+declare class DaffBadgeComponent {
+    private sizableDirective;
+    private colorableDirective;
+    /**
+     * @docs-private
+     */
+    _prefix: i0.Signal<DaffPrefixDirective>;
+    /**
+     * The visual style of the badge. Defaults to `filled`.
+     */
+    appearance: i0.InputSignalWithTransform<DaffBadgeAppearance | DaffBadgeAppearanceEnum.Filled, "" | DaffBadgeAppearance>;
+    constructor(sizableDirective: DaffBadgeSizableDirective, colorableDirective: DaffColorableDirective);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffBadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBadgeComponent, "daff-badge", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, ["_prefix"], ["[daffPrefix]", "*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof DaffBadgeSizableDirective; inputs: { "size": "size"; }; outputs: {}; }]>;
+}
+
+/**
+ * @docs-private
+ */
+declare const DAFF_BADGE_COMPONENTS: readonly [typeof DaffBadgeComponent, typeof DaffPrefixDirective];
+
+export { DAFF_BADGE_COMPONENTS, DaffBadgeComponent, DaffBadgeSizableDirective };

package/types/daffodil-design-beacon.d.ts

@@ -0,0 +1,26 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@daffodil/design';
+
+/**
+ * The cadence of the beacon ring, e.g. how long one expand-and-fade cycle takes.
+ *
+ * - `slow` - a relaxed 3.6s cycle.
+ * - `normal` - the default 2.4s cycle.
+ * - `fast` - an urgent 1.2s cycle.
+ */
+type DaffBeaconSpeed = 'slow' | 'normal' | 'fast';
+
+/**
+ * DaffBeaconComponent is a small indicator that draws visual attention to a specific location or element.
+ */
+declare class DaffBeaconComponent {
+    /**
+     * How fast the beacon pulses.
+     */
+    speed: i0.InputSignal<DaffBeaconSpeed>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffBeaconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBeaconComponent, "daff-beacon", never, { "speed": { "alias": "speed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffSizableDirective; inputs: { "size": "size"; }; outputs: {}; }]>;
+}
+
+export { DaffBeaconComponent };

package/types/daffodil-design-card.d.ts

@@ -8,10 +8,10 @@ declare class DaffCardBaseDirective {
     /**
      * Whether or not a card displays a shadow.
      */
-    elevated: boolean;
+    elevated: i0.InputSignal<boolean>;
     constructor(orientation: DaffOrientableDirective);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffOrientableDirective; inputs: { "orientation": "orientation"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffOrientableDirective; inputs: { "orientation": "orientation"; }; outputs: {}; }]>;
 }
 
 /**

package/types/daffodil-design-form-field.d.ts

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { AfterContentInit, AfterContentChecked, AfterViewInit, ElementRef, ChangeDetectorRef } from '@angular/core';
 import * as i3 from '@daffodil/design';
 import { DaffPrefixDirective, DaffSuffixDirective, DaffFormLabelDirective } from '@daffodil/design';
@@ -11,8 +11,8 @@ import { BehaviorSubject, Observable } from 'rxjs';
  * DaffFormFieldActionDirective marks an element, typically a button, as an action attached to a form control inside `DaffFormFieldComponent`.
  */
 declare class DaffFormFieldActionDirective {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldActionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffFormFieldActionDirective, "[daffFormFieldAction]", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DaffFormFieldActionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DaffFormFieldActionDirective, "[daffFormFieldAction]", never, {}, {}, never, never, true, never>;
 }
 
 interface DaffFormFieldState {
@@ -99,7 +99,11 @@ declare abstract class DaffFormFieldControl<T> {
     emitState(deferred?: boolean): void;
 }
 
-type DaffFormFieldApperanace = 'fluid' | 'fixed';
+type DaffFormFieldAppearance = 'fluid' | 'fixed';
+declare enum DaffFormFieldAppearanceEnum {
+    Fluid = "fluid",
+    Fixed = "fixed"
+}
 /**
  * DaffFormFieldComponent is a wrapping component that provides consistent styling and behavior for form control elements.
  */
@@ -107,31 +111,32 @@ declare class DaffFormFieldComponent implements AfterContentInit, AfterContentCh
     private cd;
     elementRef: ElementRef;
     /** @docs-private */
-    get isNativeSelect(): boolean;
+    isNativeSelect: _angular_core.Signal<boolean>;
     constructor(cd: ChangeDetectorRef, elementRef: ElementRef);
     /** @docs-private */
-    _prefix: DaffPrefixDirective;
+    _prefix: _angular_core.Signal<DaffPrefixDirective>;
     /** @docs-private */
-    _suffix: DaffSuffixDirective;
+    _suffix: _angular_core.Signal<DaffSuffixDirective>;
     /**
      * @docs-private
      *
      * The child form control that the form field manages.
      */
-    _control: DaffFormFieldControl<unknown>;
+    _control: _angular_core.Signal<DaffFormFieldControl<any>>;
     /**
      * @docs-private
+     *
      * @deprecated Deprecated in version 0.86.0. Will be removed in version 1.0.0.
      */
-    _formLabelDirective: DaffFormLabelDirective;
+    _formLabelDirective: _angular_core.Signal<DaffFormLabelDirective>;
     /**
      * @docs-private
      */
-    _formFieldLabelDirective: DaffFormFieldLabelDirective;
+    _formFieldLabelDirective: _angular_core.Signal<DaffFormFieldLabelDirective>;
     /**
      * @docs-private
      */
-    _action: DaffFormFieldActionDirective;
+    _action: _angular_core.Signal<DaffFormFieldActionDirective>;
     /**
      * @docs-private
      */
@@ -146,28 +151,28 @@ declare class DaffFormFieldComponent implements AfterContentInit, AfterContentCh
      * Tracking property to keep a record of whether or not the
      * form field should be marked as error.
      */
-    isError: boolean;
+    isError: _angular_core.WritableSignal<boolean>;
     /**
      * @docs-private
      *
      * Tracking property to keep a record of whether or not the
      * form field contains any user input.
      */
-    isFilled: boolean;
+    isFilled: _angular_core.WritableSignal<boolean>;
     /**
      * @docs-private
      *
      * Tracking property to keep a record of whether or not the
      * form field should be marked as disabled.
      */
-    isDisabled: boolean;
+    isDisabled: _angular_core.WritableSignal<boolean>;
     /**
      * @docs-private
      *
      * Tracking property to keep a record of whether or not the
      * form field should be marked as valid.
      */
-    isValid: boolean;
+    isValid: _angular_core.WritableSignal<boolean>;
     /**
      * @docs-private
      *
@@ -178,47 +183,45 @@ declare class DaffFormFieldComponent implements AfterContentInit, AfterContentCh
      * @docs-private
      */
     get isRaised(): boolean;
-    private _appearance;
     /**
      * The appearance of the form field. Defaults to `fluid`.
      */
-    get appearance(): DaffFormFieldApperanace;
-    set appearance(value: DaffFormFieldApperanace);
+    appearance: _angular_core.InputSignalWithTransform<DaffFormFieldAppearance | DaffFormFieldAppearanceEnum.Fluid, "" | DaffFormFieldAppearance>;
     /**
      * @docs-private
      */
-    get isFixed(): boolean;
+    isFixed: _angular_core.Signal<boolean>;
     /**
      * The unique id of the form field. Defaults to an autogenerated value. When using this,
      * it's your responsibility to ensure that the id for each form field is unique.
      *
      * It gets assigned to the `for` attribute on the `<label>` inside of the form field.
      */
-    id: string;
+    id: _angular_core.InputSignal<string>;
     /**
      * @docs-private
      */
-    hasHint(): boolean;
+    hasHint: _angular_core.Signal<boolean>;
     /**
      * @docs-private
      */
-    hintId: string;
+    hintId: _angular_core.Signal<string>;
     /**
      * @docs-private
      */
-    hasErrorMessage(): boolean;
+    hasErrorMessage: _angular_core.Signal<boolean>;
     /**
      * @docs-private
      */
-    errorMessageId: string;
+    errorMessageId: _angular_core.Signal<string>;
     /**
      * @docs-private
      */
-    get autoLabelId(): string;
+    autoLabelId: _angular_core.Signal<string>;
     /**
      * @docs-private
      */
-    get customId(): string;
+    customId: _angular_core.Signal<string>;
     /**
      * @docs-private
      *
@@ -245,17 +248,17 @@ declare class DaffFormFieldComponent implements AfterContentInit, AfterContentCh
      * validation of usage.
      */
     ngAfterContentChecked(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, { "appearance": { "alias": "appearance"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, ["_prefix", "_suffix", "_control", "_formLabelDirective", "_formFieldLabelDirective", "_action", "_hint", "_error"], ["*", "[daffPrefix]", "*", "[daffSuffix]", "daff-hint", "daff-error-message", "[daffFormFieldAction]", "label[daffFormLabel]", "daff-form-label", "label"], true, [{ directive: typeof i3.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DaffFormFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DaffFormFieldComponent, "daff-form-field", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, ["_prefix", "_suffix", "_control", "_formLabelDirective", "_formFieldLabelDirective", "_action", "_hint", "_error"], ["*", "[daffPrefix]", "*", "[daffSuffix]", "daff-hint", "daff-error-message", "[daffFormFieldAction]", "label[daffFormLabel]", "daff-form-label", "label"], true, [{ directive: typeof i3.DaffSkeletonableDirective; inputs: { "skeleton": "skeleton"; }; outputs: {}; }]>;
 }
 
 /**
  * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
  */
 declare class DaffFormFieldModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffFormFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffFormFieldModule, never, [typeof DaffFormFieldComponent, typeof i2.DaffErrorMessageComponent, typeof i2.DaffHintComponent, typeof i2.DaffFormFieldLabelDirective, typeof i3.DaffFormLabelModule], [typeof DaffFormFieldComponent, typeof i2.DaffErrorMessageComponent, typeof i2.DaffHintComponent, typeof i2.DaffFormFieldLabelDirective, typeof i3.DaffFormLabelModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<DaffFormFieldModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DaffFormFieldModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<DaffFormFieldModule, never, [typeof DaffFormFieldComponent, typeof i2.DaffErrorMessageComponent, typeof i2.DaffHintComponent, typeof i2.DaffFormFieldLabelDirective, typeof i3.DaffFormLabelModule], [typeof DaffFormFieldComponent, typeof i2.DaffErrorMessageComponent, typeof i2.DaffHintComponent, typeof i2.DaffFormFieldLabelDirective, typeof i3.DaffFormLabelModule]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<DaffFormFieldModule>;
 }
 
 /**

package/types/daffodil-design-form.d.ts

@@ -9,9 +9,9 @@ declare class DaffHintComponent {
     /**
      * Displays a validated hint UI.
      * */
-    validated: boolean;
+    validated: i0.InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffHintComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHintComponent, "daff-hint", never, { "validated": { "alias": "validated"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffHintComponent, "daff-hint", never, { "validated": { "alias": "validated"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class DaffFormFieldLabelDirective {