@daffodil/design 0.92.3-rc.2 → 0.93.0

package/tree/src/tree-theme.scss

@@ -15,8 +15,10 @@
 			background-color: $base;
 			color: daff-color($neutral, 90);
 
-			&:hover {
-				background-color: daff-color($neutral, 20);
+			@media (hover: hover) {
+				&:hover {
+					background-color: daff-color($neutral, 20);
+				}
 			}
 
 			&::after {
@@ -37,8 +39,10 @@
 			background-color: $base;
 			color: daff-color($neutral, 20);
 
-			&:hover {
-				background-color: daff-color($neutral, 90);
+			@media (hover: hover) {
+				&:hover {
+					background-color: daff-color($neutral, 90);
+				}
 			}
 
 			&::after {

package/{accordion/index.d.ts → types/daffodil-design-accordion.d.ts}

@@ -66,7 +66,7 @@ declare class DaffAccordionItemComponent implements OnInit, DaffOpenable, DaffDi
     /**
      * @docs-private
      */
-    get open(): boolean;
+    get open(): i0.ModelSignal<boolean>;
     /**
      * Reveals the contents of the accordion item.
      */

package/{button/index.d.ts → types/daffodil-design-button.d.ts}

@@ -33,12 +33,11 @@ declare class DaffButtonBaseDirective implements DaffDisableable {
     /**
      * Sets the tabindex.
      */
-    tabindex: number;
+    tabindex: i0.InputSignal<number>;
     /**
      * The disabled state of the button.
      */
-    get disabled(): any;
-    set disabled(value: any);
+    get disabled(): boolean;
     /**
      * @docs-private
      *
@@ -52,7 +51,7 @@ declare class DaffButtonBaseDirective implements DaffDisableable {
      */
     get buttonSize(): _daffodil_design_button.DaffButtonSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.DaffLoadableDirective; inputs: { "loading": "loading"; }; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.DaffLoadableDirective; inputs: { "loading": "loading"; }; outputs: {}; }]>;
 }
 
 /**
@@ -77,9 +76,9 @@ declare class DaffButtonComponent extends DaffButtonBaseDirective {
     /**
      * Whether or not the button displays a shadow.
      */
-    elevated: boolean;
+    elevated: i0.InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],a[daff-button]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],a[daff-button]", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
 }
 
 /**
@@ -175,9 +174,9 @@ declare class DaffStrokedButtonComponent extends DaffButtonBaseDirective {
     /**
      * Whether or not the button displays a shadow.
      */
-    elevated: boolean;
+    elevated: i0.InputSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffStrokedButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedButtonComponent, "button[daff-stroked-button],a[daff-stroked-button]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedButtonComponent, "button[daff-stroked-button],a[daff-stroked-button]", never, { "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
 }
 
 /**

package/{input/index.d.ts → types/daffodil-design-input.d.ts}

@@ -19,7 +19,10 @@ declare class DaffInputComponent extends DaffFormFieldControl<string> implements
      * Implemented as part of DaffFormFieldControl.
      */
     focused: boolean;
-    private get _id();
+    /**
+     * @docs-private
+     */
+    get _id(): string;
     /**
      * @docs-private
      *

package/{list/index.d.ts → types/daffodil-design-list.d.ts}

@@ -54,7 +54,10 @@ declare class DaffListItemComponent {
      */
     _prefix: DaffPrefixDirective;
     constructor(elementRef: ElementRef);
-    private get _isAnchor();
+    /**
+     * @docs-private
+     */
+    get _isAnchor(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffListItemComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffListItemComponent, "daff-list-item,a[daff-list-item]", never, { "active": { "alias": "active"; "required": false; }; }, {}, ["_prefix"], ["[daffPrefix]", "*"], true, never>;
 }

package/{menu/index.d.ts → types/daffodil-design-menu.d.ts}

