@daffodil/design 0.60.0 → 0.62.0

package/src/atoms/button/button-theme.scss

@@ -6,7 +6,7 @@
 @use './button-theme-variants/raised';
 @use './button-theme-variants/stroked';
 @use './button-theme-variants/underline';
-@use './button-theme-variants/focus';
+@use './button-theme-variants/flat';
 
 @mixin daff-button-theme($theme) {
 	$primary: map.get($theme, primary);
@@ -52,8 +52,8 @@
 		&.daff-black {
 			@include button.daff-button-theme-variant(
 				$black,
-				theming.daff-color($gray, 100),
-				theming.daff-color($gray, 90)
+				theming.daff-color($gray, 90),
+				theming.daff-color($gray, 80)
 			);
 		}
 
@@ -81,7 +81,8 @@
 			);
 		}
 
-		&[disabled] {
+		&[disabled],
+		&.daff-button--disabled {
 			@include button.daff-button-theme-variant(
 				theming.daff-illuminate($base, $gray, 3),
 				theming.daff-illuminate($base, $gray, 3),
@@ -121,101 +122,69 @@
 
 	.daff-raised-button {
 		@include raised.daff-raised-button-theme-variant(
-			theming.daff-illuminate($base, $gray, 2),
-			theming.daff-illuminate($base, $gray, 3),
-			theming.daff-color($gray)
+			theming.daff-illuminate($base, $gray, 2)
 		);
 
 		&.daff-primary {
 			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color($primary),
-				theming.daff-color($primary, 70),
 				theming.daff-color($primary)
 			);
 		}
 
 		&.daff-secondary {
 			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color($secondary),
-				theming.daff-color($secondary, 70),
 				theming.daff-color($secondary)
 			);
 		}
-		
+
 		&.daff-tertiary {
 			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color($tertiary),
-				theming.daff-color($tertiary, 70),
 				theming.daff-color($tertiary)
 			);
 		}
 
 		&.daff-black {
-			@include raised.daff-raised-button-theme-variant(
-				$black,
-				theming.daff-color($gray, 100),
-				theming.daff-color($gray)
-			);
+			@include raised.daff-raised-button-theme-variant($black);
 		}
 
 		&.daff-white {
-			@include raised.daff-raised-button-theme-variant(
-				$white,
-				theming.daff-color($gray, 10),
-				theming.daff-color($gray)
-			);
+			@include raised.daff-raised-button-theme-variant($white);
 		}
 
 		&.daff-theme {
-			@include raised.daff-raised-button-theme-variant(
-				$base,
-				theming.daff-illuminate($base, $gray, 1),
-				$base
-			);
+			@include raised.daff-raised-button-theme-variant($base);
 		}
 
 		&.daff-theme-contrast {
-			@include raised.daff-raised-button-theme-variant(
-				$base-contrast,
-				theming.daff-illuminate($base-contrast, $gray, 1),
-				$base-contrast
-			);
+			@include raised.daff-raised-button-theme-variant($base-contrast);
 		}
 
-		&[disabled] {
+		&[disabled],
+		&.daff-button--disabled {
 			@include raised.daff-raised-button-theme-variant(
-				theming.daff-illuminate($base, $gray, 3),
-				theming.daff-illuminate($base, $gray, 3),
-				theming.daff-illuminate($base, $gray, 6)
+				theming.daff-illuminate($base, $gray, 3)
 			);
 			color: theming.daff-illuminate($base, $gray, 5);
 
-			&:hover {
-				box-shadow: 0 3px 5px rgba($black, 0.12), 0 1px 3px rgba($black, 0.08);
-				color: theming.daff-illuminate($base, $gray, 5);
+			&:after {
+				box-shadow: none;
 			}
 		}
 
 		&.daff-warn {
 			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color(theming.$daff-bronze, 60),
-				theming.daff-color(theming.$daff-bronze, 70),
 				theming.daff-color(theming.$daff-bronze, 60)
 			);
 		}
 
 		&.daff-danger {
 			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color(theming.$daff-red, 60),
-				theming.daff-color(theming.$daff-red, 70),
 				theming.daff-color(theming.$daff-red, 60)
 			);
 		}
 
 		&.daff-success {
 			@include raised.daff-raised-button-theme-variant(
-				theming.daff-color(theming.$daff-green, 60),
-				theming.daff-color(theming.$daff-green, 70),
 				theming.daff-color(theming.$daff-green, 60)
 			);
 		}
@@ -283,8 +252,9 @@
 				theming.daff-illuminate($base-contrast, $gray, 2)
 			);
 		}
