@daffodil/design 0.86.0 → 0.87.1

package/form-field/examples/examples.d.ts

@@ -0,0 +1,3 @@
+import { FormFieldWithPrefixComponent } from './form-field-with-prefix/form-field-with-prefix.component';
+import { FormFieldWithSuffixComponent } from './form-field-with-suffix/form-field-with-suffix.component';
+export declare const FORM_FIELD_EXAMPLES: (typeof FormFieldWithPrefixComponent | typeof FormFieldWithSuffixComponent)[];

package/form-field/examples/form-field-appearances/form-field-appearances.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class FormFieldAppearancesComponent {
+    faUser: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    faEye: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldAppearancesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldAppearancesComponent, "form-field-appearances", never, {}, {}, never, never, true, never>;
+}

package/form-field/examples/form-field-with-action/form-field-with-action.component.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+export declare class FormFieldWithActionComponent {
+    faUser: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    faCircleXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    inputValue: string;
+    clearInput(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldWithActionComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldWithActionComponent, "form-field-with-action", never, {}, {}, never, never, true, never>;
+}

package/form-field/examples/form-field-with-prefix/form-field-with-prefix.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class FormFieldWithPrefixComponent {
+    faUser: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldWithPrefixComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldWithPrefixComponent, "form-field-with-prefix", never, {}, {}, never, never, true, never>;
+}

package/form-field/examples/form-field-with-suffix/form-field-with-suffix.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class FormFieldWithSuffixComponent {
+    faPencil: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldWithSuffixComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldWithSuffixComponent, "form-field-with-suffix", never, {}, {}, never, never, true, never>;
+}

package/form-field/examples/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/form-field/examples/public_api.d.ts

@@ -0,0 +1 @@
+export { FORM_FIELD_EXAMPLES } from './examples';

package/input/input.component.d.ts

@@ -1,11 +1,11 @@
-import { ElementRef, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { ElementRef, OnInit } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { DaffFormFieldComponent, DaffFormFieldControl } from '@daffodil/design';
 import * as i0 from "@angular/core";
 /**
  * DaffInputComponent provides the same functionality as a native `<input>` and contains custom styling and functionality.
  */
-export declare class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit, OnChanges {
+export declare class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {
     /** @docs-private */
     ngControl: NgControl;
     private _elementRef;
@@ -18,7 +18,7 @@ export declare class DaffInputComponent extends DaffFormFieldControl<string> imp
     focused: boolean;
     /** @docs-private */
     focus(): void;
-    private _id;
+    private get _id();
     /**
      * @docs-private
      */
@@ -32,16 +32,12 @@ export declare class DaffInputComponent extends DaffFormFieldControl<string> imp
     constructor(
     /** @docs-private */
     ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>, formField: DaffFormFieldComponent);
-    /**
-     * @docs-private
-     */
-    ngOnChanges(changes: SimpleChanges): void;
     /** @docs-private */
     ngOnInit(): void;
     /** @docs-private */
     onFocus(): void;
     /** @docs-private */
     get value(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputComponent, [{ optional: true; self: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputComponent, [{ optional: true; self: true; }, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffInputComponent, "input[daff-input]", never, {}, {}, never, ["*"], true, never>;
 }

package/media-gallery/README.md

@@ -1,13 +1,15 @@
 # Media gallery
-Media gallery is used to display a group of thumbnails in a gallery format.
+A media gallery displays a group of thumbnails in a gallery format, allowing users to preview and select different media.
 
 ## Overview
-Media galleries are useful to showcase multiple images related to a single product or topic.
+Use a media gallery to showcase multiple images or other media related to a single product or topic. Thumbnails are interactive and update the primary display when selected.
+
+<design-land-example-viewer-container example="basic-media-gallery"></design-land-example-viewer-container>
 
 ## Usage
 
 ### Within a standalone component
-To use media gallery in a standalone component, import `DAFF_MEDIA_GALLERY_COMPONENTS` directly into your custom component:
+To use media gallery in a standalone component, import `DAFF_MEDIA_GALLERY_COMPONENTS` into your custom component:
 
 ```ts
 import { DAFF_MEDIA_GALLERY_COMPONENTS } from '@daffodil/design/media-gallery';
@@ -46,27 +48,37 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Thumbnail
-`[daffThumbnail]` is a **structural** directive that can be used with any component that you would like to render inside your media gallery. You can set a value for the image for your element like:
+## Anatomy
+Use the `[daffThumbnail]` **structural directive** to define a thumbnail in the gallery. Thumbnails can contain any content type, not just images.
 
 ```html
 <daff-media-gallery>
   <ng-template daffThumbnail thumbnailSrc="/thumbnail-path.jpg" label="Your description">
-    <daff-image src="/image-path.jpg" alt="Your description" width="100" height="100"></daff-image>
+    <daff-image src="/image-path.jpg" alt="Your description" width="500" height="500"></daff-image>
   </ng-template>
 </daff-media-gallery>
 ```
 
-It should never be used as a standalone component. The first thumbnail is selected by default and dynamically rendered as the primary image. The selected thumbnail can be controlled by the user, and the position of the list of thumbnails is dependent on the screen size.
+- `thumbnailSrc` is used for the preview image rendered in the thumbnail strip.
+- The content inside the template will be shown as the primary view when selected.
+- You must include the full content for each thumbnail inside the template, even if it appears to duplicate the thumbnail image since this is what renders in the main display area when selected.
+- Always provide an accessible label for a thumbnail using `label`.
+- The `isVideo` property can be used to display a video icon on the thumbnail.
+- The first thumbnail is selected by default.
+
+> 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>
 
-<design-land-example-viewer-container example="basic-media-gallery"></design-land-example-viewer-container>
 
-## Image aspect ratio
-It's recommended to utilize the same aspect ratio for all images in the same media gallery. Otherwise, the height and width of the media gallery may change with every different aspect ratio presented by the selected thumbnail as shown in the example.
+## 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.
 
-The thumbnail dimension is set to a square, so the recommended aspect ratio is `1:1`. However, it is not required since the thumbnail will horizontally and vertically center align images within a thumbnail.
+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>
 
 ## Accessibility
-Accessibility considerations for media gallery is handled by the `DaffImageComponent`. The `alt` attribute must be defined in `<daff-image>`. It specifies an alternate text for an image. An error will appear if it's not defined. This is important because it allows screen readers to describe what's in the image for visually impaired people. See [Image](/libs/design/image/README.md) for more information.
+- Always provide an accessible label for each thumbnail using the `label` attribute.
+- Each thumbnail is rendered as a button with an autogenerated `aria-controls` value that matches the `id` of the content container displayed when the thumbnail is selected.
+- These `id` values are autogenerated but can be overridden by providing a custom id to the `<daff-media-gallery>` element.

package/modal/modal/modal.component.d.ts

@@ -1,8 +1,8 @@
 import { AnimationEvent } from '@angular/animations';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { EventEmitter, ElementRef, AfterContentInit, AfterViewInit } from '@angular/core';
-import { DaffOpenable, DaffOpenableDirective } from '@daffodil/design';
+import { EventEmitter, ElementRef, AfterContentInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { DaffOpenable, DaffOpenableDirective, DaffFocusStackService } from '@daffodil/design';
 import { DaffModalService } from '../service/modal.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
@@ -11,6 +11,8 @@ export declare class DaffModalComponent implements AfterContentInit, AfterViewIn
     private _focusTrapFactory;
     private elementRef;
     private openDirective;
+    private _focusStack;
+    private changeDetector;
     /**
      * Sets a class of .daff-modal to the host element.
      */
@@ -60,7 +62,7 @@ export declare class DaffModalComponent implements AfterContentInit, AfterViewIn
      */
     onEscape(): void;
     private _focusTrap;
-    constructor(modalService: DaffModalService, _focusTrapFactory: ConfigurableFocusTrapFactory, elementRef: ElementRef<HTMLElement>, openDirective: DaffOpenableDirective);
+    constructor(modalService: DaffModalService, _focusTrapFactory: ConfigurableFocusTrapFactory, elementRef: ElementRef<HTMLElement>, openDirective: DaffOpenableDirective, _focusStack: DaffFocusStackService, changeDetector: ChangeDetectorRef);
     /**
      * @docs-private
      */

package/notification/src/notification-theme.scss

@@ -2,8 +2,6 @@
 
 @mixin daff-notification-theme($theme) {
 	$primary: daff-get-palette($theme, primary);
-	$secondary: daff-get-palette($theme, secondary);
-	$tertiary: daff-get-palette($theme, tertiary);
 	$info: daff-get-palette($theme, informational);
 	$warn: daff-get-palette($theme, warn);
 	$critical: daff-get-palette($theme, critical);
@@ -11,20 +9,28 @@
 	$neutral: daff-get-palette($theme, neutral);
 	$base: daff-get-base-color($theme, base);
 	$base-contrast: daff-get-base-color($theme, base-contrast);
-	$black: daff-get-base-color($theme, 'black');
-	$white: daff-get-base-color($theme, 'white');
 	$mode: daff-get-theme-mode($theme);
 
 	.daff-notification {
 		@include light($mode) {
 			background: daff-color($neutral, 10);
 			border: 1px solid daff-color($neutral, 20);
-			color: $black;
+			color: $base-contrast;
+
+			&.daff-info {
+				background: daff-color($primary, 10);
+				border: 1px solid daff-color($primary, 20);
+				color: $base-contrast;
+
+				.daff-prefix {
+					color: daff-color($primary, 80);
+				}
+			}
 
 			&.daff-success {
 				background: daff-color($success, 10);
 				border: 1px solid daff-color($success, 20);
-				color: daff-text-contrast(daff-color($success, 10));
+				color: $base-contrast;
 
 				.daff-prefix {
 					color: daff-color($success, 80);
@@ -34,7 +40,7 @@
 			&.daff-warn {
 				background: daff-color($warn, 10);
 				border: 1px solid daff-color($warn, 20);
-				color: daff-text-contrast(daff-color($warn, 10));
+				color: $base-contrast;
 
 				.daff-prefix {
 					color: daff-color($warn, 80);
@@ -44,7 +50,7 @@
 			&.daff-critical {
 				background: daff-color($critical, 10);
 				border: 1px solid daff-color($critical, 20);
-				color: daff-text-contrast(daff-color($critical, 10));
+				color: $base-contrast;
 
 				.daff-prefix {
 					color: daff-color($critical, 80);
@@ -55,12 +61,22 @@
 		@include dark($mode) {
 			background: daff-color($neutral, 90);
 			border: 1px solid daff-color($neutral, 80);
-			color: $white;
+			color: $base-contrast;
+
+			&.daff-info {
+				background: daff-color($primary, 100);
+				border: 1px solid daff-color($primary, 90);
+				color: $base-contrast;
+
+				.daff-prefix {
+					color: daff-color($primary, 30);
+				}
+			}
 
 			&.daff-success {
-				background: daff-color($success, 90);
-				border: 1px solid daff-color($success, 80);
-				color: daff-text-contrast(daff-color($success, 90));
+				background: daff-color($success, 100);
+				border: 1px solid daff-color($success, 90);
+				color: $base-contrast;
 
 				.daff-prefix {
 					color: daff-color($success, 30);
@@ -68,9 +84,9 @@
 			}
 
 			&.daff-warn {
-				background: daff-color($warn, 90);
-				border: 1px solid daff-color($warn, 80);
-				color: daff-text-contrast(daff-color($warn, 90));
+				background: daff-color($warn, 100);
+				border: 1px solid daff-color($warn, 90);
+				color: $base-contrast;
 
 				.daff-prefix {
 					color: daff-color($warn, 30);
@@ -78,9 +94,9 @@
 			}
 
 			&.daff-critical {
-				background: daff-color($critical, 90);
-				border: 1px solid daff-color($critical, 80);
-				color: daff-text-contrast(daff-color($critical, 90));
+				background: daff-color($critical, 100);
+				border: 1px solid daff-color($critical, 90);
+				color: $base-contrast;
 
 				.daff-prefix {
 					color: daff-color($critical, 30);

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.86.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^19.0.0","@angular/common":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/cdk":"^19.0.0","@daffodil/core":"0.86.0","@fortawesome/angular-fontawesome":"^1.0.0","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^3.0.1","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^9.8.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./breadcrumb":{"types":"./breadcrumb/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./button/index.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./input":{"types":"./input/index.d.ts","default":"./fesm2022/daffodil-design-input.mjs"},"./link-set":{"types":"./link-set/index.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./quantity-field":{"types":"./quantity-field/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./switch":{"types":"./switch/index.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./tabs/index.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./text-snippet":{"types":"./text-snippet/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./toast":{"types":"./toast/index.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./youtube-player/index.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./breadcrumb/examples":{"types":"./breadcrumb/examples/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./switch/examples":{"types":"./switch/examples/index.d.ts","default":"./fesm2022/daffodil-design-switch-examples.mjs"},"./tabs/examples":{"types":"./tabs/examples/index.d.ts","default":"./fesm2022/daffodil-design-tabs-examples.mjs"},"./text-snippet/examples":{"types":"./text-snippet/examples/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}
+{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.87.1","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^19.0.0","@angular/common":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/cdk":"^19.0.0","@daffodil/core":"0.87.1","@fortawesome/angular-fontawesome":"^1.0.0","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^3.0.1","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^9.8.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./breadcrumb":{"types":"./breadcrumb/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./button/index.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./input":{"types":"./input/index.d.ts","default":"./fesm2022/daffodil-design-input.mjs"},"./link-set":{"types":"./link-set/index.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./quantity-field":{"types":"./quantity-field/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./select":{"types":"./select/index.d.ts","default":"./fesm2022/daffodil-design-select.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./switch":{"types":"./switch/index.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./tabs/index.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./text-snippet":{"types":"./text-snippet/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./textarea":{"types":"./textarea/index.d.ts","default":"./fesm2022/daffodil-design-textarea.mjs"},"./toast":{"types":"./toast/index.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./youtube-player/index.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./breadcrumb/examples":{"types":"./breadcrumb/examples/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./form-field/examples":{"types":"./form-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-form-field-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./select/examples":{"types":"./select/examples/index.d.ts","default":"./fesm2022/daffodil-design-select-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./switch/examples":{"types":"./switch/examples/index.d.ts","default":"./fesm2022/daffodil-design-switch-examples.mjs"},"./tabs/examples":{"types":"./tabs/examples/index.d.ts","default":"./fesm2022/daffodil-design-tabs-examples.mjs"},"./text-snippet/examples":{"types":"./text-snippet/examples/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet-examples.mjs"},"./textarea/examples":{"types":"./textarea/examples/index.d.ts","default":"./fesm2022/daffodil-design-textarea-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}

package/scss/theme.scss

@@ -44,6 +44,7 @@
 @use '../navbar/src/navbar-theme' as navbar;
 @use '../notification/src/notification-theme' as notification;
 @use '../paginator/src/paginator-theme' as paginator;
+@use '../select/src/select-theme' as select;
 @use '../sidebar/src/sidebar-theme' as sidebar;
 @use '../switch/src/switch-theme' as switch;
 @use '../progress-bar/src/progress-bar-theme' as progress-bar;
@@ -88,7 +89,14 @@
 	@include error-message.daff-error-message-theme($theme);
 	@include hint.daff-hint-theme($theme);
 	@include native-select.daff-native-select-theme($theme);
+	@include select.daff-select-theme($theme);
 
+	@include loading-icon.daff-loading-icon-theme($theme);
+	@include progress-bar.daff-progress-bar-theme($theme);
+
+	@include accordion.daff-accordion-theme($theme);
+	@include article.daff-article-theme($theme);
+	@include callout.daff-callout-theme($theme);
 	@include hero.daff-hero-theme($theme);
 	@include list.daff-list-theme($theme);
 	@include loading-icon.daff-loading-icon-theme($theme);

package/scss/theming/illuminate/illuminate.scss

@@ -4,6 +4,8 @@
 @use 'sass:meta';
 @use '../contrast/luminance/luminance';
 
+// @deprecated Deprecated in version 0.87.0. Will be removed in version 0.90.0.
+//
 // @docs
 // Take a numeric map and sort it.
 //

package/select/README.md

@@ -0,0 +1,8 @@
+# Select
+
+## Usage
+The consuming component should pass a list of option values and a form control into `daff-select` as props. The consumer is fully in charge of rendering the options and selected option. This is accomplished by passing templates into two content projection slots.
+
+## Slots
+### `daffSelectOption`
+`daffSelectOption` provides the template for the list of options inside the select dropdown. Two values are bound to this slot context: `option` and `isSelected`. See `DaffSelectOptionDirectiveContext` for more info.

package/select/animation/select-animation-state.d.ts

@@ -0,0 +1,7 @@
+import { DaffSelectAnimationState } from './state.enum';
+/**
+ * Turns a boolean into a string of 'open' or 'close'.
+ *
+ * @param open A boolean representing the open status of an select.
+ */
+export declare const getAnimationState: (open: boolean) => DaffSelectAnimationState;

package/select/animation/select-animation.d.ts

@@ -0,0 +1,4 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+export declare const daffSelectAnimations: {
+    readonly openSelect: AnimationTriggerMetadata;
+};

package/select/animation/state.enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum DaffSelectAnimationState {
+    OPEN = "open",
+    CLOSED = "closed"
+}

package/select/examples/default-select/default-select.component.d.ts

@@ -0,0 +1,8 @@
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class DefaultSelectComponent {
+    control: FormControl<any>;
+    options: import("../models/address.type").SelectExampleAddress[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<DefaultSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DefaultSelectComponent, "default-select", never, {}, {}, never, never, true, never>;
+}

package/select/examples/disabled-select/disabled-select.component.d.ts

@@ -0,0 +1,8 @@
+import { UntypedFormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class DisabledSelectComponent {
+    disabled: UntypedFormControl;
+    options: import("../models/address.type").SelectExampleAddress[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisabledSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisabledSelectComponent, "disabled-select", never, {}, {}, never, never, true, never>;
+}

package/select/examples/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/select/examples/models/address.type.d.ts

@@ -0,0 +1,7 @@
+export interface SelectExampleAddress {
+    name: string;
+    street: string;
+    city: string;
+    state: string;
+    postcode: string;
+}

package/select/examples/models/addresses.d.ts

@@ -0,0 +1,2 @@
+import { SelectExampleAddress } from './address.type';
+export declare const SELECT_EXAMPLE_ADDRESSES: SelectExampleAddress[];

package/select/examples/public_api.d.ts

@@ -0,0 +1,3 @@
+import { DefaultSelectComponent } from './default-select/default-select.component';
+import { DisabledSelectComponent } from './disabled-select/disabled-select.component';
+export declare const SELECT_EXAMPLES: (typeof DefaultSelectComponent | typeof DisabledSelectComponent)[];

package/select/examples/select-with-error/select-with-error.component.d.ts

@@ -0,0 +1,8 @@
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class SelectWithErrorComponent {
+    control: FormControl<string>;
+    options: import("../models/address.type").SelectExampleAddress[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectWithErrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectWithErrorComponent, "select-with-error", never, {}, {}, never, never, true, never>;
+}

package/select/examples/skeleton-select/skeleton-select.component.d.ts

@@ -0,0 +1,8 @@
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class SkeletonSelectComponent {
+    control: FormControl<any>;
+    options: import("../models/address.type").SelectExampleAddress[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonSelectComponent, "skeleton-select", never, {}, {}, never, never, true, never>;
+}

package/select/index.d.ts

@@ -0,0 +1 @@
+export * from './public_api';

package/select/option/context.type.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The slot context for {@link DaffSelectOptionDirective}.
+ */
+export interface DaffSelectOptionDirectiveContext<T = unknown> {
+    /**
+     * The option for this element in the list.
+     */
+    option: T;
+    /**
+     * Whether this option is the currently selected one.
+     */
+    isSelected: boolean;
+    /**
+     * Whether this option is the currently highlighted one in the options list.
+     */
+    isHighlighted?: boolean;
+}

package/select/option/option.directive.d.ts

@@ -0,0 +1,11 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * The directive provides the template for a list of options inside the select dropdown.
+ */
+export declare class DaffSelectOptionDirective {
+    templateRef?: TemplateRef<unknown>;
+    constructor(templateRef?: TemplateRef<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSelectOptionDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSelectOptionDirective, "[daffSelectOption]", never, {}, {}, never, never, true, never>;
+}

package/select/public_api.d.ts

@@ -0,0 +1,4 @@
+export { DaffSelectComponent } from './select/select.component';
+export { DaffSelectOptionDirective } from './option/option.directive';
+export { DaffSelectOptionDirectiveContext } from './option/context.type';
+export { DAFF_SELECT_COMPONENTS } from './select';