@@ -56,8 +56,8 @@ declare class DaffMenuActivatorDirective implements OnDestroy {
     private viewContainerRef;
     private cdRef;
     private _destroyed$;
-    private _open;
     private _defaultMenuId;
+    protected _open: boolean;
     readonly isOpen: i0.WritableSignal<boolean>;
     /**
      * The menu content to display when activated.
@@ -71,7 +71,7 @@ declare class DaffMenuActivatorDirective implements OnDestroy {
     /**
      * The resolved menu ID.
      */
-    private menuId;
+    protected menuId: i0.Signal<string>;
     /**
      * @docs-private
      */
@@ -139,7 +139,7 @@ declare class DaffMenuComponent implements AfterContentInit, AfterViewInit {
     /**
      * @docs-private
      *
-     * Handle keyboard navigation
+     * Handles keyboard navigation.
      */
     handleKeydown(event: KeyboardEvent): void;
     /**

package/{modal/index.d.ts → types/daffodil-design-modal.d.ts}

@@ -1,10 +1,10 @@
 import * as rxjs from 'rxjs';
 import { Observable } from 'rxjs';
+import * as i0 from '@angular/core';
+import { Type, AfterContentInit, AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import * as i2 from '@angular/cdk/portal';
 import { ComponentPortal } from '@angular/cdk/portal';
-import * as i0 from '@angular/core';
-import { Type, AfterContentInit, AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@daffodil/design';
 import { DaffOpenable, DaffOpenableDirective, DaffFocusStackService } from '@daffodil/design';
 import * as i3 from '@angular/cdk/overlay';
@@ -91,7 +91,10 @@ declare class DaffModalComponent implements AfterContentInit, AfterViewInit, OnD
     private openDirective;
     private _focusStack;
     private changeDetector;
-    private closing;
+    /**
+     * @docs-private
+     */
+    readonly closing: i0.WritableSignal<boolean>;
     private _ariaLabelledBy;
     /**
      * @docs-private
@@ -137,7 +140,7 @@ declare class DaffModalComponent implements AfterContentInit, AfterViewInit, OnD
     /**
      * Tracks the open state of the modal.
      */
-    get open(): boolean;
+    get open(): i0.ModelSignal<boolean>;
     /**
      * @docs-private
      *
@@ -179,7 +182,10 @@ declare class DaffModalHeaderComponent {
  */
 declare class DaffModalTitleDirective {
     private modal;
-    private _id;
+    /**
+     * @docs-private
+     */
+    _id: string;
     constructor(modal: DaffModalComponent);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffModalTitleDirective, [{ optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffModalTitleDirective, "[daffModalTitle]", never, {}, {}, never, never, true, never>;

package/{native-select/index.d.ts → types/daffodil-design-native-select.d.ts}

@@ -26,9 +26,11 @@ declare class DaffNativeSelectComponent extends DaffFormFieldControl<string> imp
      */
     focused: boolean;
     /**
+     * @docs-private
+     *
      * Implemented as part of DaffFormFieldControl.
      */
-    private get _id();
+    get _id(): string;
     constructor(
     /**
      * @docs-private

package/{sidebar/index.d.ts → types/daffodil-design-sidebar.d.ts}

@@ -94,7 +94,7 @@ declare class DaffSidebarComponent implements DaffOpenable {
     /**
      * @docs-private
      */
-    get open(): boolean;
+    get open(): i0.ModelSignal<boolean>;
     constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusTrapFactory: ConfigurableFocusTrapFactory, _focusStack: DaffFocusStackService, openDirective: DaffOpenableDirective, _doc: any);
     private _focusTrap;
     /**
@@ -207,8 +207,14 @@ declare class DaffSidebarViewportComponent implements AfterContentChecked, OnDes
      * right when there are child sidebars.
      */
     private _shift;
-    private _isPaddedLeft;
-    private _isPaddedRight;
+    /**
+     * @docs-private
+     */
+    _isPaddedLeft: boolean;
+    /**
+     * @docs-private
+     */
+    _isPaddedRight: boolean;
     /**
      * @docs-private
      *

package/{tabs/index.d.ts → types/daffodil-design-tabs.d.ts}

@@ -176,12 +176,6 @@ declare class DaffTabsComponent implements AfterContentInit, OnInit {
      * The tab that is selected on initial load. If it's not used, the first tab in the tablist will be selected by default.
      */
     initiallySelected: string;
-    /**
-     * @docs-private
-     *
-     * aria-label for the tab.
-     */
-    private externalAriaLabel;
     /**
      * `aria-label` to label the tablist.
      */

package/{tag/index.d.ts → types/daffodil-design-tag.d.ts}

@@ -2,7 +2,7 @@ import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome
 import * as i0 from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import * as i1 from '@daffodil/design';
-import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffPrefixDirective } from '@daffodil/design';
+import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffDisableable, DaffPrefixDirective, DaffDisableableDirective } from '@daffodil/design';
 
 /**
  * The size types that the DaffTagComponent can implement.
@@ -24,8 +24,9 @@ declare class DaffTagSizableDirective extends DaffSizableDirective<DaffTagSize>
  *  </daff-tag>
  * ```
  */
-declare class DaffTagComponent {
+declare class DaffTagComponent implements DaffDisableable {
     private size;
+    private disabledDirective;
     /**
      * @docs-private
      */
@@ -34,12 +35,12 @@ declare class DaffTagComponent {
      * @docs-private
      */
     _prefix: DaffPrefixDirective;
-    private _disabled;
     /**
-     * The disabled state of the tag.
+     * @docs-private
+     *
+     * Internal function to access the disabled property of the DaffDisableableDirective.
      */
-    get disabled(): any;
-    set disabled(value: any);
+    get disabled(): boolean;
     private _dismissible;
     /** Whether the tag can be dismissed by the user.
      * Displays a close icon if `true`.
@@ -56,9 +57,9 @@ declare class DaffTagComponent {
      * Internal handler for the close icon click.
      */
     onCloseTag(event: Event): void;
-    constructor(size: DaffTagSizableDirective);
+    constructor(size: DaffTagSizableDirective, disabledDirective: DaffDisableableDirective);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTagComponent, "daff-tag", never, { "disabled": { "alias": "disabled"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closeTag": "closeTag"; }, ["_prefix"], ["[daffPrefix]", "*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffTagSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTagComponent, "daff-tag", never, { "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closeTag": "closeTag"; }, ["_prefix"], ["[daffPrefix]", "*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffTagSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
 }
 
 /**

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

@@ -0,0 +1,11 @@
+/**
+ * Replaces the element's native focus/blur methods with ones that dispatch the corresponding events directly,
+ * so tests do not depend on the document actually having focus. Chrome only
+ * moves `document.activeElement` without firing focus events when the document
+ * is unfocused, which makes native-focus-driven tests order-dependent.
+ *
+ * This originally comes from https://github.com/angular/components/blob/7d09f9153fabfe4cdd13a096d9e6d43f472812e5/src/cdk/testing/testbed/fake-events/element-focus.ts#L30
+ */
+declare function patchElementFocus(element: HTMLElement): void;
+
+export { patchElementFocus };

package/{tree/index.d.ts → types/daffodil-design-tree.d.ts}

@@ -193,6 +193,8 @@ declare class DaffTreeItemDirective {
     /**
      * Accessibility property, notifying users about whether
      * or not the tree item is open.
+     *
+     * @docs-private
      */
     protected readonly ariaExpanded: _angular_core.Signal<"true" | "false">;
     constructor();

package/{youtube-player/index.d.ts → types/daffodil-design-youtube-player.d.ts}

@@ -4,12 +4,24 @@ import { SafeUrl, DomSanitizer, SafeStyle } from '@angular/platform-browser';
 
 declare class DaffYoutubePlayerComponent implements OnInit {
     private sanitizer;
+    /**
+     * The URL of the YouTube video.
+     */
     src: SafeUrl;
+    /**
+     * The title of the YouTube video.
+     */
     title: string;
     private _width;
+    /**
+     * The width of the player.
+     */
     get width(): number;
     set width(value: number);
     private _height;
+    /**
+     * The height of the player.
+     */
     get height(): number;
     set height(value: number);
     constructor(sanitizer: DomSanitizer);
@@ -17,6 +29,9 @@ declare class DaffYoutubePlayerComponent implements OnInit {
      * @docs-private
      */
     ngOnInit(): void;
+    /**
+     * @docs-private
+     */
     get _aspectRatio(): SafeStyle;
     /**
      * @docs-private

package/{index.d.ts → types/daffodil-design.d.ts}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnChanges, OnInit, SimpleChanges, InjectionToken, Type, EventEmitter, ChangeDetectorRef, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
+import { OnChanges, OnInit, SimpleChanges, InjectionToken, Type, Signal, EventEmitter, ChangeDetectorRef, OnDestroy, ElementRef, Renderer2 } from '@angular/core';
 import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { DaffPersistenceService } from '@daffodil/core';
@@ -316,6 +316,8 @@ interface DaffTextAlignable {
  */
 type DaffTextAlignment = 'left' | 'center' | 'right';
 /**
+ * @deprecated Deprecated in version 0.93.0. Will be removed in version 0.96.0.
+ *
  * This enum will be removed from the public api in v1.0.0.
  */
 declare enum DaffTextAlignmentEnum {
@@ -565,23 +567,25 @@ declare class DaffFocusStackService {
 }
 
 /**
- * Interfaces that gives a component the ability to customize sizing for component specific UI.
+ * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.
  */
 interface DaffSizable<T extends DaffSizeAllType> {
     size: T;
 }
-/**
- * The possible types that can be passed to a component that implements DaffSizable
- */
 type DaffSizeXSmallType = 'xs';
 type DaffSizeSmallType = 'sm';
 type DaffSizeMediumType = 'md';
 type DaffSizeLargeType = 'lg';
 type DaffSizeXLargeType = 'xl';
 /**
- * The a type representing all available sizes.
+ * All available sizes.
  */
 type DaffSizeAllType = DaffSizeXSmallType | DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType | DaffSizeXLargeType;
+/**
+ * @deprecated Deprecated in version 0.93.0. Will be removed in version 0.96.0.
+ *
+ * This enum will be removed from the public api in v1.0.0.
+ */
 declare enum DaffSizableEnum {
     XSmall = "xs",
     Small = "sm",
@@ -591,68 +595,15 @@ declare enum DaffSizableEnum {
 }
 
 /**
- * `DaffSizableDirective` allows for dynamic sizing of a component by setting
- * CSS classes based on the specified size.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * <div daffSizable [size]="small">Sized content</div>
- * ```
- * In this example, the `daff-small` class is applied to the `div` element, allowing you to
- * use the class to style the `div`.
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- *  standalone: true,
- *  selector: 'custom-component',
- *  template: 'custom-component.html',
- *  hostDirectives: [
- *    {
- *      directive: DaffSizableDirective,
- *      inputs: ['size'],
- *    },
- *  ],
- * })
- * export class CustomComponent { }
- * ```
- *
- * ```scss
- * :host {
- *  &.daff-sm {
- *    width: 24px;
- *  }
- *
- *  &.daff-md {
- *    width: 32px;
- *  }
- * }
- * ```
- *
- * The directive applies the following CSS classes to the component based on the size:
- *
- * - `daff-xs`: Applied when the size is `xs`.
- * - `daff-sm`: Applied when the size is `sm`.
- * - `daff-md`: Applied when the size is `md`.
- * - `daff-lg`: Applied when the size is `lg`.
- * - `daff-xl`: Applied when the size is `xl`.
+ * `DaffSizableDirective` enforces consistent use of sizes across components.
  */
-declare class DaffSizableDirective<T extends DaffSizeAllType> implements DaffSizable<T>, OnChanges, OnInit {
+declare class DaffSizableDirective<T extends DaffSizeAllType> implements OnChanges, OnInit {
     /**
      * The size of the component.
      */
     size: T;
     /**
      * Sets a default size.
-     *
-     * @example
-     * ```ts
-     * constructor(private sizableDirective: DaffSizableDirective) {
-     *  this.sizableDirective.defaultSize = 'md';
-     * }
-     * ```
      */
     defaultSize: T;
     /**
@@ -672,7 +623,7 @@ declare class DaffSizableDirective<T extends DaffSizeAllType> implements DaffSiz
  */
 interface DaffOpenable {
     /** Whether a component is open or not */
-    open: boolean;
+    open: Signal<boolean>;
     /** Reveal the component */
     reveal: () => void;
     /** Hide the component */
@@ -728,7 +679,7 @@ interface DaffOpenable {
  */
 declare class DaffOpenableDirective implements DaffOpenable, OnChanges {
     /** Controls whether the component is open. */
-    open: boolean;
+    open: i0.ModelSignal<boolean>;
     private _setOpen;
     /** Whether or not a component should handle state
      *
@@ -761,7 +712,7 @@ declare class DaffOpenableDirective implements DaffOpenable, OnChanges {
      */
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffOpenableDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffOpenableDirective, "[daffOpenable]", never, { "open": { "alias": "open"; "required": false; }; }, { "toggled": "toggled"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffOpenableDirective, "[daffOpenable]", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "toggled": "toggled"; }, never, never, true, never>;
 }
 
 /**
@@ -777,6 +728,8 @@ interface DaffOrientable {
  */
 type DaffOrientation = 'horizontal' | 'vertical';
 /**
+ * @deprecated Deprecated in version 0.93.0. Will be removed in version 0.96.0.
+ *
  * This enum will be removed from the public api in v1.0.0.
  */
 declare enum DaffOrientationEnum {