@daffodil/design 0.83.0 → 0.85.0

package/modal/modal-title/modal-title.directive.d.ts

@@ -13,6 +13,9 @@ export declare class DaffModalTitleDirective {
     /**
      * The html `id` of the modal title.
      */
+    /**
+     * @docs-private
+     */
     get uniqueId(): string;
     constructor(modal: DaffModalComponent);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffModalTitleDirective, [{ optional: true; }]>;

package/modal/src/modal-theme.scss

@@ -1,7 +1,7 @@
-@use '../../scss/core';
+@use '../../scss/theming' as *;
 
 @mixin daff-modal-theme($theme) {
-	$base: core.daff-map-get($theme, 'core', 'base');
+	$base: daff-get-base-color($theme, base);
 
 	.daff-modal {
 		background: $base;

package/navbar/src/navbar-theme.scss

@@ -1,41 +1,44 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-navbar-theme-variant($color) {
 	background: $color;
-	color: theming.daff-text-contrast($color);
+	color: daff-text-contrast($color);
 }
 
 @mixin daff-navbar-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
-	$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');
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$white: daff-get-base-color($theme, 'white');
+	$black: daff-get-base-color($theme, 'black');
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-navbar {
-		@include daff-navbar-theme-variant(
-			theming.daff-illuminate($base, $neutral, 1)
-		);
+		@include light($mode) {
+			@include daff-navbar-theme-variant(daff-color($neutral, 10));
+		}
+
+		@include dark($mode) {
+			@include daff-navbar-theme-variant(daff-color($neutral, 90));
+		}
 
 		&--raised {
 			box-shadow: 0 4px 10px rgba($black, 0.08);
 		}
 
 		&.daff-primary {
-			@include daff-navbar-theme-variant(theming.daff-color($primary));
+			@include daff-navbar-theme-variant(daff-color($primary));
 		}
 
 		&.daff-secondary {
-			@include daff-navbar-theme-variant(theming.daff-color($secondary));
+			@include daff-navbar-theme-variant(daff-color($secondary));
 		}
 
 		&.daff-tertiary {
-			@include daff-navbar-theme-variant(theming.daff-color($tertiary));
+			@include daff-navbar-theme-variant(daff-color($tertiary));
 		}
 
 		&.daff-black {

package/notification/README.md

@@ -52,27 +52,24 @@ export class CustomComponentModule { }
 ## Supported Content Types
 
 ### Icon
-An icon can be used to give a user a brief overview of what the nofication is about. It can be added before the title and subtitle by using the <code>daffPrefix</code> selector.
+An icon can be used to provide users with a quick visual cue about the purpose of a notification. Place the icon before the title and subtitle using the `[daffPrefix]` selector.
 
 ### Title
-Title gives a quick overview of what the notification is about. It can be added by using the `daffNotificationTitle` selector.
+The title provides a quick overview of what the notification's content. Add it using the `[daffNotificationTitle]` selector.
 
 ### Subtitle
-Subtitle provides additional details about the notification that should be limited to one or two sentences. It can be added by using the `daffNotificationSubtitle` selector.
+The subtitle provides additional details about the notification. It should be limited to one or two sentences. Add it using the `[daffNotificationSubtitle]` selector.
 
 ### 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.
+Buttons can be included in notifications to dismiss them or navigate them to a page with more information. Use the `[daffNotificationActions]` selector to include these actions.
 
 <design-land-example-viewer-container example="notification-with-actions"></design-land-example-viewer-container>
 
 ## Properties
 
-### Statuses
-The status color of a notification can be updated by using the `status` property.
+### Status
+The status property is used to visually distinguish between different notification types. Use the `status` property to set the status.
 
-Supported statuses: `warn | critical | success`
-
-#### Notification with statuses
 <design-land-example-viewer-container example="notification-status"></design-land-example-viewer-container>
 
 ### Orientation
@@ -81,11 +78,13 @@ Orientation dictates how a notification's content is stacked — `vertical` or `
 <design-land-example-viewer-container example="notification-orientations"></design-land-example-viewer-container>
 
 ### Dismissing a notification
-Notifications are not dismissible by default. They typically persist on the page until a user takes action that resolves the notification.
+By default, notifications are not dismissible and remain visible until the user takes an action to resolve them.
 
-The close button is hidden by default but can be visible by setting the `dismissible` property to `true`. It should remain hidden if a notification has critical information for a user to read or interact with.
+To show a close button, set the `dismissible` property to `true`. Avoid making critical notifications dismissible to ensure users can read or interact with the necessary information.
 
 <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/notification.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@angular/core';
-import { DaffPrefixable, DaffPrefixDirective, DaffStatusableDirective } from '@daffodil/design';
+import { DaffPrefixDirective, DaffStatusableDirective } from '@daffodil/design';
 import { DaffNotificationActionsDirective } from '../notification-actions/notification-actions.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
@@ -8,19 +8,34 @@ export type DaffNotificationOrientation = 'horizontal' | 'vertical';
  * DaffNotificationComponent provides a way to display and communicate
  * information related to user actions within a page's content.
  */
-export declare class DaffNotificationComponent implements DaffPrefixable {
+export declare class DaffNotificationComponent {
     private statusDirective;
     faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
     _prefix: DaffPrefixDirective;
     _actions: DaffNotificationActionsDirective;
+    /**
+     * @docs-private
+     */
     class: boolean;
+    /**
+     * @docs-private
+     */
     tabindex: string;
     /**
      * Sets role to alert when `status="warn"` or `status="critical"`.
      * Sets role to status on all other instances.
      */
+    /**
+     * @docs-private
+     */
     get role(): "status" | "alert";
+    /**
+     * @docs-private
+     */
     get verticalOrientation(): boolean;
+    /**
+     * @docs-private
+     */
     get horizontalOrientation(): boolean;
     /** Whether or not a notification is closable */
     dismissible: boolean;

package/notification/notification-actions/notification-actions.directive.d.ts

@@ -1,5 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class DaffNotificationActionsDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationActionsDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffNotificationActionsDirective, "[daffNotificationActions]", never, {}, {}, never, never, true, never>;

package/notification/notification-message/notification-message.directive.d.ts

@@ -1,5 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class DaffNotificationMessageDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationMessageDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffNotificationMessageDirective, "[daffNotificationMessage]", never, {}, {}, never, never, true, never>;

package/notification/notification-subtitle/notification-subtitle.directive.d.ts

@@ -1,5 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class DaffNotificationSubtitleDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationSubtitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffNotificationSubtitleDirective, "[daffNotificationSubtitle]", never, {}, {}, never, never, true, never>;

package/notification/notification-title/notification-title.directive.d.ts

@@ -1,5 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class DaffNotificationTitleDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffNotificationTitleDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffNotificationTitleDirective, "[daffNotificationTitle]", never, {}, {}, never, never, true, never>;

package/notification/notification.d.ts

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

package/notification/src/notification-theme.scss

@@ -1,91 +1,89 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-notification-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
-	$info: core.daff-map-get($theme, informational);
-	$warn: core.daff-map-get($theme, warn);
-	$critical: core.daff-map-get($theme, critical);
-	$success: core.daff-map-get($theme, success);
-	$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');
-	$black: core.daff-map-get($theme, 'core', 'black');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$info: daff-get-palette($theme, informational);
+	$warn: daff-get-palette($theme, warn);
+	$critical: daff-get-palette($theme, critical);
+	$success: daff-get-palette($theme, success);
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$black: daff-get-base-color($theme, 'black');
+	$white: daff-get-base-color($theme, 'white');
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-notification {
-		@include theming.light($type) {
-			background: theming.daff-color($neutral, 10);
-			border: 1px solid theming.daff-color($neutral, 20);
+		@include light($mode) {
+			background: daff-color($neutral, 10);
+			border: 1px solid 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));
+				background: daff-color($success, 10);
+				border: 1px solid daff-color($success, 20);
+				color: daff-text-contrast(daff-color($success, 10));
 
 				.daff-prefix {
-					color: theming.daff-color($success, 80);
+					color: 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));
+				background: daff-color($warn, 10);
+				border: 1px solid daff-color($warn, 20);
+				color: daff-text-contrast(daff-color($warn, 10));
 
 				.daff-prefix {
-					color: theming.daff-color($warn, 80);
+					color: 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));
+				background: daff-color($critical, 10);
+				border: 1px solid daff-color($critical, 20);
+				color: daff-text-contrast(daff-color($critical, 10));
 
 				.daff-prefix {
-					color: theming.daff-color($critical, 80);
+					color: daff-color($critical, 80);
 				}
 			}
 		}
 
-		@include theming.dark($type) {
-			background: theming.daff-color($neutral, 90);
-			border: 1px solid theming.daff-color($neutral, 80);
+		@include dark($mode) {
+			background: daff-color($neutral, 90);
+			border: 1px solid 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));
+				background: daff-color($success, 90);
+				border: 1px solid daff-color($success, 80);
+				color: daff-text-contrast(daff-color($success, 90));
 
 				.daff-prefix {
-					color: theming.daff-color($success, 30);
+					color: 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));
+				background: daff-color($warn, 90);
+				border: 1px solid daff-color($warn, 80);
+				color: daff-text-contrast(daff-color($warn, 90));
 
 				.daff-prefix {
-					color: theming.daff-color($warn, 30);
+					color: 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));
+				background: daff-color($critical, 90);
+				border: 1px solid daff-color($critical, 80);
+				color: daff-text-contrast(daff-color($critical, 90));
 
 				.daff-prefix {
-					color: theming.daff-color($critical, 30);
+					color: daff-color($critical, 30);
 				}
 			}
 		}

