@daffodil/design 0.84.0 → 0.85.0

package/package.json

@@ -1 +1 @@
-{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.84.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.84.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":"^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"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.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"},"./card/examples":{"types":"./card/examples/index.d.ts","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","default":"./fesm2022/daffodil-design-callout-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,13 +1,11 @@
-@use 'sass:map';
-@use '../../scss/core';
-@use '../../scss/theming';
+@use '../../scss/theming' as *;
 
 // stylelint-disable selector-class-pattern
 @mixin daff-paginator-theme($theme) {
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$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,
@@ -16,23 +14,23 @@
 			color: $base-contrast;
 		}
 
-		@include theming.light($type) {
+		@include light($mode) {
 			&__page-link {
 				&:hover,
 				&.selected {
 					&::after {
-						background: theming.daff-color($neutral, 20);
+						background: daff-color($neutral, 20);
 					}
 				}
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			&__page-link {
 				&:hover,
 				&.selected {
 					&::after {
-						background: theming.daff-color($neutral, 90);
+						background: daff-color($neutral, 90);
 					}
 				}
 			}

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

@@ -2,10 +2,8 @@ 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/hint/public_api';
-export * from './atoms/form/input/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';

package/quantity-field/README.md

@@ -0,0 +1,63 @@
+# Quantity Field
+Quantity field is a form control element that switches between a native select and input element.
+
+## Overview
+Quantity field is intended for use with cart items and product quantities. The maximum number accepted in a quantity select is configurable and set to 10 by default. It will switch to a quantity input if 10+ is selected.
+
+<design-land-example-viewer-container example="basic-quantity-field"></design-land-example-viewer-container>
+
+## Usage
+
+### Within a standalone component
+To use form field in a standalone component, import `DaffQuantityFieldComponent` directly into your custom component:
+
+```ts
+import { DaffQuantityFieldComponent } from '@daffodil/design/quantity-field';
+
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  imports: [
+    DaffQuantityFieldComponent,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use form field in a module, import `DaffQuantityFieldModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+import { DaffQuantityFieldModule } from '@daffodil/design/quantity-field';
+import { CustomComponent } from './custom.component';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffQuantityFieldModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Range Limits
+The default allowed range of numbers is 1 to 500. This can be changed by passing in the desired min and max values as inputs. Note that this does not validate the actual input. It merely informs the select which options it should generate and sets the input's min and max attributes. See [input#min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#min) and [input#max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#max) for more information.
+
+## Disabled quantity field
+<design-land-example-viewer-container example="disabled-quantity-field"></design-land-example-viewer-container>
+
+## Custom Select Max Value (15)
+The maximum value at which the field will switch to using an input is configurable.
+<design-land-example-viewer-container example="select-max-quantity-field"></design-land-example-viewer-container>
+
+## Custom Range Limits (5 - 50)
+Custom range limits is the absolute minimum and maximum values can be specified.
+<design-land-example-viewer-container example="custom-range-quantity-field"></design-land-example-viewer-container>

package/quantity-field/index.d.ts

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

package/quantity-field/public_api.d.ts

@@ -0,0 +1,2 @@
+export { DaffQuantityFieldModule } from './quantity-field.module';
+export { DaffQuantityFieldComponent } from './quantity-field.component';

package/{atoms/form/quantity-field → quantity-field}/quantity-field.component.d.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { DaffFormFieldControl } from '@daffodil/design';
 import { DaffQuantityInputComponent } from './quantity-input/quantity-input.component';
 import { DaffQuantitySelectComponent } from './quantity-select/quantity-select.component';
-import { DaffFormFieldControl } from '../form-field/form-field-control';
 import * as i0 from "@angular/core";
 export declare class DaffQuantityFieldComponent extends DaffFormFieldControl<number> implements ControlValueAccessor, DaffFormFieldControl<number> {
     ngControl: NgControl;
@@ -38,7 +38,7 @@ export declare class DaffQuantityFieldComponent extends DaffFormFieldControl<num
      * Returns the lesser of max and selectMax.
      */
     get _maxFloor(): number;
-    get controlType(): "native-select" | "native-input";
+    get controlType(): "native-input" | "native-select";
     get showInputField(): boolean;
     get showSelectField(): boolean;
     constructor(ngControl: NgControl, cd: ChangeDetectorRef);
@@ -51,5 +51,5 @@ export declare class DaffQuantityFieldComponent extends DaffFormFieldControl<num
     focus(): void;
     get value(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityFieldComponent, [{ optional: true; self: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityFieldComponent, "daff-quantity-field", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "selectMax": { "alias": "selectMax"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityFieldComponent, "daff-quantity-field", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "selectMax": { "alias": "selectMax"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, true, never>;
 }

package/quantity-field/quantity-field.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./quantity-field.component";
+/**
+ * @deprecated in favor of standalone components. Deprecated in version 0.84.0. Will be removed in version 1.0.0.
+ */
+export declare class DaffQuantityFieldModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityFieldModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffQuantityFieldModule, never, [typeof i1.CommonModule, typeof i2.DaffQuantityFieldComponent], [typeof i2.DaffQuantityFieldComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DaffQuantityFieldModule>;
+}

package/{atoms/form/quantity-field → quantity-field}/quantity-input/quantity-input.component.d.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
 import { UntypedFormControl, NgControl } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { DaffInputComponent } from '../../input/public_api';
+import { DaffInputComponent } from '@daffodil/design/input';
 import * as i0 from "@angular/core";
 export declare class DaffQuantityInputComponent implements OnInit, OnDestroy {
     ngControl: NgControl;
@@ -45,5 +45,5 @@ export declare class DaffQuantityInputComponent implements OnInit, OnDestroy {
     onValueChange(e: any): void;
     private setInputDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantityInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityInputComponent, "daff-quantity-input", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantityInputComponent, "daff-quantity-input", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, true, never>;
 }

package/{atoms/form/quantity-field → quantity-field}/quantity-select/quantity-select.component.d.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { DaffNativeSelectComponent } from '../../native-select/public_api';
+import { DaffNativeSelectComponent } from '@daffodil/design';
 import * as i0 from "@angular/core";
 /**
  * Create an array of numbers from min to max, not including max.
@@ -47,5 +47,5 @@ export declare class DaffQuantitySelectComponent {
      */
     get valueArray(): number[];
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffQuantitySelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantitySelectComponent, "daff-quantity-select", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "extendable": { "alias": "extendable"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffQuantitySelectComponent, "daff-quantity-select", never, { "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "extendable": { "alias": "extendable"; "required": false; }; }, {}, never, never, true, never>;
 }

package/scss/state/skeleton/_mixins.scss

@@ -1,23 +1,22 @@
-@use '../../core';
-@use '../../theming';
+@use '../../theming' as *;
 
 @mixin daff-skeleton-theme($theme) {
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$type: core.daff-map-get($theme, 'core', 'type');
+	$neutral: daff-get-palette($theme, neutral);
+	$base: daff-get-base-color($theme, base);
+	$mode: daff-get-theme-mode($theme);
 
 	.daff-skeleton {
-		@include theming.light($type) {
+		@include light($mode) {
 			&::before,
 			::before {
-				background: theming.daff-color($neutral, 20);
+				background: daff-color($neutral, 20);
 			}
 		}
 
-		@include theming.dark($type) {
+		@include dark($mode) {
 			&::before,
 			::before {
-				background: theming.daff-color($neutral, 90);
+				background: daff-color($neutral, 90);
 			}
 		}
 	}

package/scss/theme.scss

@@ -29,7 +29,6 @@
 @use '../src/atoms/form/error-message/error-message-theme' as error-message;
 @use '../src/atoms/form/hint/hint-theme' as hint;
 @use '../src/atoms/form/form-field/form-field/form-field-theme' as form-field;
-@use '../src/atoms/form/input/input-theme' as input;
 @use '../src/atoms/form/native-select/native-select-theme' as native-select;
 @use '../loading-icon/src/loading-icon-theme' as loading-icon;
 @use '../accordion/src/accordion-theme' as accordion;
@@ -88,7 +87,6 @@
 	@include form-field.daff-form-field-theme($theme);
 	@include error-message.daff-error-message-theme($theme);
 	@include hint.daff-hint-theme($theme);
-	@include input.daff-input-theme($theme);
 	@include native-select.daff-native-select-theme($theme);
 
 	@include hero.daff-hero-theme($theme);

package/scss/theming/_configure-theme.scss

@@ -4,7 +4,7 @@
 @use 'get-color';
 
 $daff-light-theme: (
-	'type': 'light',
+	'mode': '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),
@@ -14,7 +14,7 @@ $daff-light-theme: (
 );
 
 $daff-dark-theme: (
-	'type': 'dark',
+	'mode': '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),
@@ -23,7 +23,7 @@ $daff-dark-theme: (
 	'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 50),
 );
 
-$supported-theme-types: (
+$supported-theme-modes: (
 	'light': $daff-light-theme,
 	'dark': $daff-dark-theme
 );
@@ -36,31 +36,31 @@ $supported-theme-types: (
 // that can be overriden by using the `daff-configure-theme-status` function.
 //
 // @usage
-// ```
+// ```scss
 // $primary: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
 // $secondary: configure-palette.daff-configure-palette(palette.$daff-purple, 60);
 // $tertiary: configure-palette.daff-configure-palette(palette.$daff-turquoise, 60);
 //
-// $theme: daff-configure-theme($primary, $secondary, $tertiary)
+// $theme: daff-configure-theme($primary, $secondary, $tertiary, 'light');
 // ```
 @function daff-configure-theme(
 	$primary,
 	$secondary,
 	$tertiary,
-	$type: 'light'
+	$mode: 'light'
 ) {
 	$info: null;
 	$warn: null;
 	$critical: null;
 	$success: null;
 
-	@if($type == 'dark') {
+	@if($mode == 'dark') {
 		$info: configure-palette.daff-configure-palette(palette.$daff-neutral, 50);
 		$warn: configure-palette.daff-configure-palette(palette.$daff-bronze, 50);
 		$critical: configure-palette.daff-configure-palette(palette.$daff-red, 50);
 		$success: configure-palette.daff-configure-palette(palette.$daff-green, 50);
 	}
-	@if($type == 'light') {
+	@if($mode == 'light') {
 		$info: configure-palette.daff-configure-palette(palette.$daff-neutral, 60);
 		$warn: configure-palette.daff-configure-palette(palette.$daff-bronze, 60);
 		$critical: configure-palette.daff-configure-palette(palette.$daff-red, 60);
@@ -75,7 +75,7 @@ $supported-theme-types: (
 		'warn':  $warn,
 		'critical': $critical,
 		'success': $success,
-		'core': daff-build-theme-core($type)
+		'core': daff-build-theme-core($mode)
 	);
 }
 
@@ -111,18 +111,18 @@ $supported-theme-types: (
 //
 // @docs
 //
-// Create a core theme given a theme type
-// $type | ThemeType : "light" | "dark"
+// Retrieves the core theme given a theme mode
+// $mode: "light" | "dark"
 //
 // ```
 // @usage
 // daff-build-theme-core("light")
 // ```
-@function daff-build-theme-core($type: 'light') {
-	$error-msg: 'is not a valid theme type - valid types:';
-	@if (not map.has-key($supported-theme-types, $type)) {
-		@error '`#{$type}` `#{$error-msg}` `#{map-keys($supported-theme-types)}`';
+@function daff-build-theme-core($mode: 'light') {
+	$error-msg: 'is not a valid theme mode - valid modes:';
+	@if (not map.has-key($supported-theme-modes, $mode)) {
+		@error '`#{$mode}` `#{$error-msg}` `#{map-keys($supported-theme-modes)}`';
 	}
 
-	@return map.get($supported-theme-types, $type);
+	@return map.get($supported-theme-modes, $mode);
 }

package/scss/theming/_get-base-color.scss

@@ -0,0 +1,19 @@
+@use '../core/map/map-get/map-get';
+
+// Retrieves a base color from Daffodil's theme configurations.
+// $color must be one of these values: `white`, `black`, `base`, and `base-contrast`.
+// ```scss
+// $base: daff-get-base-color($theme, base);
+// ```
+@function daff-get-base-color($theme, $color) {
+	@if (
+		$color != 'white' and
+		$color != 'black' and
+		$color != base and
+		$color != base-contrast
+	) {
+		@error '' + $color + ' is not supported as part of Daffodil`s core colors.';
+	}
+
+	@return map-get.daff-map-get($theme, 'core', $color);
+}

package/scss/theming/_get-palette.scss

@@ -0,0 +1,27 @@
+@use '../core/map/map-get/map-get';
+
+// Retrieves a specific color palette from Daffodil's theme configurations.
+// $palette must be one of these values:
+// `primary`, `secondary`, `tertiary`, `informational`, `warn`, `critical`, `success`, and `neutral`.
+//
+// ```scss
+// $primary: daff-get-palette($theme, primary);
+// ```
+@function daff-get-palette($theme, $palette) {
+	@if (
+		$palette != primary and
+		$palette != secondary and
+		$palette != tertiary and
+		$palette != informational and
+		$palette != warn and
+		$palette != critical and
+		$palette != success and
+		$palette != neutral
+	) {
+		@error '' + $palette + ' is not a supported palette in Daffodil`s theme configurations.';
+	}
+	@if ($palette == 'neutral') {
+		@return map-get.daff-map-get($theme, 'core', $palette);
+	}
+	@return map-get.daff-map-get($theme, $palette);
+}

package/scss/theming/_get-theme-mode.scss

@@ -0,0 +1,9 @@
+@use '../core/map/map-get/map-get';
+
+// Retrieves the mode from Daffodil's theme configurations.
+// ```scss
+// $mode: daff-get-theme-mode($theme);
+// ```
+@function daff-get-theme-mode($theme) {
+	@return map-get.daff-map-get($theme, 'core', 'mode');
+}

package/scss/theming/_index.scss

@@ -6,3 +6,6 @@
 @forward 'configure-theme';
 @forward 'light-dark';
 @forward 'daff-theme';
+@forward 'get-palette';
+@forward 'get-base-color';
+@forward 'get-theme-mode';

package/scss/theming/_light-dark.scss

@@ -5,9 +5,9 @@
 // ```scss
 // @use 'theme' as daff-theme;
 //
-// $type: daff-theme.daff-map-get($theme, 'core', 'type');
+// $mode: daff-theme.daff-get-theme-mode($theme);
 //
-// @include daff-theme.light($type) {
+// @include daff-theme.light($mode) {
 //   color: blue;
 //
 //   .class {
@@ -28,9 +28,9 @@
 // ```scss
 // @use 'theme' as daff-theme;
 //
-// $type: daff-theme.daff-map-get($theme, 'core', 'type');
+// $mode: daff-theme.daff-get-theme-mode($theme);
 //
-// @include daff-theme.dark($type) {
+// @include daff-theme.dark($mode) {
 //   color: blue;
 //
 //   .class {

package/scss/theming/_theme-css-variables.scss

@@ -1,40 +1,40 @@
 @use 'sass:map';
 @use 'sass:color';
 @use '../core';
-@use '../theming';
+@use '../theming' as *;
 
 // @docs
 //
 // Global theme tokens
 @mixin daff-root-theme-tokens($theme) {
-	$base: core.daff-map-get($theme, 'core', 'base');
-	$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
-	$primary: core.daff-map-get($theme, primary);
-	$secondary: core.daff-map-get($theme, secondary);
-	$tertiary: core.daff-map-get($theme, tertiary);
-	$warn: core.daff-map-get($theme, warn);
-	$success: core.daff-map-get($theme, success);
-	$critical: core.daff-map-get($theme, critical);
-	$neutral: core.daff-map-get($theme, 'core', 'neutral');
-	$white: core.daff-map-get($theme, 'core', 'white');
-	$black: core.daff-map-get($theme, 'core', 'black');
+	$base: daff-get-base-color($theme, base);
+	$base-contrast: daff-get-base-color($theme, base-contrast);
+	$primary: daff-get-palette($theme, primary);
+	$secondary: daff-get-palette($theme, secondary);
+	$tertiary: daff-get-palette($theme, tertiary);
+	$warn: daff-get-palette($theme, warn);
+	$success: daff-get-palette($theme, success);
+	$critical: daff-get-palette($theme, critical);
+	$neutral: daff-get-palette($theme, neutral);
+	$white: daff-get-base-color($theme, 'white');
+	$black: daff-get-base-color($theme, 'black');
 
 	--daff-theme-rgb: #{color.red($base), color.green($base), color.blue($base)};
 	--daff-theme-contrast-rgb: #{color.red($base-contrast), color.green($base-contrast),
 		color.blue($base-contrast)};
 	--daff-theme: #{$base};
 	--daff-theme-contrast: #{$base-contrast};
-	--daff-theme-primary: #{theming.daff-color($primary)};
-	--daff-theme-secondary: #{theming.daff-color($secondary)};
-	--daff-theme-tertiary: #{theming.daff-color($tertiary)};
-	--daff-theme-warn: #{theming.daff-color($warn)};
-	--daff-theme-success: #{theming.daff-color($success)};
-	--daff-theme-critical: #{theming.daff-color($critical)};
+	--daff-theme-primary: #{daff-color($primary)};
+	--daff-theme-secondary: #{daff-color($secondary)};
+	--daff-theme-tertiary: #{daff-color($tertiary)};
+	--daff-theme-warn: #{daff-color($warn)};
+	--daff-theme-success: #{daff-color($success)};
+	--daff-theme-critical: #{daff-color($critical)};
 	--daff-theme-white: #{$white};
 	--daff-theme-black: #{$black};
-	--daff-theme-gray: #{theming.daff-color($neutral)};
+	--daff-theme-gray: #{daff-color($neutral)};
 	--daff-base-bg: #{$base};
-	--daff-base-text: #{theming.daff-text-contrast($base)};
+	--daff-base-text: #{daff-text-contrast($base)};
 }
 
 @mixin daff-theme-css-variables($theme) {