@daffodil/design 0.81.1 → 0.83.0

package/media-gallery/src/media-gallery-theme.scss

@@ -4,18 +4,36 @@
 
 @mixin daff-media-gallery-theme($theme) {
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-media-gallery {
 		$root: &;
 
-		.daff-thumbnail {
-			border: 1px solid transparent;
+		@include theming.light($type) {
+			.daff-thumbnail {
+				background: theming.daff-color($neutral, 20);
+
+				&.daff-selected {
+					border: 1px solid theming.daff-color($neutral);
+				}
+			}
+		}
+
+		@include theming.dark($type) {
+			.daff-thumbnail {
+				background: theming.daff-color($neutral, 70);
 
-			&.daff-selected {
-				border: 1px solid theming.daff-color($neutral);
+				&.daff-selected {
+					border: 1px solid theming.daff-color($neutral, 30);
+				}
 			}
 		}
 
+		.daff-thumbnail {
+			border: 1px solid transparent;
+		}
+
 		&.daff-skeleton {
 			.daff-thumbnail {
 				&.daff-selected {
@@ -23,5 +41,13 @@
 				}
 			}
 		}
+
+		&__video-button {
+			border: solid thin $white;
+
+			&::after {
+				background-color: $white;
+			}
+		}
 	}
 }

package/media-gallery/thumbnail/thumbnail.directive.d.ts

@@ -1,35 +1,58 @@
-import { Type, OnInit, OnDestroy } from '@angular/core';
-import { DaffSelectableDirective } from '@daffodil/design';
-import { DaffThumbnailRegistration } from './thumbnail-registration.interface';
+import { TemplateRef, OnInit } from '@angular/core';
 import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
-import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 import * as i0 from "@angular/core";
-import * as i1 from "@daffodil/design";
 /**
- * A directive marking thumbnails for the `DaffMediaRendererComponent`. Needs to be wrapped in a `daff-media-gallery` component
- * and needs to be placed on a component that is provided as a `daffThumbnailCompatToken`.
+ * DaffThumbnailDirective is a structural directive used to mark elements as thumbnails within the `DaffMediaGalleryComponent`.
+ *
+ * ```html
+ * <ng-template daffThumbnail></ng-template>
+ * ```
  */
-export declare class DaffThumbnailDirective implements OnInit, OnDestroy, DaffThumbnailRegistration {
-    component: Type<unknown>;
-    private registry;
+export declare class DaffThumbnailDirective implements OnInit {
+    /**
+     * @docs-private
+     */
     gallery: DaffMediaGalleryRegistration;
-    private selectedDirective;
-    constructor(component: Type<unknown>, registry: DaffMediaGalleryRegistry, gallery: DaffMediaGalleryRegistration, selectedDirective: DaffSelectableDirective);
-    get selected(): boolean;
-    select(): this;
-    deselect(): this;
     /**
-     * Adds a class for styling a thumbnail
+     * @docs-private
+     */
+    templateRef: TemplateRef<unknown>;
+    private _increment;
+    /**
+     * @docs-private
+     *
+     * The autogenerated unique id for a thumbnail.
      */
-    class: boolean;
+    get id(): string;
     /**
-     * Adds a click event to trigger selection of the media element.
+     * @docs-private
      *
-     * @param event: MouseEvent
+     * The unique id of the selected thumbnail.
+     */
+    get selectedThumbnailId(): string;
+    /**
+     * The file path to a thumbnail, presumably an image.
+     */
+    thumbnailSrc: any;
+    /**
+     * Provides an accessible label for a thumbnail.
+     */
+    label: string;
+    /** Indicates whether the thumbnail represents a video. */
+    isVideo: boolean;
+    constructor(
+    /**
+     * @docs-private
+     */
+    gallery: DaffMediaGalleryRegistration, 
+    /**
+     * @docs-private
+     */
+    templateRef: TemplateRef<unknown>);
+    /**
+     * @docs-private
      */
-    onClick($event: MouseEvent): void;
     ngOnInit(): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffThumbnailDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffThumbnailDirective, "[daffThumbnail]", never, {}, {}, never, never, true, [{ directive: typeof i1.DaffSelectableDirective; inputs: { "selected": "selected"; }; outputs: { "becameSelected": "becameSelected"; }; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffThumbnailDirective, "[daffThumbnail]", never, { "thumbnailSrc": { "alias": "thumbnailSrc"; "required": false; }; "label": { "alias": "label"; "required": false; }; "isVideo": { "alias": "isVideo"; "required": false; }; }, {}, never, never, true, never>;
 }

package/menu/README.md

@@ -8,13 +8,12 @@ Menus only appear when a user interacts with a menu activator button. They shoul
 <design-land-example-viewer-container example="basic-menu"></design-land-example-viewer-container>
 
 ## Usage
-
 To use menu, import `DaffMenuModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffMenuModule } from '@daffodil/design/menu';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

package/modal/README.md

@@ -10,10 +10,11 @@ Modal is a dynamically rendered element that floats above the rest of a page's c
 To use modal in a standalone component, import `DAFF_MODAL_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_MODAL_COMPONENTS } from '@daffodil/design/modal';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_MODAL_COMPONENTS,
   ],
@@ -26,8 +27,8 @@ To use modal in a module, import `DaffModalModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffModalModule } from '@daffodil/design/modal';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

package/modal/modal.d.ts

@@ -3,4 +3,7 @@ import { DaffModalCloseDirective } from './modal-close/modal-close.directive';
 import { DaffModalContentComponent } from './modal-content/modal-content.component';
 import { DaffModalHeaderComponent } from './modal-header/modal-header.component';
 import { DaffModalTitleDirective } from './modal-title/modal-title.directive';
+/**
+ * @docs-private
+ */
 export declare const DAFF_MODAL_COMPONENTS: readonly [typeof DaffModalHeaderComponent, typeof DaffModalTitleDirective, typeof DaffModalContentComponent, typeof DaffModalActionsComponent, typeof DaffModalCloseDirective];

package/navbar/README.md

@@ -13,10 +13,11 @@ The navbar contains minimal layout styles, allowing the content within it to be
 To use navbar in a standalone component, import `DAFF_NAVBAR_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_NAVBAR_COMPONENTS } from '@daffodil/design/navbar';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_NAVBAR_COMPONENTS,
   ],
@@ -29,8 +30,8 @@ To use navbar in a module, import `DaffNavbarModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffNavbarModule } from '@daffodil/design/navbar';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

package/navbar/navbar.d.ts

@@ -1,2 +1,5 @@
 import { DaffNavbarComponent } from './navbar/navbar.component';
+/**
+ * @docs-private
+ */
 export declare const DAFF_NAVBAR_COMPONENTS: readonly [typeof DaffNavbarComponent];

package/notification/README.md

@@ -13,10 +13,11 @@ Notifications are used to display short messages that provide context in close p
 To use notification in a standalone component, import `DAFF_NOTIFICATION_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_NOTIFICATION_COMPONENTS } from '@daffodil/design/notification';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_NOTIFICATION_COMPONENTS,
   ],