package/package.json

@@ -1 +1 @@
-{"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"}}
+{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.85.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.85.0","@fortawesome/angular-fontawesome":"^1.0.0","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^3.0.1","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^9.8.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./breadcrumb":{"types":"./breadcrumb/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./button/index.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./input":{"types":"./input/index.d.ts","default":"./fesm2022/daffodil-design-input.mjs"},"./link-set":{"types":"./link-set/index.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./quantity-field":{"types":"./quantity-field/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./switch":{"types":"./switch/index.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./tabs/index.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./text-snippet":{"types":"./text-snippet/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./toast":{"types":"./toast/index.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./youtube-player/index.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./breadcrumb/examples":{"types":"./breadcrumb/examples/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./switch/examples":{"types":"./switch/examples/index.d.ts","default":"./fesm2022/daffodil-design-switch-examples.mjs"},"./tabs/examples":{"types":"./tabs/examples/index.d.ts","default":"./fesm2022/daffodil-design-tabs-examples.mjs"},"./text-snippet/examples":{"types":"./text-snippet/examples/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}

package/paginator/src/paginator-theme.scss

@@ -1,34 +1,37 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
+// stylelint-disable selector-class-pattern
 @mixin daff-paginator-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
-	$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');
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$font-color: core.daff-map-get($theme, 'core', 'font-color');
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$white: daff-get-base-color($theme, 'white');
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-paginator {
 		&__previous,
-		&__next {
-			color: $font-color;
-		}
-
+		&__next,
 		&__page-link {
-			color: $font-color;
+			color: $base-contrast;
+		}
 
-			// stylelint-disable selector-class-pattern
-			&:hover,
-			&.selected {
-				color: daff-text-contrast(theming.daff-illuminate($base, $neutral, 2));
+		@include light($mode) {
+			&__page-link {
+				&:hover,
+				&.selected {
+					&::after {
+						background: daff-color($neutral, 20);
+					}
+				}
+			}
+		}
 
-				&::after {
-					background: theming.daff-illuminate($base, $neutral, 2);
+		@include dark($mode) {
+			&__page-link {
+				&:hover,
+				&.selected {
+					&::after {
+						background: daff-color($neutral, 90);
+					}
 				}
 			}
 		}

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

@@ -1,5 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class DaffProgressBarLabelDirective {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffProgressBarLabelDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<DaffProgressBarLabelDirective, "[daffProgressBarLabel]", never, {}, {}, never, never, true, never>;

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

@@ -15,10 +15,25 @@ export declare class DaffProgressBarComponent {
      * @docs-private
      */
     get indeterminateClass(): boolean;
+    /**
+     * @docs-private
+     */
     get role(): string;
+    /**
+     * @docs-private
+     */
     get ariaLabel(): string;
+    /**
+     * @docs-private
+     */
     ariaValueMin: string;
+    /**
+     * @docs-private
+     */
     ariaValueMax: string;
+    /**
+     * @docs-private
+     */
     get ariaValueNow(): number;
     constructor(_changeDetectorRef: ChangeDetectorRef, colorable: DaffColorableDirective);
     private _percentage;

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

@@ -1,52 +1,50 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 @mixin daff-progress-bar-theme($theme) {
-	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
-	$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');
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$white: daff-get-base-color($theme, 'white');
+	$black: daff-get-base-color($theme, 'black');
+	$neutral: daff-get-palette($theme, neutral);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-progress-bar {
 		$root: '.daff-progress-bar';
 
 		#{$root}__label {
-			color: theming.daff-text-contrast($base);
+			color: daff-text-contrast($base);
 		}
 
-		@include theming.light($type) {
+		@include light($mode) {
 			#{$root}__track {
-				background: theming.daff-color($neutral, 30);
+				background: daff-color($neutral, 30);
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			#{$root}__track {
-				background: theming.daff-color($neutral, 80);
+				background: daff-color($neutral, 80);
 			}
 		}
 
 		&.daff-primary {
 			#{$root}__fill {
-				background: theming.daff-color($primary);
+				background: daff-color($primary);
 			}
 		}
 
 		&.daff-secondary {
 			#{$root}__fill {
-				background: theming.daff-color($secondary);
+				background: daff-color($secondary);
 			}
 		}
 
 		&.daff-tertiary {
 			#{$root}__fill {
-				background: theming.daff-color($tertiary);
+				background: daff-color($tertiary);
 			}
 		}
 

package/public_api.d.ts

@@ -1,10 +1,9 @@
 export * from './atoms/form/core/public_api';
 export * from './atoms/form/form-field/public_api';
 export * from './atoms/form/error-message/public_api';
-export * from './atoms/form/input/public_api';
+export * from './atoms/form/hint/public_api';
 export * from './atoms/form/native-select/public_api';
 export * from './atoms/form/checkbox/public_api';
-export * from './atoms/form/quantity-field/public_api';
 export * from './atoms/form/radio/public_api';
 export * from './atoms/form/form-label/public_api';
 export * from './core/public_api';