@daffodil/design 0.81.0 → 0.82.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,41 @@
-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`.
+ * A structural directive marking thumbnails for 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 {
     gallery: DaffMediaGalleryRegistration;
-    private selectedDirective;
-    constructor(component: Type<unknown>, registry: DaffMediaGalleryRegistry, gallery: DaffMediaGalleryRegistration, selectedDirective: DaffSelectableDirective);
-    get selected(): boolean;
-    select(): this;
-    deselect(): this;
+    templateRef: TemplateRef<unknown>;
     /**
-     * Adds a class for styling a thumbnail
+     * The id of the thumbnail.
      */
-    class: boolean;
+    get id(): string;
     /**
-     * Adds a click event to trigger selection of the media element.
-     *
-     * @param event: MouseEvent
+     * The id of the thumbnail panel.
+     */
+    get panelId(): string;
+    /**
+     * The file path to a thumbnail, presumably an image.
+     */
+    thumbnailSrc: any;
+    /**
+     * The button label for the thumbnail.
+     */
+    label: string;
+    isVideo: boolean;
+    /**
+     * @docs-private
+     */
+    constructor(gallery: DaffMediaGalleryRegistration, 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/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.81.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.7","@angular/common":"19.0.7","@angular/core":"19.0.7","@angular/forms":"19.0.7","@angular/cdk":"19.0.5","@daffodil/core":"0.81.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"},"./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"},"./radio/examples":{"types":"./radio/examples/index.d.ts","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field-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.82.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.82.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: [

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/scss/theme.scss

@@ -33,7 +33,9 @@
 @use '../loading-icon/src/loading-icon-theme' as loading-icon;
 @use '../accordion/src/accordion-theme' as accordion;
 @use '../callout/src/callout-theme' as callout;
-@use '../card/src/card-theme' as card;
+@use '../card/src/card-base-theme' as card-base;
+@use '../card/src/card/raised/raised-theme' as raised-card;
+@use '../card/src/card/stroked/stroked-theme' as stroked-card;
 @use '../hero/src/hero-theme' as hero;
 @use '../list/src/list-theme' as list;
 @use '../media-gallery/src/media-gallery-theme' as media-gallery;
@@ -51,52 +53,69 @@
 @use '../toast/src/toast-theme' as toast;
 
 //
-// Generates the styles of a @daffodil/design theme.
+// Generates the styles of `@daffodil/design`'s component themes.
 //
-// Usage:
+// @usage
 // ```scss
-// @use '@daffodil/design/scss/theme';
+// @use '@daffodil/design/scss/theme' as daff-theme;
 //
-// @include daff-theme($theme);
+// @include daff-theme.daff-component-themes($theme);
 // ```
-@mixin daff-theme($theme) {
+@mixin daff-component-themes($theme) {
 	// CSS variables
 	@include variables.daff-theme-css-variables($theme);
 
 	// Mixins
 	@include skeleton.daff-skeleton-theme($theme);
 
-	// Atoms
+	@include accordion.daff-accordion-theme($theme);
+	@include article.daff-article-theme($theme);
+	@include breadcrumb.daff-breadcrumb-theme($theme);
+
 	@include button.daff-button-theme($theme);
 	@include flat-button.daff-flat-button-theme($theme);
 	@include icon-button.daff-icon-button-theme($theme);
 	@include raised-button.daff-raised-button-theme($theme);
 	@include stroked-button.daff-stroked-button-theme($theme);
 	@include underline-button.daff-underline-button-theme($theme);
-	@include breadcrumb.daff-breadcrumb-theme($theme);
-	@include error-message.daff-error-message-theme($theme);
+
+	@include callout.daff-callout-theme($theme);
+	@include card-base.daff-card-base-theme($theme);
+	@include raised-card.daff-raised-card-theme($theme);
+	@include stroked-card.daff-stroked-card-theme($theme);
+
 	@include form-field.daff-form-field-theme($theme);
+	@include error-message.daff-error-message-theme($theme);
 	@include input.daff-input-theme($theme);
 	@include native-select.daff-native-select-theme($theme);
-	@include loading-icon.daff-loading-icon-theme($theme);
-	@include progress-bar.daff-progress-bar-theme($theme);
 
-	// Molecules
-	@include accordion.daff-accordion-theme($theme);
-	@include article.daff-article-theme($theme);
-	@include callout.daff-callout-theme($theme);
-	@include card.daff-card-theme($theme);
 	@include hero.daff-hero-theme($theme);
 	@include list.daff-list-theme($theme);
+	@include loading-icon.daff-loading-icon-theme($theme);
 	@include media-gallery.daff-media-gallery-theme($theme);
 	@include menu.daff-menu-theme($theme);
 	@include modal.daff-modal-theme($theme);
 	@include navbar.daff-navbar-theme($theme);
 	@include notification.daff-notification-theme($theme);
 	@include paginator.daff-paginator-theme($theme);
+	@include progress-bar.daff-progress-bar-theme($theme);
 	@include sidebar.daff-sidebar-theme($theme);
 	@include switch.daff-switch-theme($theme);
 	@include tabs.daff-tabs-theme($theme);
-	@include tree.daff-tree-theme($theme);
 	@include toast.daff-toast-theme($theme);
+	@include tree.daff-tree-theme($theme);
+}
+
+//
+// @deprecated
+// Generates the styles of a @daffodil/design theme.
+//
+// Usage:
+// ```scss
+// @use '@daffodil/design/scss/theme';
+//
+// @include daff-theme($theme);
+// ```
+@mixin daff-theme($theme) {
+	@include daff-component-themes($theme);
 }

package/scss/theming/_configure-theme.scss

@@ -4,6 +4,7 @@
 @use 'get-color';
 
 $daff-light-theme: (
+	'type': 'light',
 	'font-color': get-color.daff-color(palette.$daff-neutral, 110),
 	'base': get-color.daff-color(palette.$daff-neutral, 0),
 	'base-contrast': get-color.daff-color(palette.$daff-neutral, 110),
@@ -13,6 +14,7 @@ $daff-light-theme: (
 );
 
 $daff-dark-theme: (
+	'type': 'dark',
 	'font-color': get-color.daff-color(palette.$daff-neutral, 0),
 	'base': get-color.daff-color(palette.$daff-neutral, 100),
 	'base-contrast': get-color.daff-color(palette.$daff-neutral, 0),

package/scss/theming/_index.scss

@@ -4,4 +4,5 @@
 @forward 'illuminate/illuminate';
 @forward 'configure-palette';
 @forward 'configure-theme';
+@forward 'light-dark';
 @forward 'daff-theme';

package/scss/theming/_light-dark.scss

@@ -0,0 +1,45 @@
+//
+// Apply styles only in light mode.
+//
+// @usage
+// ```scss
+// @use 'theme' as daff-theme;
+//
+// $type: daff-theme.daff-map-get($theme, 'core', 'type');
+//
+// @include daff-theme.light($type) {
+//   color: blue;
+//
+//   .class {
+//      background: white;
+//	 }
+// }
+// ```
+@mixin light($mode) {
+	@if $mode == 'light' {
+		@content;
+	}
+}
+
+//
+// Apply styles only in dark mode.
+//
+// @usage
+// ```scss
+// @use 'theme' as daff-theme;
+//
+// $type: daff-theme.daff-map-get($theme, 'core', 'type');
+//
+// @include daff-theme.dark($type) {
+//   color: blue;
+//
+//   .class {
+//      background: white;
+//	 }
+// }
+// ```
+@mixin dark($mode) {
+	@if $mode == 'dark' {
+		@content;
+	}
+}