@@ -29,8 +30,8 @@ To use notification in a module, import `DaffNotificationModule` into your custo
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffNotificationModule } from '@daffodil/design/notification';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [
@@ -62,7 +63,7 @@ Subtitle provides additional details about the notification that should be limit
 ### Actions
 Buttons can be included in notifications to resolve the notification or navigate them to a page with more information. It can be added by using the `daffNotificationActions` selector.
 
-<design-land-example-viewer-container example="notification-with-actions"></design-land-example-viewer-container>d
+<design-land-example-viewer-container example="notification-with-actions"></design-land-example-viewer-container>
 
 ## Properties
 
@@ -87,4 +88,4 @@ The close button is hidden by default but can be visible by setting the `dismiss
 <design-land-example-viewer-container example="dismissible-notification"></design-land-example-viewer-container>
 
 ## Accessibility
-Notifications with a `critical` or `warn` status have a `role="alert"` so that it can be announced by assistive technologies. See (live region roles)[https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles] for more information. All other notifications have a `role="status"`. Notifications have a `tabindex="0"` so users can discover them while tabbing through a page.
+Notifications with a `critical` or `warn` status have a `role="alert"` so that it can be announced by assistive technologies. See [live region roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles#4._live_region_roles) for more information. All other notifications have a `role="status"`. Notifications have a `tabindex="0"` so users can discover them while tabbing through a page.

package/notification/notification.d.ts

@@ -4,4 +4,7 @@ import { DaffNotificationActionsDirective } from './notification-actions/notific
 import { DaffNotificationMessageDirective } from './notification-message/notification-message.directive';
 import { DaffNotificationSubtitleDirective } from './notification-subtitle/notification-subtitle.directive';
 import { DaffNotificationTitleDirective } from './notification-title/notification-title.directive';
+/**
+ * @docs-private
+ */
 export declare const DAFF_NOTIFICATION_COMPONENTS: readonly [typeof DaffNotificationComponent, typeof DaffNotificationActionsDirective, typeof DaffNotificationMessageDirective, typeof DaffNotificationTitleDirective, typeof DaffNotificationSubtitleDirective, typeof DaffPrefixSuffixModule];

package/notification/src/notification-theme.scss

@@ -13,41 +13,80 @@
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
 	$base: core.daff-map-get($theme, 'core', 'base');
 	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$white: core.daff-map-get($theme, 'core', 'white');
 	$black: core.daff-map-get($theme, 'core', 'black');
+	$white: core.daff-map-get($theme, 'core', 'white');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-notification {
-		background: theming.daff-illuminate($base, $neutral, 1);
-		border: 1px solid theming.daff-illuminate($base, $neutral, 2);
-		color: theming.daff-text-contrast(theming.daff-illuminate($base, $neutral, 1));
+		@include theming.light($type) {
+			background: theming.daff-color($neutral, 10);
+			border: 1px solid theming.daff-color($neutral, 20);
+			color: $black;
 
-		&.daff-success {
-			background: theming.daff-color($success, 10);
-			border: 1px solid theming.daff-color($success, 20);
-			color: theming.daff-text-contrast(theming.daff-color($success, 10));
+			&.daff-success {
+				background: theming.daff-color($success, 10);
+				border: 1px solid theming.daff-color($success, 20);
+				color: theming.daff-text-contrast(theming.daff-color($success, 10));
 
-			.daff-prefix {
-				color: theming.daff-color($success);
+				.daff-prefix {
+					color: theming.daff-color($success, 80);
+				}
 			}
-		}
 
-		&.daff-warn {
-			background: theming.daff-color($warn, 10);
-			border: 1px solid theming.daff-color($warn, 20);
-			color: theming.daff-text-contrast(theming.daff-color($warn, 10));
+			&.daff-warn {
+				background: theming.daff-color($warn, 10);
+				border: 1px solid theming.daff-color($warn, 20);
+				color: theming.daff-text-contrast(theming.daff-color($warn, 10));
 
-			.daff-prefix {
-				color: theming.daff-color($warn);
+				.daff-prefix {
+					color: theming.daff-color($warn, 80);
+				}
+			}
+
+			&.daff-critical {
+				background: theming.daff-color($critical, 10);
+				border: 1px solid theming.daff-color($critical, 20);
+				color: theming.daff-text-contrast(theming.daff-color($critical, 10));
+
+				.daff-prefix {
+					color: theming.daff-color($critical, 80);
+				}
 			}
 		}
 
-		&.daff-critical {
-			background: theming.daff-color($critical, 10);
-			border: 1px solid theming.daff-color($critical, 20);
-			color: theming.daff-text-contrast(theming.daff-color($critical, 10));
+		@include theming.dark($type) {
+			background: theming.daff-color($neutral, 90);
+			border: 1px solid theming.daff-color($neutral, 80);
+			color: $white;
+
+			&.daff-success {
+				background: theming.daff-color($success, 90);
+				border: 1px solid theming.daff-color($success, 80);
+				color: theming.daff-text-contrast(theming.daff-color($success, 90));
+
+				.daff-prefix {
+					color: theming.daff-color($success, 30);
+				}
+			}
+
+			&.daff-warn {
+				background: theming.daff-color($warn, 90);
+				border: 1px solid theming.daff-color($warn, 80);
+				color: theming.daff-text-contrast(theming.daff-color($warn, 90));
+
+				.daff-prefix {
+					color: theming.daff-color($warn, 30);
+				}
+			}
+
+			&.daff-critical {
+				background: theming.daff-color($critical, 90);
+				border: 1px solid theming.daff-color($critical, 80);
+				color: theming.daff-text-contrast(theming.daff-color($critical, 90));
 
-			.daff-prefix {
-				color: theming.daff-color($critical);
+				.daff-prefix {
+					color: theming.daff-color($critical, 30);
+				}
 			}
 		}
 	}

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.81.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.81.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":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.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"},"./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"},"./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"},"./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.83.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.83.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":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.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"},"./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"},"./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"}}

package/paginator/README.md

@@ -10,10 +10,11 @@ Paginator is used to break up large amounts of content into multiple pages, enab
 To use paginator in a standalone component, import `DAFF_PAGINATOR_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_PAGINATOR_COMPONENTS } from '@daffodil/design/paginator';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_PAGINATOR_COMPONENTS,
   ],
