@daffodil/design 0.69.0 → 0.71.0

package/list/README.md

@@ -1,69 +1,29 @@
-# List Component
-
-The `<daff-list>` component can be used to display a series of line items.
+# List
+List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.
 
 ## Basic List
+A `<daff-list>` consists of multiple `<daff-list-item>`s.
 
-- Consists of multiple `<daff-list-item>`s
-
-### Usage
-
-```
-<daff-list>
-  <h3 daffListSubheader>Lorem Ipsum</h3>
-  <daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
-  <daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
-  <daff-list-item>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</daff-list-item>
-</daff-list>
-```
-
-## Link List (Deprecated)
-
-- `type="link"` is used for navigation lists
+<design-land-example-viewer-container example="basic-list"></design-land-example-viewer-container>
 
-### Usage
+## Nvigation List
+Use `<daff-nav-list>` for navigation lists. `<daff-list-item>` should be directly added to an anchor tag.
 
-```
-<daff-list type="link">
-  <h3 daffListSubheader>List Subheader</h3>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-  <daff-list-item><a href="#">List Item</a></daff-list-item>
-</daff-list>
-```
+<design-land-example-viewer-container example="nav-list"></design-land-example-viewer-container>
 
-## Multi-line List (Deprecated)
+## Multi-line List
+For lists that have multiple lines per item, wrap each line appropriately with a heading or paragraph tag.
 
-- `type="multi-line"` allows you to have multiple lines per `daff-list-item`.
+<design-land-example-viewer-container example="multiline-list"></design-land-example-viewer-container>
 
-### Usage
+## List with Icons
+To add an icon to a list item, use the `daffPrefix` or `daffSuffix` attributes for the appropriate placements.
 
-```
-<daff-list type="multi-line">
-  <daff-list-item>
-    <h4>Lorem ipsum</h4>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
-  </daff-list-item>
-  <daff-list-item>
-    <h4>Lorem ipsum</h4>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
-  </daff-list-item>
-  <daff-list-item>
-    <h4>Lorem ipsum</h4>
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula lacinia tellus quis bibendum.</p>
-  </daff-list-item>
-</daff-list>
-```
+<design-land-example-viewer-container example="icon-list"></design-land-example-viewer-container>
 
-### Usage
+## Deprecation Notice
+The `mode` property will be deprecated in v1.0.0.
 
-```
-<daff-list>
-  <daff-list-item>
-    <i class="fab fa-twitter" daffListItemIcon></i>
-    <h4>Lorem ipsum</h4>
-  </daff-list-item>
-</daff-list>
-```
+- `mode="navigation"` is replaced with `<daff-nav-list>`.
+- `mode="link"` is replaced with `<daff-nav-list>`.
+- `mode="multiline"` is completely deprecated. Multi-line lists will be a natural result of adding multiple lines to a `<daff-list-item>`.

package/loading-icon/README.md

@@ -1,7 +1,20 @@
-# Loading Icon Component
+# Loading Icon
+Loading icons are used as an indicator of an event in progress.
 
-## Usage 
+## Overview
+Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](../progress-bar/README.md) component instead.
 
