@daffodil/design 0.91.0 → 0.92.3-rc.0

package/link-set/index.d.ts

@@ -3,6 +3,8 @@ import * as i1 from '@daffodil/design';
 import * as i1$1 from '@angular/common';
 
 /**
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 0.95.0.
+ *
  * DaffLinkSetComponent is a component for displaying a two or more links.
  */
 declare class DaffLinkSetComponent {
@@ -15,6 +17,7 @@ declare class DaffLinkSetComponent {
 }
 
 /**
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 0.95.0.
  * A directive for adding a heading to a daff-link-set.
  */
 declare class DaffLinkSetHeadingDirective {
@@ -27,6 +30,8 @@ declare class DaffLinkSetHeadingDirective {
 }
 
 /**
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 0.95.0.
+ *
  * A directive for adding a subheading to a daff-link-set.
  */
 declare class DaffLinkSetSubheadingDirective {
@@ -38,6 +43,9 @@ declare class DaffLinkSetSubheadingDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffLinkSetSubheadingDirective, "[daffLinkSetSubheading]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 0.95.0.
+ */
 declare class DaffLinkSetItemComponent {
     /**
      * @docs-private
@@ -48,7 +56,7 @@ declare class DaffLinkSetItemComponent {
 }
 
 /**
- * @deprecated in favor of {@link DAFF_LINK_SET_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
+ * @deprecated Deprecated in version 0.92.0. Will be removed in version 0.95.0.
  */
 declare class DaffLinkSetModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffLinkSetModule, never>;

package/list/README.md

@@ -88,12 +88,12 @@ A list consists of the following components:
 ### Icon support
 Use the `[daffPrefix]` element to display a leading visual icon for a list item.
 
-<design-land-example-viewer-container example="icon-list"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="icon-list"></daff-docs-example-viewer>
 
 ### Multi-line lists
 For list items that contain multiple lines of text, use the `[daffListItemTitle]` element to identify the primary title. Additional supporting content can be added using `<div>` or `<p>` elements.
 
-<design-land-example-viewer-container example="multiline-list"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="multiline-list"></daff-docs-example-viewer>
 
 ## Accessibility
 By default, list includes appropriate ARIA roles by default to support screen readers and provide an accessible experience.

package/loading-icon/README.md

@@ -51,7 +51,7 @@ Use the `color` property to change the color of a loading icon. The default colo
 
 > `theme` and `white` should be used on a darker background in order to have sufficient contrast.
 
-<design-land-example-viewer-container example="loading-icon-color"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="loading-icon-color"></daff-docs-example-viewer>
 
 ## Accessibility
 Loading icons should be given meaningful labels by using `aria-label` or `aria-labelledby`.

package/loading-icon/index.d.ts

@@ -3,7 +3,7 @@ import * as i1$1 from '@angular/common';
 import * as i1 from '@daffodil/design';
 
 /**
- * @inheritdoc
+ * @deprecated in favor of `DaffSpinnerComponent`. Deprecated in version 0.91.1. Will be removed in version 0.94.0.
  */
 declare class DaffLoadingIconComponent {
     /**

package/media-gallery/README.md

@@ -4,7 +4,7 @@ A media gallery displays a group of thumbnails in a gallery format, allowing use
 ## Overview
 Media galleries are ideal for showcasing multiple images or other media related to a single product or topic. They provide an interactive way to browse through content with thumbnail previews that update the primary display when selected.
 
-<design-land-example-viewer-container example="basic-media-gallery"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-media-gallery"></daff-docs-example-viewer>
 
 ## Best practices
 
@@ -86,14 +86,14 @@ A media gallery consists of the following components:
 
 > Never use `[daffThumbnail]` as a standalone element. It must be placed within a `<daff-media-gallery>`. 
 
-<design-land-example-viewer-container example="media-gallery-with-video"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="media-gallery-with-video"></daff-docs-example-viewer>
 
 ## Aspect ratio
 Use a consistent aspect ratio across all content to avoid layout shifts. Mismatched content sizes can cause the primary content area to shift as different thumbnails are selected.
 
 Thumbnails are rendered in a square by default, so a 1:1 ratio is recommended, but not required since thumbnails are automatically centered horizontally and vertically.
 
-<design-land-example-viewer-container example="mismatched-sizes-media-gallery"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="mismatched-sizes-media-gallery"></daff-docs-example-viewer>
 
 ## Accessibility
 - Always provide an accessible label for each thumbnail using the `label` attribute.

package/menu/README.md

@@ -1,14 +1,42 @@
 # Menu
-Menu is a small floating panel used to display a list of actions or navigational items.
+A menu is a floating panel that displays a list of actions or navigational items.
 
 ## Overview
-Menus only appear when a user interacts with a menu activator button. They should be used for secondary actions or options where users don't need immediate access to.
+Menus appear when users interact with a menu activator button. Use menus for secondary actions or options that don't require immediate access.
 
-## Basic Menu
-<design-land-example-viewer-container example="basic-menu"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-menu"></daff-docs-example-viewer>
+
+## Best practices
+
+**When to use**
+- Displaying a list of actions that don't need to be visible at all times
+- Providing secondary or contextual options
+- Creating dropdown navigation
+
+**When not to use**
+- Actions need to be immediately visible and accessible
+- There are only one or two actions (consider using buttons instead)
 
 ## Usage
-To use menu, import `DaffMenuModule` into your custom module:
+
+### Within a standalone component
+To use menu in a standalone component, import `DAFF_MENU_COMPONENTS` directly into your custom component:
+
+```ts
+import { DAFF_MENU_COMPONENTS } from '@daffodil/design/menu';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DAFF_MENU_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use menu in a module, import `DaffMenuModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
@@ -29,13 +57,82 @@ import { CustomComponent } from './custom.component';
 export class CustomComponentModule { }
 ```
 
-## Supported Content Types
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Anatomy
+A menu component consists of the following parts:
+
+### Menu Activator
+**`[daffMenuActivator]`**: A directive attached to a button that triggers the menu to open. The selector doubles as an input for the menu content to display.
+
+### Menu
+**`<daff-menu>`**: The container component that holds menu items.
 
 ### Menu Item
-A menu consists of multiple `daff-menu-item`s. Menu items should be used with an anchor or button HTML element.
+**`<daff-menu-item>`**: Represents a single action or navigation item within the menu. Should be used with an anchor or button HTML element.
 
 ### Icon
-An icon can be added before the content in `daff-menu-item` by using the `daffPrefix` selector.
+Use the `[daffPrefix]` directive to add a decorative icon before the menu item content.
 
-### Menu Activator
-A menu is attached to and triggered by the `daffMenuActivator` directive.
+### Basic structure
+```html
+<button [daffMenuActivator]="menu">
+  Open Menu
+</button>
+
+<ng-template #menu>
+  <daff-menu>
+    <button daff-menu-item>
+      <fa-icon [icon]="faEdit" daffPrefix></fa-icon>
+      Edit
+    </button>
+    <button daff-menu-item>
+      <fa-icon [icon]="faTrash" daffPrefix></fa-icon>
+      Delete
+    </button>
+    <a href="/settings" daff-menu-item>
+      <fa-icon [icon]="faCog" daffPrefix></fa-icon>
+      Settings
+    </a>
+  </daff-menu>
+</ng-template>
+```
+
+## Features
+
+### Accessing menu state
+The menu activator provides an `isOpen` property that tracks whether the menu is currently open or closed. Use this to update your UI based on the menu state, such as changing icons or styling.
+
+<daff-docs-example-viewer example="menu-with-icon-toggle"></daff-docs-example-viewer>
+
+
+### Setting an ID
+
+The menu activator accepts an optional `id` input. When set, the opened menu's `id` is derived as `{id}-menu`. When no `id` is provided, a unique ID is auto-generated.
+
+<daff-docs-example-viewer example="menu-with-id"></daff-docs-example-viewer>
+
+## Accessibility
+Menu follows the [Menu and Menubar WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).
+
+### Daffodil provides
+- `role="menu"` and `role="menuitem"` on appropriate elements
+- Focus management when menu opens and closes
+- `aria-expanded` on the activator indicating the menu state
+
+#### Keyboard interactions
+Keyboard focus is placed on the first item when a menu is opened.
+
+| Key | Action |
+| --- | ------ |
+| `Enter` / `Space` | Opens the menu when focused on the activator, or activates the focused menu item |
+| `Escape` | Closes the menu and returns focus to the menu activator |
+| `Down Arrow` | Moves focus to the next item. If focus is on the last item, focus moves to the first item |
+| `Up Arrow` | Moves focus to the previous item. If focus is on the first item, focus moves to the last item |
+| `Home` | Moves focus to the first item |
+| `End` | Moves focus to the last item |
+
+### Developer responsibilities
+- Provide a meaningful label on the menu activator
+- Ensure menu items have descriptive text or labels
+- Use appropriate HTML elements (`<button>` for actions, `<a>` for navigation)

package/menu/index.d.ts

@@ -1,11 +1,22 @@
 import * as i2 from '@angular/cdk/overlay';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { Injector, ViewContainerRef, TemplateRef, Type, OnDestroy, ChangeDetectorRef, AfterContentInit, AfterViewInit, NgZone, ElementRef } from '@angular/core';
+import { Injector, ViewContainerRef, TemplateRef, Type, OnDestroy, ChangeDetectorRef, AfterContentInit, AfterViewInit, ElementRef } from '@angular/core';
 import { Observable } from 'rxjs';
+import * as i6 from '@daffodil/design';
 import { DaffLazyComponent, DaffPrefixDirective } from '@daffodil/design';
 import * as i1 from '@angular/common';
-import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
+import { ConfigurableFocusTrapFactory, FocusableOption } from '@angular/cdk/a11y';
+
+/**
+ * Configuration for a menu instance.
+ */
+interface DaffMenuConfig {
+    /**
+     * A unique identifier for the menu instance.
+     */
+    menuId?: string;
+}
 
 type DaffMenuSlot = TemplateRef<unknown> | DaffLazyComponent | Type<unknown>;
 declare class DaffMenuService {
@@ -16,39 +27,121 @@ declare class DaffMenuService {
     private $_open;
     open$: Observable<boolean>;
     constructor(overlay: Overlay, injector: Injector);
-    protected _createOverlay(activatorElement: ViewContainerRef, component: DaffMenuSlot): Promise<void>;
+    /**
+     * @docs-private
+     */
+    protected _createOverlay(activatorElement: ViewContainerRef, component: DaffMenuSlot, config?: DaffMenuConfig): Promise<void>;
+    /**
+     * @docs-private
+     */
     protected _destroyOverlay(): void;
     close(): void;
-    open(activator: ViewContainerRef, component: DaffMenuSlot): void;
+    open(activator: ViewContainerRef, component: DaffMenuSlot, config?: DaffMenuConfig): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DaffMenuService>;
 }
 
+/**
+ * Directive that triggers the menu to open/close. Applied to the button that activates the menu. The selector doubles as an input for the menu content to display.
+ *
+ * @example
+ * ```html
+ * <button [daffMenuActivator]="menu">
+ *   Open Menu
+ * </button>
+ * ```
+ */
 declare class DaffMenuActivatorDirective implements OnDestroy {
     private service;
     private viewContainerRef;
     private cdRef;
     private _destroyed$;
     private _open;
+    private _defaultMenuId;
+    readonly isOpen: i0.WritableSignal<boolean>;
+    /**
+     * The menu content to display when activated.
+     */
     daffMenuActivator: Type<unknown> | TemplateRef<unknown>;
+    /**
+     * An optional ID for the activator.
+     * When set, the menu's ID is derived as `${id}-menu`.
+     */
+    id: i0.InputSignal<string>;
+    /**
+     * The resolved menu ID.
+     */
+    private menuId;
+    /**
+     * @docs-private
+     */
+    get ariaExpanded(): "true" | "false";
     constructor(service: DaffMenuService, viewContainerRef: ViewContainerRef, cdRef: ChangeDetectorRef);
+    /**
+     * @docs-private
+     */
     ngOnDestroy(): void;
+    /**
+     * @docs-private
+     */
     focus(): void;
     /**
      * @docs-private
      */
     onClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuActivatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffMenuActivatorDirective, "[daffMenuActivator]", never, { "daffMenuActivator": { "alias": "daffMenuActivator"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffMenuActivatorDirective, "[daffMenuActivator]", ["daffMenuActivator"], { "daffMenuActivator": { "alias": "daffMenuActivator"; "required": false; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * The floating panel that contains menu items.
+ *
+ * @example
+ * ```html
+ * <daff-menu>
+ *  <button daff-menu-item>
+ *    <fa-icon [icon]="faEdit" daffPrefix></fa-icon>
+ *      Edit
+ *    </button>
+ *    <button daff-menu-item>
+ *      <fa-icon [icon]="faTrash" daffPrefix></fa-icon>
+ *      Delete
+ *    </button>
+ *    <a href="/settings" daff-menu-item>
+ *      <fa-icon [icon]="faCog" daffPrefix></fa-icon>
+ *      Settings
+ *    </a>
+ * </daff-menu>
+ * ```
+ */
 declare class DaffMenuComponent implements AfterContentInit, AfterViewInit {
     private _focusTrapFactory;
-    private _ngZone;
     private _elementRef;
     private menuService;
+    /**
+     * @docs-private
+     */
+    readonly config: DaffMenuConfig;
     private _focusTrap;
-    constructor(_focusTrapFactory: ConfigurableFocusTrapFactory, _ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, menuService: DaffMenuService);
+    private _keyManager;
+    /**
+     * @docs-private
+     *
+     * Content children that provide `DAFF_MENU_ITEM_TOKEN` are treated as menu items.
+     * This includes both `daff-menu-item` components and any custom directives that also provide the token.
+     */
+    private _items;
+    constructor(_focusTrapFactory: ConfigurableFocusTrapFactory, _elementRef: ElementRef<HTMLElement>, menuService: DaffMenuService, 
+    /**
+     * @docs-private
+     */
+    config: DaffMenuConfig);
+    /**
+     * @docs-private
+     *
+     * Handle keyboard navigation
+     */
+    handleKeydown(event: KeyboardEvent): void;
     /**
      * @docs-private
      */
@@ -58,22 +151,61 @@ declare class DaffMenuComponent implements AfterContentInit, AfterViewInit {
      */
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMenuComponent, "daff-menu", never, {}, {}, never, ["[daff-menu-item]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffMenuComponent, "daff-menu", never, {}, {}, ["_items"], ["*"], true, never>;
 }
 
-declare class DaffMenuItemComponent {
+/**
+ * Individual clickable items within the menu. Applied to `<button>` or `<a>` elements.
+ *
+ * @example
+ * ```
+ * <a daff-menu-item href="/">Settings</a>
+ * <button daff-menu-item href="/">Settings</button>
+ * ```
+ */
+declare class DaffMenuItemComponent implements FocusableOption {
+    private _elementRef;
+    private _menuService;
     /**
      * @docs-private
      */
     _prefix: DaffPrefixDirective;
+    constructor(_elementRef: ElementRef<HTMLElement>, _menuService: DaffMenuService);
+    /**
+     * @docs-private
+     */
+    onClick(): void;
+    /**
+     * Focus the menu item.
+     */
+    focus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuItemComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffMenuItemComponent, "a[daff-menu-item],button[daff-menu-item]", never, {}, {}, ["_prefix"], ["[daffPrefix]", "*"], true, never>;
 }
 
+/**
+ * @deprecated in favor of {@link DAFF_MENU_COMPONENTS} Deprecated in version 0.92.0. Will be removed in version 0.95.0.
+ */
 declare class DaffMenuModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffMenuModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof DaffMenuActivatorDirective, typeof DaffMenuComponent, typeof DaffMenuItemComponent], [typeof DaffMenuActivatorDirective, typeof DaffMenuComponent, typeof DaffMenuItemComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffMenuModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof DaffMenuActivatorDirective, typeof DaffMenuComponent, typeof DaffMenuItemComponent, typeof i6.DaffPrefixDirective], [typeof DaffMenuActivatorDirective, typeof DaffMenuComponent, typeof DaffMenuItemComponent, typeof i6.DaffPrefixDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffMenuModule>;
 }
 
-export { DaffMenuActivatorDirective, DaffMenuComponent, DaffMenuItemComponent, DaffMenuModule, DaffMenuService };
+/**
+ * @docs-private
+ */
+declare const DAFF_MENU_COMPONENTS: readonly [typeof DaffMenuComponent, typeof DaffMenuActivatorDirective, typeof DaffMenuItemComponent];
+
+/**
+ * Injection token/provider pair used to identify menu items.
+ *
+ * `DaffMenuComponent` uses `@ContentChildren(DAFF_MENU_ITEM_TOKEN)` to discover
+ * its menu items. Use `provideDaffMenuItemToken` in component providers to register
+ * custom directives and components as menu items alongside native `daff-menu-item` elements.
+ */
+declare const DAFF_MENU_ITEM_TOKEN: i0.InjectionToken<FocusableOption>;
+declare const provideDaffMenuItemToken: <R extends FocusableOption = FocusableOption>(klass: i0.Type<R>) => i0.ExistingProvider;
+
+export { DAFF_MENU_COMPONENTS, DAFF_MENU_ITEM_TOKEN, DaffMenuActivatorDirective, DaffMenuComponent, DaffMenuItemComponent, DaffMenuModule, DaffMenuService, provideDaffMenuItemToken };
+export type { DaffMenuConfig, DaffMenuSlot };

package/modal/README.md

@@ -4,7 +4,7 @@ Modal is a dynamically rendered element that floats above the rest of a page's c
 ## Overview
 Modals are used to capture information or attention. They overlay the main content and prevent interaction with the page until the modal is dismissed.
 
-<design-land-example-viewer-container example="basic-modal"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-modal"></daff-docs-example-viewer>
 
 ## Best practices
 

package/modal/index.d.ts

@@ -1,18 +1,37 @@
 import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
 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, ComponentRef } 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';
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { Overlay } from '@angular/cdk/overlay';
 import * as i1$1 from '@angular/common';
 import * as i4 from '@daffodil/design/button';
 import * as i5 from '@fortawesome/angular-fontawesome';
 import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
 
+/**
+ * Reference to modal instance.
+ */
+interface DaffModalRef<T> {
+    /**
+     * The component instance inside the modal.
+     */
+    instance: T;
+    /**
+     * Closes the modal.
+     */
+    close(): void;
+    /**
+     * Emits when the modal close animation completes.
+     */
+    afterClosed: Observable<boolean>;
+}
+
 type DaffModalVerticalPosition = 'top' | 'center';
 interface DaffModalPosition {
     /**
@@ -59,7 +78,7 @@ declare class DaffModalService {
     private _createOverlayRef;
     private _removeModal;
     private _closeAllModals;
-    open(component: Type<any>, configuration?: Partial<DaffModalConfiguration>): DaffModalComponent;
+    open<T>(component: Type<T>, configuration?: Partial<DaffModalConfiguration>): DaffModalRef<T>;
     close(component: DaffModalComponent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DaffModalService>;
@@ -203,21 +222,10 @@ declare class DaffModalModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffModalModule>;
 }
 
-interface DaffModal {
-    /**
-     * The reference to the modal in question
-     */
-    modal: ComponentRef<DaffModalComponent>;
-    /**
-     * The overlay associated with a given modal.
-     */
-    overlay: OverlayRef;
-}
-
 /**
  * @docs-private
  */
 declare const DAFF_MODAL_COMPONENTS: readonly [typeof DaffModalHeaderComponent, typeof DaffModalTitleDirective, typeof DaffModalContentComponent, typeof DaffModalActionsComponent, typeof DaffModalCloseDirective];
 
 export { DAFF_MODAL_COMPONENTS, DaffModalActionsComponent, DaffModalCloseDirective, DaffModalComponent, DaffModalContentComponent, DaffModalHeaderComponent, DaffModalModule, DaffModalService, DaffModalTitleDirective };
-export type { DaffModal };
+export type { DaffModalRef };

package/native-select/README.md

@@ -4,7 +4,7 @@ Native select works alongside the HTML select element, with additional custom st
 ## Overview
 Native select has the same functionality as a native HTML select element, with additional custom styling and functionality. It **cannot** be used by itself and must be contained within a [form field](/libs/design/form-field/README.md).
 
-<design-land-example-viewer-container example="basic-native-select"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="basic-native-select"></daff-docs-example-viewer>
 
 ## Usage
 To use native select, import `DAFF_NATIVE_SELECT_COMPONENTS` directly into your custom component:
@@ -42,19 +42,19 @@ Native select must be used inside `<daff-form-field>` to enable proper state man
 ### Disabled
 Native select can be disabled in two ways: using Angular's reactive forms with `FormControl` or with the native HTML `disabled` attribute.
 
-<design-land-example-viewer-container example="native-select-disabled"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="native-select-disabled"></daff-docs-example-viewer>
 
 ### Error
 Native select supports validation and error messages through Angular's form validation system. Use `<daff-error-message>` within the form field to display context-specific error messages. Error messages automatically appear when the select is invalid and has been touched or submitted.
 
-<design-land-example-viewer-container example="native-select-error"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="native-select-error"></daff-docs-example-viewer>
 
 Multiple error messages can be displayed conditionally based on the type of validation error. The form field component handles the styling and positioning of error messages.
 
 ## Hints
 Hints provide additional context or instructions to help users complete the select field correctly. Use `<daff-hint>` within the form field to display helpful information below the select. Unlike error messages, hints are always visible and provide guidance rather than validation feedback.
 
-<design-land-example-viewer-container example="native-select-hint"></design-land-example-viewer-container>
+<daff-docs-example-viewer example="native-select-hint"></daff-docs-example-viewer>
 
 ## Accessibility
 When `<daff-form-label>` is used within `<daff-form-field>`, the label automatically associates with the select using the `for` and `id` attributes.

package/native-select/index.d.ts

@@ -29,6 +29,11 @@ declare class DaffNativeSelectComponent extends DaffFormFieldControl<string> imp
      * Implemented as part of DaffFormFieldControl.
      */
     private get _id();
+    constructor(
+    /**
+     * @docs-private
+     */
+    ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>, formField: DaffFormFieldComponent);
     /**
      * @docs-private
      */
@@ -42,7 +47,7 @@ declare class DaffNativeSelectComponent extends DaffFormFieldControl<string> imp
     /**
      * @docs-private
      */
-    get disabledAttribute(): true;
+    get disabledAttribute(): boolean;
     private _required;
     /**
      * @docs-private
@@ -55,19 +60,15 @@ declare class DaffNativeSelectComponent extends DaffFormFieldControl<string> imp
      * @docs-private
      */
     get requiredAttribute(): true;
-    /**
-     * @docs-private
-     */
     focus(): void;
     /**
      * @docs-private
      */
-    blur(): void;
-    constructor(
+    _handleFocus(): void;
     /**
      * @docs-private
      */
-    ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>, formField: DaffFormFieldComponent);
+    _handleBlur(): void;
     /** @docs-private */
     ngOnInit(): void;
     /**