@@ -26,8 +27,8 @@ To use paginator in a module, import `DaffPaginatorModule` into your custom modu
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffPaginatorModule } from '@daffodil/design/paginator';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [

package/paginator/paginator/paginator.component.d.ts

@@ -116,6 +116,9 @@ export declare class DaffPaginatorComponent implements OnChanges {
      * @param pageNumber page number to check.
      */
     _showNumber(pageNumber: number): boolean;
+    /**
+     * @docs-private
+     */
     _buildPageQueryParams(page: number): Params;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffPaginatorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffPaginatorComponent, "daff-paginator", never, { "numberOfPages": { "alias": "numberOfPages"; "required": false; }; "currentPage": { "alias": "currentPage"; "required": false; }; "linkMode": { "alias": "linkMode"; "required": false; }; "url": { "alias": "url"; "required": false; }; "queryParam": { "alias": "queryParam"; "required": false; }; }, { "notifyPageChange": "notifyPageChange"; }, never, never, true, never>;

package/paginator/paginator.d.ts

@@ -1,2 +1,5 @@
 import { DaffPaginatorComponent } from './paginator/paginator.component';
+/**
+ * @docs-private
+ */
 export declare const DAFF_PAGINATOR_COMPONENTS: readonly [typeof DaffPaginatorComponent];

package/progress-bar/README.md

@@ -7,10 +7,11 @@ A progress bar provides visual feedback about the duration or progress of a task
 To use progress bar in a standalone component, import `DAFF_PROGRESS_BAR_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_PROGRESS_BAR_COMPONENTS } from '@daffodil/design/progress-bar';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_PROGRESS_BAR_COMPONENTS,
   ],
@@ -23,8 +24,8 @@ To use progress bar in a module, import `DaffProgressBarModule` into your custom
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffProgressBarModule } from '@daffodil/design/progress-bar';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [
@@ -56,11 +57,9 @@ Indeterminate progress bars should be used when the loading percentage of a task
 <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`
+Use the `color` property to change the color of a progress bar. The default color is primary.
 
-> `theme`, `theme-contrast`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
+> `theme`, `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>
 

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

@@ -4,9 +4,6 @@ import { DaffColorableDirective } from '@daffodil/design';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
 export declare const clamp: (number: number, min: number, max: number) => number;
-/**
- * @inheritdoc
- */
 export declare class DaffProgressBarComponent {
     private _changeDetectorRef;
     private colorable;

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

@@ -1,3 +1,6 @@
 import { DaffProgressBarLabelDirective } from './progress-bar-label/progress-bar-label.directive';
 import { DaffProgressBarComponent } from './progress-bar.component';
+/**
+ * @docs-private
+ */
 export declare const DAFF_PROGRESS_BAR_COMPONENTS: readonly [typeof DaffProgressBarComponent, typeof DaffProgressBarLabelDirective];

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

@@ -11,33 +11,42 @@
 	$white: core.daff-map-get($theme, 'core', 'white');
 	$black: core.daff-map-get($theme, 'core', 'black');
 	$neutral: core.daff-map-get($theme, 'core', 'neutral');
+	$type: core.daff-map-get($theme, 'core', 'type');
 
 	.daff-progress-bar {
 		$root: '.daff-progress-bar';
 
 		#{$root}__label {
-			color: theming.daff-illuminate($base-contrast, $neutral, 2);
+			color: theming.daff-text-contrast($base);
 		}
 
-		#{$root}__track {
-			background: theming.daff-illuminate($base, $neutral, 2);
+		@include theming.light($type) {
+			#{$root}__track {
+				background: theming.daff-color($neutral, 30);
+			}
+		}
+
+		@include theming.dark($type) {
+			#{$root}__track {
+				background: theming.daff-color($neutral, 80);
+			}
 		}
 
 		&.daff-primary {
 			#{$root}__fill {
-				background: theming.daff-illuminate($base, $primary, 6);
+				background: theming.daff-color($primary);
 			}
 		}
 
 		&.daff-secondary {
 			#{$root}__fill {
-				background: theming.daff-illuminate($base, $secondary, 6);
+				background: theming.daff-color($secondary);
 			}
 		}
 
 		&.daff-tertiary {
 			#{$root}__fill {
-				background: theming.daff-illuminate($base, $tertiary, 6);
+				background: theming.daff-color($tertiary);
 			}
 		}
 
@@ -53,13 +62,13 @@
 			}
 		}
 
-		&.daff-white {
+		&.daff-light {
 			#{$root}__fill {
 				background: $white;
 			}
 		}
 
-		&.daff-black {
+		&.daff-dark {
 			#{$root}__fill {
 				background: $black;
 			}