-```
-<daff-loading-icon></daff-loading-icon>
-```
+## Diameter
+The diameter of a loading icon can be defined by using the `diameter` property. By default, the diameter is set to `60`.
+
+<design-land-example-viewer-container example="loading-icon-diameter"></design-land-example-viewer-container>
+
+## Theming
+The loading icon color is defined by using the `color` property. By default, the color is set to `primary`. This can be changed to one of the supported colors.
+
+Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
+
+<design-land-example-viewer-container example="loading-icon-color"></design-land-example-viewer-container>
+
+## Accessibility
+Loading icons should be given meaningful labels by using `aria-label` or `aria-labelledby`. Additionally, if a loading icon is used to indicate a process in progress, using [aria-live](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-live) and [aria-busy](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-busy") should be strongly considered.

package/loading-icon/examples/loading-icon-color/loading-icon-color.component.d.ts

@@ -1,7 +1,11 @@
-import { UntypedFormGroup } from '@angular/forms';
+import { UntypedFormControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class LoadingIconColorComponent {
-    colorGroup: UntypedFormGroup;
+    colorControl: UntypedFormControl;
+    options: {
+        value: string;
+        label: string;
+    }[];
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIconColorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LoadingIconColorComponent, "loading-icon-color", never, {}, {}, never, never, false, never>;
 }

package/loading-icon/examples/loading-icon-color/loading-icon-color.module.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./loading-icon-color.component";
-import * as i2 from "@daffodil/design/loading-icon";
-import * as i3 from "@daffodil/design";
+import * as i2 from "@angular/common";
+import * as i3 from "@daffodil/design/loading-icon";
 import * as i4 from "@angular/forms";
 export declare class LoadingIconColorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIconColorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<LoadingIconColorModule, [typeof i1.LoadingIconColorComponent], [typeof i2.DaffLoadingIconModule, typeof i3.DaffRadioModule, typeof i4.ReactiveFormsModule], [typeof i1.LoadingIconColorComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<LoadingIconColorModule, [typeof i1.LoadingIconColorComponent], [typeof i2.CommonModule, typeof i3.DaffLoadingIconModule, typeof i4.ReactiveFormsModule], [typeof i1.LoadingIconColorComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<LoadingIconColorModule>;
 }

package/modal/examples/basic-modal/basic-modal.component.d.ts

@@ -1,8 +1,8 @@
-import { DaffModalService } from '@daffodil/design/modal';
+import { DaffModalComponent, DaffModalService } from '@daffodil/design/modal';
 import * as i0 from "@angular/core";
 export declare class BasicModalComponent {
     private modalService;
-    modal: any;
+    modal: DaffModalComponent;
     constructor(modalService: DaffModalService);
     showModal(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BasicModalComponent, never>;

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

@@ -2,8 +2,10 @@ 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 { DaffModalService } from '../service/modal.service';
 import * as i0 from "@angular/core";
 export declare class DaffModalComponent implements AfterContentInit, AfterViewInit {
+    private modalService;
     private _focusTrapFactory;
     private _elementRef;
     /**
@@ -27,11 +29,11 @@ export declare class DaffModalComponent implements AfterContentInit, AfterViewIn
      */
     closedAnimationCompleted: EventEmitter<any>;
     /**
-     * Event fired when the backdrop is clicked. This is often used to close the modal.
+     * @docs-private
      */
-    hide: EventEmitter<void>;
+    onEscape(): void;
     private _focusTrap;
-    constructor(_focusTrapFactory: ConfigurableFocusTrapFactory, _elementRef: ElementRef<HTMLElement>);
+    constructor(modalService: DaffModalService, _focusTrapFactory: ConfigurableFocusTrapFactory, _elementRef: ElementRef<HTMLElement>);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     /**

package/modal/service/modal.service.d.ts

@@ -1,7 +1,7 @@
 import { Overlay } from '@angular/cdk/overlay';
 import { Type } from '@angular/core';
-import { DaffModal } from '../modal/modal';
 import { DaffModalConfiguration } from '../modal/modal-config';
+import { DaffModalComponent } from '../modal/modal.component';
 import * as i0 from "@angular/core";
 export declare class DaffModalService {
     private overlay;
@@ -12,8 +12,8 @@ export declare class DaffModalService {
     private _attachModalContent;
     private _createOverlayRef;
     private _removeModal;
-    open(component: Type<any>, configuration?: Partial<DaffModalConfiguration>): DaffModal;
-    close(modal: DaffModal): void;
+    open(component: Type<any>, configuration?: Partial<DaffModalConfiguration>): DaffModalComponent;
+    close(component: DaffModalComponent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DaffModalService>;
 }

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.69.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":"^17.0.0","@angular/common":"^17.0.0","@angular/core":"^17.0.0","@angular/forms":"^17.0.0","@angular/cdk":"^17.0.0","@daffodil/core":"0.69.0","@fortawesome/angular-fontawesome":"^0.14.1","@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":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.0"},"exports":{"./scss/daff-global":{"sass":"./scss/daff-global.scss"},"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/daff-util":{"sass":"./scss/daff-util.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/daff-typography":{"sass":"./scss/daff-typography.scss"},"./scss/typography/classes":{"sass":"./scss/typography/_classes.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/daffodil-design.mjs","esm":"./esm2022/daffodil-design.mjs","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","esm2022":"./esm2022/accordion/daffodil-design-accordion.mjs","esm":"./esm2022/accordion/daffodil-design-accordion.mjs","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","esm2022":"./esm2022/article/daffodil-design-article.mjs","esm":"./esm2022/article/daffodil-design-article.mjs","default":"./fesm2022/daffodil-design-article.mjs"},"./button":{"types":"./button/index.d.ts","esm2022":"./esm2022/button/daffodil-design-button.mjs","esm":"./esm2022/button/daffodil-design-button.mjs","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","esm2022":"./esm2022/callout/daffodil-design-callout.mjs","esm":"./esm2022/callout/daffodil-design-callout.mjs","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","esm2022":"./esm2022/card/daffodil-design-card.mjs","esm":"./esm2022/card/daffodil-design-card.mjs","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","esm2022":"./esm2022/container/daffodil-design-container.mjs","esm":"./esm2022/container/daffodil-design-container.mjs","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","esm2022":"./esm2022/hero/daffodil-design-hero.mjs","esm":"./esm2022/hero/daffodil-design-hero.mjs","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","esm2022":"./esm2022/image/daffodil-design-image.mjs","esm":"./esm2022/image/daffodil-design-image.mjs","default":"./fesm2022/daffodil-design-image.mjs"},"./link-set":{"types":"./link-set/index.d.ts","esm2022":"./esm2022/link-set/daffodil-design-link-set.mjs","esm":"./esm2022/link-set/daffodil-design-link-set.mjs","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","esm2022":"./esm2022/list/daffodil-design-list.mjs","esm":"./esm2022/list/daffodil-design-list.mjs","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","esm2022":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","esm":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","esm2022":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","esm":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","esm2022":"./esm2022/menu/daffodil-design-menu.mjs","esm":"./esm2022/menu/daffodil-design-menu.mjs","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","esm2022":"./esm2022/modal/daffodil-design-modal.mjs","esm":"./esm2022/modal/daffodil-design-modal.mjs","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","esm2022":"./esm2022/navbar/daffodil-design-navbar.mjs","esm":"./esm2022/navbar/daffodil-design-navbar.mjs","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","esm2022":"./esm2022/notification/daffodil-design-notification.mjs","esm":"./esm2022/notification/daffodil-design-notification.mjs","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","esm2022":"./esm2022/paginator/daffodil-design-paginator.mjs","esm":"./esm2022/paginator/daffodil-design-paginator.mjs","default":"./fesm2022/daffodil-design-paginator.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","esm2022":"./esm2022/sidebar/daffodil-design-sidebar.mjs","esm":"./esm2022/sidebar/daffodil-design-sidebar.mjs","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./toast":{"types":"./toast/index.d.ts","esm2022":"./esm2022/toast/daffodil-design-toast.mjs","esm":"./esm2022/toast/daffodil-design-toast.mjs","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","esm2022":"./esm2022/tree/daffodil-design-tree.mjs","esm":"./esm2022/tree/daffodil-design-tree.mjs","default":"./fesm2022/daffodil-design-tree.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","esm2022":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","esm":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","esm2022":"./esm2022/article/examples/daffodil-design-article-examples.mjs","esm":"./esm2022/article/examples/daffodil-design-article-examples.mjs","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","esm2022":"./esm2022/button/examples/daffodil-design-button-examples.mjs","esm":"./esm2022/button/examples/daffodil-design-button-examples.mjs","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","esm2022":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","esm":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","esm2022":"./esm2022/card/examples/daffodil-design-card-examples.mjs","esm":"./esm2022/card/examples/daffodil-design-card-examples.mjs","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","esm2022":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","esm":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","esm2022":"./esm2022/container/examples/daffodil-design-container-examples.mjs","esm":"./esm2022/container/examples/daffodil-design-container-examples.mjs","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","esm2022":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","esm":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","esm2022":"./esm2022/image/examples/daffodil-design-image-examples.mjs","esm":"./esm2022/image/examples/daffodil-design-image-examples.mjs","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","esm2022":"./esm2022/input/examples/daffodil-design-input-examples.mjs","esm":"./esm2022/input/examples/daffodil-design-input-examples.mjs","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","esm2022":"./esm2022/list/examples/daffodil-design-list-examples.mjs","esm":"./esm2022/list/examples/daffodil-design-list-examples.mjs","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","esm2022":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","esm":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","esm2022":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","esm":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","esm2022":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","esm":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","esm2022":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","esm":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","esm2022":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","esm":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","esm2022":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","esm":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","esm2022":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","esm":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","esm2022":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","esm":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","esm2022":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","esm":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","esm2022":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","esm":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","esm2022":"./esm2022/toast/examples/daffodil-design-toast-examples.mjs","esm":"./esm2022/toast/examples/daffodil-design-toast-examples.mjs","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","esm2022":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","esm":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","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.71.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":"^17.0.0","@angular/common":"^17.0.0","@angular/core":"^17.0.0","@angular/forms":"^17.0.0","@angular/cdk":"^17.0.0","@daffodil/core":"0.71.0","@fortawesome/angular-fontawesome":"^0.14.1","@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":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.0"},"exports":{"./scss/daff-global":{"sass":"./scss/daff-global.scss"},"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/daff-util":{"sass":"./scss/daff-util.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/daff-typography":{"sass":"./scss/daff-typography.scss"},"./scss/typography/classes":{"sass":"./scss/typography/_classes.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/daffodil-design.mjs","esm":"./esm2022/daffodil-design.mjs","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","esm2022":"./esm2022/accordion/daffodil-design-accordion.mjs","esm":"./esm2022/accordion/daffodil-design-accordion.mjs","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","esm2022":"./esm2022/article/daffodil-design-article.mjs","esm":"./esm2022/article/daffodil-design-article.mjs","default":"./fesm2022/daffodil-design-article.mjs"},"./button":{"types":"./button/index.d.ts","esm2022":"./esm2022/button/daffodil-design-button.mjs","esm":"./esm2022/button/daffodil-design-button.mjs","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","esm2022":"./esm2022/callout/daffodil-design-callout.mjs","esm":"./esm2022/callout/daffodil-design-callout.mjs","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","esm2022":"./esm2022/card/daffodil-design-card.mjs","esm":"./esm2022/card/daffodil-design-card.mjs","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","esm2022":"./esm2022/container/daffodil-design-container.mjs","esm":"./esm2022/container/daffodil-design-container.mjs","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","esm2022":"./esm2022/hero/daffodil-design-hero.mjs","esm":"./esm2022/hero/daffodil-design-hero.mjs","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","esm2022":"./esm2022/image/daffodil-design-image.mjs","esm":"./esm2022/image/daffodil-design-image.mjs","default":"./fesm2022/daffodil-design-image.mjs"},"./link-set":{"types":"./link-set/index.d.ts","esm2022":"./esm2022/link-set/daffodil-design-link-set.mjs","esm":"./esm2022/link-set/daffodil-design-link-set.mjs","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","esm2022":"./esm2022/list/daffodil-design-list.mjs","esm":"./esm2022/list/daffodil-design-list.mjs","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","esm2022":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","esm":"./esm2022/loading-icon/daffodil-design-loading-icon.mjs","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","esm2022":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","esm":"./esm2022/media-gallery/daffodil-design-media-gallery.mjs","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","esm2022":"./esm2022/menu/daffodil-design-menu.mjs","esm":"./esm2022/menu/daffodil-design-menu.mjs","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","esm2022":"./esm2022/modal/daffodil-design-modal.mjs","esm":"./esm2022/modal/daffodil-design-modal.mjs","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","esm2022":"./esm2022/navbar/daffodil-design-navbar.mjs","esm":"./esm2022/navbar/daffodil-design-navbar.mjs","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","esm2022":"./esm2022/notification/daffodil-design-notification.mjs","esm":"./esm2022/notification/daffodil-design-notification.mjs","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","esm2022":"./esm2022/paginator/daffodil-design-paginator.mjs","esm":"./esm2022/paginator/daffodil-design-paginator.mjs","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","esm2022":"./esm2022/progress-bar/daffodil-design-progress-bar.mjs","esm":"./esm2022/progress-bar/daffodil-design-progress-bar.mjs","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","esm2022":"./esm2022/sidebar/daffodil-design-sidebar.mjs","esm":"./esm2022/sidebar/daffodil-design-sidebar.mjs","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./toast":{"types":"./toast/index.d.ts","esm2022":"./esm2022/toast/daffodil-design-toast.mjs","esm":"./esm2022/toast/daffodil-design-toast.mjs","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","esm2022":"./esm2022/tree/daffodil-design-tree.mjs","esm":"./esm2022/tree/daffodil-design-tree.mjs","default":"./fesm2022/daffodil-design-tree.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","esm2022":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","esm":"./esm2022/accordion/examples/daffodil-design-accordion-examples.mjs","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","esm2022":"./esm2022/article/examples/daffodil-design-article-examples.mjs","esm":"./esm2022/article/examples/daffodil-design-article-examples.mjs","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","esm2022":"./esm2022/button/examples/daffodil-design-button-examples.mjs","esm":"./esm2022/button/examples/daffodil-design-button-examples.mjs","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","esm2022":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","esm":"./esm2022/callout/examples/daffodil-design-callout-examples.mjs","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","esm2022":"./esm2022/card/examples/daffodil-design-card-examples.mjs","esm":"./esm2022/card/examples/daffodil-design-card-examples.mjs","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","esm2022":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","esm":"./esm2022/checkbox/examples/daffodil-design-checkbox-examples.mjs","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","esm2022":"./esm2022/container/examples/daffodil-design-container-examples.mjs","esm":"./esm2022/container/examples/daffodil-design-container-examples.mjs","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","esm2022":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","esm":"./esm2022/hero/examples/daffodil-design-hero-examples.mjs","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","esm2022":"./esm2022/image/examples/daffodil-design-image-examples.mjs","esm":"./esm2022/image/examples/daffodil-design-image-examples.mjs","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","esm2022":"./esm2022/input/examples/daffodil-design-input-examples.mjs","esm":"./esm2022/input/examples/daffodil-design-input-examples.mjs","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","esm2022":"./esm2022/list/examples/daffodil-design-list-examples.mjs","esm":"./esm2022/list/examples/daffodil-design-list-examples.mjs","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","esm2022":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","esm":"./esm2022/loading-icon/examples/daffodil-design-loading-icon-examples.mjs","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","esm2022":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","esm":"./esm2022/media-gallery/examples/daffodil-design-media-gallery-examples.mjs","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","esm2022":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","esm":"./esm2022/menu/examples/daffodil-design-menu-examples.mjs","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","esm2022":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","esm":"./esm2022/modal/examples/daffodil-design-modal-examples.mjs","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","esm2022":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","esm":"./esm2022/navbar/examples/daffodil-design-navbar-examples.mjs","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","esm2022":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","esm":"./esm2022/notification/examples/daffodil-design-notification-examples.mjs","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","esm2022":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","esm":"./esm2022/paginator/examples/daffodil-design-paginator-examples.mjs","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","esm2022":"./esm2022/progress-bar/examples/daffodil-design-progress-bar-examples.mjs","esm":"./esm2022/progress-bar/examples/daffodil-design-progress-bar-examples.mjs","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","esm2022":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","esm":"./esm2022/quantity-field/examples/daffodil-design-quantity-field-examples.mjs","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","esm2022":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","esm":"./esm2022/radio/examples/daffodil-design-radio-examples.mjs","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","esm2022":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","esm":"./esm2022/sidebar/examples/daffodil-design-sidebar-examples.mjs","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","esm2022":"./esm2022/toast/examples/daffodil-design-toast-examples.mjs","esm":"./esm2022/toast/examples/daffodil-design-toast-examples.mjs","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","esm2022":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","esm":"./esm2022/tree/examples/daffodil-design-tree-examples.mjs","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}

package/progress-bar/README.md

@@ -0,0 +1,27 @@
+# Progress Bar
+A progress bar provides visual feedback about the duration or progress of a task or operation.
+
+## Types
+There are two types of progress bars: `determinate` and `indeterminate`. They are `determinate` by default.
+
+### Determinate
+Determinate progress bars should be used when the percentage of a task or operation is known.
+
+<design-land-example-viewer-container example="progress-bar-default"></design-land-example-viewer-container>
+
+### Indeterminate
+Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.
+
+<design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
+
+## Theming
+The progress bar color is defined by using the `color` property. By default, the color is set to `primary`. This can be changed to one of the supported colors.
+
+Supported colors: `primary | secondary | tertiary | theme | theme-contrast | white | black`
+
+> `theme`, `theme-contrast`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
+
+<design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
+
+## Accessibility
+The progress bar component works with the ARIA `role="progressbar"` to provide an accessible experience. A Label should always be provided by using `label[daffFormLabel]`, `aria-label`, or `aria-labelledby`.

package/progress-bar/animation/progress-bar-animation.d.ts

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

package/progress-bar/examples/index.d.ts

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

package/progress-bar/examples/progress-bar-default/progress-bar-default.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ProgressBarDefaultComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarDefaultComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarDefaultComponent, "progress-bar-default", never, {}, {}, never, never, false, never>;
+}

package/progress-bar/examples/progress-bar-default/progress-bar-default.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./progress-bar-default.component";
+import * as i2 from "@daffodil/design/progress-bar";
+export declare class ProgressBarDefaultComponentModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarDefaultComponentModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarDefaultComponentModule, [typeof i1.ProgressBarDefaultComponent], [typeof i2.DaffProgressBarModule], [typeof i1.ProgressBarDefaultComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarDefaultComponentModule>;
+}

package/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ProgressBarIndeterminateComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarIndeterminateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarIndeterminateComponent, "progress-bar-indeterminate", never, {}, {}, never, never, false, never>;
+}

package/progress-bar/examples/progress-bar-indeterminate/progress-bar-indeterminate.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./progress-bar-indeterminate.component";
+import * as i2 from "@daffodil/design/progress-bar";
+export declare class ProgressBarIndeterminateComponentModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarIndeterminateComponentModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarIndeterminateComponentModule, [typeof i1.ProgressBarIndeterminateComponent], [typeof i2.DaffProgressBarModule], [typeof i1.ProgressBarIndeterminateComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarIndeterminateComponentModule>;
+}

package/progress-bar/examples/progress-bar-themes/progress-bar-themes.component.d.ts

@@ -0,0 +1,9 @@
+import { FormControl } from '@angular/forms';
+import { DaffPalette } from '@daffodil/design';
+import * as i0 from "@angular/core";
+export declare class ProgressBarThemesComponent {
+    color: DaffPalette;
+    colorControl: FormControl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarThemesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarThemesComponent, "progress-bar-themes", never, {}, {}, never, never, false, never>;
+}

package/progress-bar/examples/progress-bar-themes/progress-bar-themes.module.d.ts

@@ -0,0 +1,9 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./progress-bar-themes.component";
+import * as i2 from "@daffodil/design/progress-bar";
+import * as i3 from "@angular/forms";
+export declare class ProgressBarThemesComponentModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarThemesComponentModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ProgressBarThemesComponentModule, [typeof i1.ProgressBarThemesComponent], [typeof i2.DaffProgressBarModule, typeof i3.ReactiveFormsModule], [typeof i1.ProgressBarThemesComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ProgressBarThemesComponentModule>;
+}

package/progress-bar/examples/public_api.d.ts

@@ -0,0 +1,2 @@
+import { ComponentExample } from '@daffodil/design';
+export declare const PROGRESS_BAR_EXAMPLES: ComponentExample[];

package/progress-bar/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@daffodil/design/progress-bar" />
+export * from './public_api';

package/progress-bar/progress-bar.component.d.ts

@@ -0,0 +1,76 @@
+import { AnimationEvent } from '@angular/animations';
+import { ElementRef, EventEmitter, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { DaffColorable } from '@daffodil/design';
+import * as i0 from "@angular/core";
+/**
+ * An _elementRef and an instance of renderer2 are needed for the Colorable mixin
+ */
+declare class DaffProgressBarBase {
+    _elementRef: ElementRef;
+    _renderer: Renderer2;
+    constructor(_elementRef: ElementRef, _renderer: Renderer2);
+}
+declare const _daffProgressBarBase: (new (...args: any[]) => {
+    _color: import("@daffodil/design").DaffPalette;
+    color: import("@daffodil/design").DaffPalette;
+    _elementRef: ElementRef<any>;
+    _renderer: Renderer2;
+}) & typeof DaffProgressBarBase;
+export declare const clamp: (number: number, min: number, max: number) => number;
+/**
+ * @inheritdoc
+ */
+export declare class DaffProgressBarComponent extends _daffProgressBarBase implements DaffColorable {
+    private _changeDetectorRef;
+    private elementRef;
+    private renderer;
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * @docs-private
+     */
+    get indeterminateClass(): boolean;
+    get role(): string;
+    get ariaLabel(): string;
+    ariaValueMin: string;
+    ariaValueMax: string;
+    get ariaValueNow(): number;
+    constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer2);
+    private _percentage;
+    private _indeterminate;
+    /**
+     * Sets the percentage completion of the progression,
+     * expressed as a whole number between 0 and 100.
+     *
+     */
+    get percentage(): number;
+    set percentage(val: number);
+    /**
+     * Property to set the animation of a progress bar to
+     * run for an indefinite amount of time.
+     *
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
+     **/
+    get indeterminate(): any;
+    set indeterminate(value: any);
+    /**
+     * An event that emits each time the progression reaches 100%
+     * and the animation is finished
+     */
+    finished: EventEmitter<void>;
+    /**
+     * Calculates when the progress animation is fully completed
+     *
+     * @param event: AnimationEvent
+     */
+    onAnimationComplete(event: AnimationEvent): void;
+    /**
+     * @docs-private
+     */
+    get fillState(): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffProgressBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffProgressBarComponent, "daff-progress-bar", never, { "color": { "alias": "color"; "required": false; }; "percentage": { "alias": "percentage"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "finished": "finished"; }, never, ["label[daffProgressBarLabel]"], false, never>;
+}
+export {};

package/progress-bar/progress-bar.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./progress-bar.component";
+import * as i2 from "@angular/common";
+export declare class DaffProgressBarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffProgressBarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffProgressBarModule, [typeof i1.DaffProgressBarComponent], [typeof i2.CommonModule], [typeof i1.DaffProgressBarComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffProgressBarModule>;
+}

package/progress-bar/public_api.d.ts

@@ -0,0 +1,2 @@
+export { DaffProgressBarModule } from './progress-bar.module';
+export * from './progress-bar.component';

package/progress-bar/src/progress-bar-theme.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-progress-bar-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+
+	.daff-progress-bar {
+		$root: '.daff-progress-bar';
+
+		#{$root}__label {
+			color: theming.daff-illuminate($base-contrast, $neutral, 2);
+		}
+
+		#{$root}__track {
+			background: theming.daff-illuminate($base, $neutral, 2);
+		}
+
+		&.daff-primary {
+			#{$root}__fill {
+				background: theming.daff-illuminate($base, $primary, 6);
+			}
+		}
+
+		&.daff-secondary {
+			#{$root}__fill {
+				background: theming.daff-illuminate($base, $secondary, 6);
+			}
+		}
+
+		&.daff-tertiary {
+			#{$root}__fill {
+				background: theming.daff-illuminate($base, $tertiary, 6);
+			}
+		}
+
+		&.daff-theme {
+			#{$root}__fill {
+				background: $base;
+			}
+		}
+
+		&.daff-theme-contrast {
+			#{$root}__fill {
+				background: $base-contrast;
+			}
+		}
+		
+		&.daff-white {
+			#{$root}__fill {
+				background: $white;
+			}
+		}
+
+		&.daff-black {
+			#{$root}__fill {
+				background: $black;
+			}
+		}
+	}
+}

package/scss/theme.scss

@@ -38,6 +38,7 @@
 @use '../notification/src/notification-theme' as notification;
 @use '../paginator/src/paginator-theme' as paginator;
 @use '../sidebar/src/sidebar-theme' as sidebar;
+@use '../progress-bar/src/progress-bar-theme' as progress-bar;
 @use '../scss/state/skeleton/mixins' as skeleton;
 @use '../tree/src/tree-theme' as tree;
 @use '../toast/src/toast-theme' as toast;
@@ -66,6 +67,7 @@
 	@include native-select.daff-native-select-theme($theme);
 	@include loading-icon.daff-loading-icon-theme($theme);
 	@include progress-indicator.daff-progress-indicator-theme($theme);
+	@include progress-bar.daff-progress-bar-theme($theme);
 
 	// Molecules
 	@include accordion.daff-accordion-theme($theme);