-z
-		&[disabled] {
+
+		&[disabled],
+		&.daff-button--disabled {
 			@include icon.daff-icon-button-theme-variant(
 				theming.daff-illuminate($base, $gray, 4),
 				theming.daff-illuminate($base, $gray, 4),
@@ -322,13 +292,15 @@ z
 	}
 
 	.daff-stroked-button {
-		background-color: transparent;
+		background: transparent;
 		border: 1px solid theming.daff-illuminate($base, $gray, 5);
-		color: theming.daff-text-contrast($base);
+		color: currentColor;
 
-		&:hover,
-		&:focus {
-			background-color: theming.daff-illuminate($base, $gray, 2);
+		&:after {
+			background: theming.daff-illuminate($base, $gray, 2);
+		}
+
+		&:hover {
 			border: 1px solid theming.daff-illuminate($base, $gray, 2);
 			color: theming.daff-text-contrast(
 				theming.daff-illuminate($base, $gray, 2)
@@ -336,16 +308,18 @@ z
 		}
 
 		&:active {
-			background-color: theming.daff-illuminate($base, $gray, 3);
 			border: 1px solid theming.daff-illuminate($base, $gray, 3);
 			color: theming.daff-text-contrast(
 				theming.daff-illuminate($base, $gray, 3)
 			);
+
+			&:after {
+				background: theming.daff-illuminate($base, $gray, 3);
+			}
 		}
 
 		&.daff-primary {
 			@include stroked.daff-stroked-button-theme-variant(
-				theming.daff-color($primary),
 				theming.daff-color($primary),
 				theming.daff-color($primary, 70)
 			);
@@ -353,7 +327,6 @@ z
 
 		&.daff-secondary {
 			@include stroked.daff-stroked-button-theme-variant(
-				theming.daff-color($secondary),
 				theming.daff-color($secondary),
 				theming.daff-color($secondary, 70)
 			);
@@ -361,7 +334,6 @@ z
 
 		&.daff-tertiary {
 			@include stroked.daff-stroked-button-theme-variant(
-				theming.daff-color($tertiary),
 				theming.daff-color($tertiary),
 				theming.daff-color($tertiary, 70)
 			);
@@ -369,7 +341,6 @@ z
 
 		&.daff-black {
 			@include stroked.daff-stroked-button-theme-variant(
-				$black,
 				$black,
 				theming.daff-color($gray, 100)
 			);
@@ -377,7 +348,6 @@ z
 
 		&.daff-white {
 			@include stroked.daff-stroked-button-theme-variant(
-				$white,
 				$white,
 				theming.daff-color($gray, 20)
 			);
@@ -385,7 +355,6 @@ z
 
 		&.daff-theme {
 			@include stroked.daff-stroked-button-theme-variant(
-				$base,
 				$base,
 				theming.daff-illuminate($base, $gray, 2)
 			);
@@ -393,28 +362,29 @@ z
 
 		&.daff-theme-contrast {
 			@include stroked.daff-stroked-button-theme-variant(
-				$base-contrast,
 				$base-contrast,
 				theming.daff-illuminate($base-contrast, $gray, 2)
 			);
 		}
 
-		&[disabled] {
-			@include stroked.daff-stroked-button-theme-variant(
-				theming.daff-illuminate($base, $gray, 3),
-				theming.daff-illuminate($base, $gray, 5),
-				transparent
-			);
+		&[disabled],
+		&.daff-button--disabled {
+			background-color: transparent;
+			border-color: theming.daff-illuminate($base, $gray, 3);
+			color: theming.daff-illuminate($base, $gray, 5);
 
 			&:hover {
-				background-color: transparent;
 				color: theming.daff-illuminate($base, $gray, 5);
+
+				&:after {
+					background-color: transparent;
+					opacity: 0;
+				}
 			}
 		}
 
 		&.daff-warn {
 			@include stroked.daff-stroked-button-theme-variant(
-				theming.daff-color(theming.$daff-bronze, 60),
 				theming.daff-color(theming.$daff-bronze, 60),
 				theming.daff-color(theming.$daff-bronze, 70)
 			);
@@ -422,7 +392,6 @@ z
 
 		&.daff-danger {
 			@include stroked.daff-stroked-button-theme-variant(
-				theming.daff-color(theming.$daff-red, 60),
 				theming.daff-color(theming.$daff-red, 60),
 				theming.daff-color(theming.$daff-red, 70)
 			);
@@ -430,139 +399,174 @@ z
 
 		&.daff-success {
 			@include stroked.daff-stroked-button-theme-variant(
-				theming.daff-color(theming.$daff-green, 60),
 				theming.daff-color(theming.$daff-green, 60),
 				theming.daff-color(theming.$daff-green, 70)
 			);
 		}
 	}
 
-	.daff-underline-button {
-		@include underline.daff-underline-button-theme-variant(
-			theming.daff-illuminate($base, $gray, 7)
-		);
+	.daff-flat-button {
+		color: currentColor;
+
+		&:after {
+			background-color: theming.daff-illuminate($base, $gray, 2);
+		}
+
+		&:active {
+			&:after {
+				background-color: theming.daff-illuminate($base, $gray, 3);
+			}
+		}
+
+		&:hover,
+		&:active {
+			color: theming.daff-text-contrast(theming.daff-illuminate($base, $gray, 2));
+		}
 
 		&.daff-primary {
-			@include underline.daff-underline-button-theme-variant(
-				theming.daff-color($primary)
+			@include flat.daff-flat-button-theme-variant(
+				theming.daff-color($primary),
+				theming.daff-color($primary, 70)
 			);
 		}
 
 		&.daff-secondary {
-			@include underline.daff-underline-button-theme-variant(
-				theming.daff-color($secondary)
+			@include flat.daff-flat-button-theme-variant(
+				theming.daff-color($secondary),
+				theming.daff-color($secondary, 70)
 			);
 		}
 
 		&.daff-tertiary {
-			@include underline.daff-underline-button-theme-variant(
-				theming.daff-color($tertiary)
+			@include flat.daff-flat-button-theme-variant(
+				theming.daff-color($tertiary),
+				theming.daff-color($tertiary, 70)
 			);
 		}
 
 		&.daff-black {
-			@include underline.daff-underline-button-theme-variant($black);
+			@include flat.daff-flat-button-theme-variant(
+				$black,
+				theming.daff-color($gray, 100)
+			);
 		}
 
 		&.daff-white {
-			@include underline.daff-underline-button-theme-variant($white);
+			@include flat.daff-flat-button-theme-variant(
+				$white,
+				theming.daff-color($gray, 20)
+			);
 		}
 
 		&.daff-theme {
-			@include underline.daff-underline-button-theme-variant($base);
+			@include flat.daff-flat-button-theme-variant(
+				$base,
+				theming.daff-illuminate($base, $gray, 2)
+			);
 		}
 
 		&.daff-theme-contrast {
-			@include underline.daff-underline-button-theme-variant($base-contrast);
+			@include flat.daff-flat-button-theme-variant(
+				$base-contrast,
+				theming.daff-illuminate($base-contrast, $gray, 2)
+			);
 		}
 
-		&[disabled] {
-			@include underline.daff-underline-button-theme-variant(
-				theming.daff-illuminate($base, $gray, 4)
-			);
+		&[disabled],
+		&.daff-button--disabled {
+			color: theming.daff-illuminate($base, $gray, 5);
+
+			&:hover,
+			&:focus,
+			&:active {
+				&:after {
+					background: transparent;
+				}
+			}
 		}
 
 		&.daff-warn {
-			@include underline.daff-underline-button-theme-variant(
-				theming.daff-color(theming.$daff-bronze, 60)
+			@include flat.daff-flat-button-theme-variant(
+				theming.daff-color(theming.$daff-bronze, 60),
+				theming.daff-color(theming.$daff-bronze, 70)
 			);
 		}
 
 		&.daff-danger {
-			@include underline.daff-underline-button-theme-variant(
-				theming.daff-color(theming.$daff-red, 60)
+			@include flat.daff-flat-button-theme-variant(
+				theming.daff-color(theming.$daff-red, 60),
+				theming.daff-color(theming.$daff-red, 70)
 			);
 		}
 
 		&.daff-success {
-			@include underline.daff-underline-button-theme-variant(
-				theming.daff-color(theming.$daff-green, 60)
+			@include flat.daff-flat-button-theme-variant(
+				theming.daff-color(theming.$daff-green, 60),
+				theming.daff-color(theming.$daff-green, 70)
 			);
 		}
 	}
 
-	.daff-button,
-	.daff-stroked-button,
-	.daff-underline-button,
-	.daff-icon-button {
-		@include focus.daff-button-focus-theme-variant(
-			theming.daff-color($gray)
+	.daff-underline-button {
+		@include underline.daff-underline-button-theme-variant(
+			theming.daff-illuminate($base, $gray, 7)
 		);
 
 		&.daff-primary {
-			@include focus.daff-button-focus-theme-variant(
+			@include underline.daff-underline-button-theme-variant(
 				theming.daff-color($primary)
 			);
 		}
 
 		&.daff-secondary {
-			@include focus.daff-button-focus-theme-variant(
+			@include underline.daff-underline-button-theme-variant(
 				theming.daff-color($secondary)
 			);
 		}
 
 		&.daff-tertiary {
-			@include focus.daff-button-focus-theme-variant(
+			@include underline.daff-underline-button-theme-variant(
 				theming.daff-color($tertiary)
 			);
 		}
 
 		&.daff-black {
-			@include focus.daff-button-focus-theme-variant(
-				theming.daff-color($gray)
-			);
+			@include underline.daff-underline-button-theme-variant($black);
 		}
 
 		&.daff-white {
-			@include focus.daff-button-focus-theme-variant(
-				theming.daff-color($gray)
-			);
+			@include underline.daff-underline-button-theme-variant($white);
 		}
 
 		&.daff-theme {
-			@include focus.daff-button-focus-theme-variant($base);
+			@include underline.daff-underline-button-theme-variant($base);
 		}
 
 		&.daff-theme-contrast {
-			@include focus.daff-button-focus-theme-variant(
-				theming.daff-color($gray)
+			@include underline.daff-underline-button-theme-variant($base-contrast);
+		}
+
+		&[disabled],
+		&.daff-button--disabled {
+			@include underline.daff-underline-button-theme-variant(
+				theming.daff-illuminate($base, $gray, 4)
 			);
 		}
 
 		&.daff-warn {
-			@include focus.daff-button-focus-theme-variant(
+			@include underline.daff-underline-button-theme-variant(
 				theming.daff-color(theming.$daff-bronze, 60)
 			);
 		}
 
 		&.daff-danger {
-			@include focus.daff-button-focus-theme-variant(
+			@include underline.daff-underline-button-theme-variant(
 				theming.daff-color(theming.$daff-red, 60)
 			);
 		}
 
 		&.daff-success {
-			@include focus.daff-button-focus-theme-variant(
+			@include underline.daff-underline-button-theme-variant(
 				theming.daff-color(theming.$daff-green, 60)
 			);
 		}

package/src/atoms/form/{select → native-select}/README.md

@@ -1,4 +1,4 @@
-# Select Component
+# Native Select Component
 
 `daff-native-select` is a form control element that can be used in forms to select a value from a set of options.
 

package/src/atoms/form/{select/select/select-theme.scss → native-select/native-select-theme.scss}

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '../../../../../scss/core';
-@use '../../../../../scss/theming';
+@use '../../../../scss/core';
+@use '../../../../scss/theming';
 
-@mixin daff-select-theme($theme) {
+@mixin daff-native-select-theme($theme) {
 	$gray: core.daff-map-deep-get($theme, 'core.gray');
 	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
 	$black: core.daff-map-deep-get($theme, 'core.black');

package/src/atoms/loading-icon/loading-icon-theme.scss

@@ -12,6 +12,10 @@
 	$black: core.daff-map-deep-get($theme, 'core.black');
 
 	.daff-loading-icon {
+		circle {
+			stroke: currentColor;
+		}
+
 		&.daff-primary {
 			circle {
 				stroke: theming.daff-color($primary);

package/src/molecules/sidebar/README.md

@@ -8,3 +8,13 @@
     <p>Some Content</p>
 </daff-sidebar-viewport>
 ```
+
+
+### Goals
+
+1. Support position sticky inside sidebar content
+2. Support 1 sidebar at a time on each side
+3. Support viewports inside of other viewports.
+4. A `global` flag that can be set to use `dvh`
+5. Sidebars as the window size changes from `side` to `over` and vice-versa by default.
+6. Where does the body scrollbar start and end? Does it hit the header of go to the top of the document.

package/src/molecules/sidebar/helper/_variables.scss

@@ -0,0 +1,7 @@
+// Stacking Context Layers
+$daff-sidebar-sidebar-over-z-index: 5;
+$daff-sidebar-backdrop-z-index: 4;
+$daff-sidebar-sidebar-side-fixed-z-index: 4;
+$daff-sidebar-content-z-index: 3;
+$daff-sidebar-sidebar-under-z-index: 2;
+$daff-sidebar-viewport-z-index: 1;

package/src/molecules/sidebar/sidebar/sidebar-theme.scss

@@ -2,12 +2,12 @@
 
 @mixin daff-sidebar-theme($theme) {
 	$base: core.daff-map-deep-get($theme, 'core.base');
-	$base-contrast: core.daff-map-deep-get($theme, "core.base-contrast");
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
 	$black: core.daff-map-deep-get($theme, 'core.black');
+	$font-color: core.daff-map-deep-get($theme, 'core.font-color');
 
 	.daff-sidebar {
 		background: $base;
-		box-shadow: 6px 1px 9px 0 rgba($black, 0.1);
-		color: $base-contrast;
+		color: $font-color;
 	}
 }

package/src/molecules/sidebar/sidebar-viewport/sidebar-viewport-theme.scss

@@ -7,5 +7,10 @@
 	.daff-sidebar-viewport {
 		background: $base;
 		color: $base-contrast;
+
+		&__content {
+			background: $base;
+			color: $base-contrast;
+		}
 	}
 }

package/tree/README.md

@@ -0,0 +1,38 @@
+# Tree
+
+Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.
+
+## Overview
+
+The `DaffTreeComponent` renders a tree structure. Typically, this is a structure of `<a>` and `<button>` elements that allow users to either navigate to a page, or explore the tree to find an item inside the tree that they want to navigate to.
+
+Instead of defining a recursive tree structure of components, which is often prohibitively slow when rendering large trees, the `DaffTreeComponent` renders a flattened tree, using padding to indicate the nesting level of the tree elements.
+
+Generally, tree usage consists of taking existing tree data, converting it to the `DaffTreeData` format, setting the `tree` input on the `DaffTreeComponent`, and providing templates for the cases where the tree element has children or not.
+
+## Features
+
+The `DaffTreeComponent` controls the rendering of the structure of the tree and provides template slots so that you can control the ultimate UI rendered for each node.
+
+Currently, we support two kind of templates `daffTreeItemWithChildrenTpl` and `daffTreeItemTpl`. These templates allow you to control the content of each tree node. In the case of `daffTreeItemWithChildrenTpl` a `click` handler will be automatically applied (along with an icon indicating the expanded state) to the template to allow users to automatically open and close the node.
+
+```html
+<ng-template #daffTreeItemWithChildrenTpl let-node>
+  <button daffTreeItem [node]="node">{{ node.title }} </button>
+</ng-template>
+
+<ng-template #daffTreeItemTpl let-node>
+  <a daffTreeItem [node]="node" [routerLink]="node.url">{{ node.title }}</a>
+</ng-template>
+```
+
+## Usage
+
+### Basic Tree
+
+<design-land-example-viewer-container example="basic-tree">
+</design-land-example-viewer-container>
+
+## Accessibility
+
+The `DaffTreeComponent` follows the specification for a [disclosure navigation menu](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/) instead of a [tree view](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).

package/tree/daffodil-design-tree.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@daffodil/design/tree" />
+export * from './index';

package/tree/examples/basic-tree/basic-tree.component.d.ts

@@ -0,0 +1,7 @@
+import { DaffTreeData } from '@daffodil/design/tree';
+import * as i0 from "@angular/core";
+export declare class BasicTreeComponent {
+    tree: DaffTreeData<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicTreeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicTreeComponent, "basic-tree", never, {}, {}, never, never>;
+}

package/tree/examples/basic-tree/basic-tree.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./basic-tree.component";
+import * as i2 from "@angular/router";
+import * as i3 from "@daffodil/design/tree";
+import * as i4 from "@fortawesome/angular-fontawesome";
+export declare class BasicTreeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicTreeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BasicTreeModule, [typeof i1.BasicTreeComponent], [typeof i2.RouterModule, typeof i3.DaffTreeModule, typeof i4.FontAwesomeModule], [typeof i1.BasicTreeComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<BasicTreeModule>;
+}

package/tree/examples/daffodil-design-tree-examples.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@daffodil/design/tree/examples" />
+export * from './index';

package/tree/examples/index.d.ts

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

package/tree/examples/package.json

@@ -0,0 +1 @@
+{"name":"@daffodil/design/tree/examples","module":"../../fesm2015/daffodil-design-tree-examples.mjs","es2020":"../../fesm2020/daffodil-design-tree-examples.mjs","esm2020":"../../esm2020/tree/examples/daffodil-design-tree-examples.mjs","fesm2020":"../../fesm2020/daffodil-design-tree-examples.mjs","fesm2015":"../../fesm2015/daffodil-design-tree-examples.mjs","typings":"daffodil-design-tree-examples.d.ts","sideEffects":false,"version":"0.62.0"}

package/tree/examples/public_api.d.ts

@@ -0,0 +1,4 @@
+import { BasicTreeComponent } from './basic-tree/basic-tree.component';
+export { BasicTreeModule } from './basic-tree/basic-tree.module';
+export { BasicTreeComponent };
+export declare const TREE_EXAMPLES: (typeof BasicTreeComponent)[];

package/tree/index.d.ts

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

package/tree/interfaces/recursive-key.d.ts

@@ -0,0 +1,3 @@
+export declare type RecursiveTreeKeyOfType<T> = keyof {
+    [P in keyof T as T[P] extends T[] ? P : never]: T[];
+};