@daffodil/design 0.84.0 → 0.86.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.86.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.86.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,31 +1,33 @@
-@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);
 			}
 		}
 	}
 }
 
-@mixin skeleton-screen($width, $height) {
+@mixin skeleton-screen($width, $height, $border-radius: 0) {
 	display: flex;
 	position: relative;
+	height: $height;
+	width: $width;
+	border-radius: $border-radius;
 
 	&::before {
 		animation-name: loading;

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 {