@daffodil/design 0.81.1 → 0.83.0

package/scss/theme.scss

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

package/scss/theming/_configure-theme.scss

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

package/scss/theming/_index.scss

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

package/scss/theming/_light-dark.scss

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

package/sidebar/README.md

@@ -10,10 +10,11 @@ Sidebars are often used for navigation, but it's built to be flexible and extens
 To use sidebar in a standalone component, import `DAFF_SIDEBAR_COMPONENTS` directly into your custom component:
 
 ```ts
+import { DAFF_SIDEBAR_COMPONENTS } from '@daffodil/design/sidebar';
+
 @Component({
   selector: 'custom-component',
   templateUrl: './custom-component.component.html',
-  standalone: true,
   imports: [
     DAFF_SIDEBAR_COMPONENTS,
   ],
@@ -26,8 +27,8 @@ To use sidebar in a module, import `DaffSidebarModule` into your custom module:
 
 ```ts
 import { NgModule } from '@angular/core';
-
 import { DaffSidebarModule } from '@daffodil/design/sidebar';
+import { CustomComponent } from './custom.component';
 
 @NgModule({
 	declarations: [
@@ -45,6 +46,9 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
+### Required imports
+The `BrowserAnimationsModule` or `NoopAnimationsModule` must be imported in the particular Angular `@NgModule` the sidebar is used in for the sidebar to render and work properly.
+
 ## Basic sidebar
 The default setting for sidebar is `mode="side"` and `side="left"`.
 
@@ -53,6 +57,8 @@ The default setting for sidebar is `mode="side"` and `side="left"`.
 ## Implementing the main and sidebar content
 The main and sidebar content should be placed inside of the `<daff-sidebar-viewport>`. The sidebar content should be placed inside of the `<daff-sidebar>`.
 
+> The sidebar viewport should only ever be used once in an application, but it's possible for there to be multiple sidebars of many modes at the same time.
+
 A viewport navigation can either be:
 
 - Placed alongside the `<daff-sidebar>` using the `[daff-sidebar-viewport-nav]` selector.
@@ -91,9 +97,6 @@ A viewport navigation can either be:
 </daff-sidebar-viewport>
 ```
 
-### Required Imports
-The `BrowserAnimationsModule` or `NoopAnimationsModule` must be imported in the particular Angular `@NgModule` the sidebar is used in for the sidebar to render and work properly.
-
 ## Header and footer
 The `<daff-sidebar-header>` includes optional title (`[daffSidebarHeaderTitle]`) and action (`[daffSidebarHeaderAction]`) selectors, and a slot to render custom content. The action selector should be used along with the `<daff-icon-button>` (view [Button Documentation](/libs/design/button/README.md)) to make sure that the action is positioned correctly and it passes WCAG guidelines.
 
@@ -101,24 +104,20 @@ The `<daff-sidebar-footer>` is a "holder" component with minimal default styling
 
 Both the header and footer are optional components that will not render in the DOM if they are not used.
 
-## Opening and closing a sidebar
-THe `open` property is used to set the open state for a sidebar.
-
-By default, sidebar supports two methods of closing itself: clicking on the backdrop of the sidebar viewport or pressing `ESC` when the sidebar has focus.
+## Closing a sidebar
+A sidebar can be closed by clicking on the backdrop, using the escape key, or clicking on the close button in the sidebar header.
 
-| Method              | ------------------------------------ |
-| `(backdropClicked)` | Set on the `<daff-sidebar-viewport>` |
-| `(escapePressed)`   | Set on the `<daff-sidebar>`          |
+> Note:  The close button is hidden by default. To make it visible, set the `dismissible` property on the sidebar header to `true`.
 
 ## Modes
-`<daff-sidebar>` can be rendered four different ways by using the `mode` property. If `mode` is not specified, `side` is used by default.
+A sidebar can be rendered four different ways by using the `mode` property. If `mode` is not specified, `side` is used by default.
 
 | Mode       | Description                                                                                          |
 | ---------- | ---------------------------------------------------------------------------------------------------- |
-| side       | Sidebar is placed alongside the content                                                              |
-| side-fixed | Sidebar is placed alongside the content and will scroll separately from the content                  |
-| over       | Sidebar slides over the rest of the content in the viewport and covering it with a backdrop          |
-| under      | Sidebar freezes in place and and the content slides above it, while also being covered by a backdrop |
+| side       | Displays the sidebar alongside the main content.                                                              |
+| side-fixed | Displays the sidebar alongside the content, but the sidebar remains fixed in place and scrolls independently from the content.                  |
+| over       | The sidebar slides over the main content when open, temporarily covering part of the content when active.          |
+| under      | The sidebar remains fixed in place while the main content slides over it when the sidebar is closed. |
 
 ### Over sidebar
 <design-land-example-viewer-container example="over-sidebar"></design-land-example-viewer-container>
@@ -133,7 +132,7 @@ By default, sidebar supports two methods of closing itself: clicking on the back
 <design-land-example-viewer-container example="fixed-and-over-sidebar"></design-land-example-viewer-container>
 
 ## Sides
-`<daff-sidebar>` can be positioned on either side of a screen by using the `side` property. If `side` is not specificed, `left` is used by default.
+A sidebar can be positioned on either side of a screen by using the `side` property. If `side` is not specificed, `left` is used by default.
 
 | Side  | Description                                    |
 | ----- | ---------------------------------------------- |
@@ -168,7 +167,7 @@ daff-sidebar-viewport {
 }
 ```
 
-## Changing a side-fixed sidebar's top offset position
+## Changing a side- fixed sidebar's top offset position
 The default offset position of a sidebar is `0px`. The `--daff-sidebar-side-fixed-top-shift` variable can be used to adjust the top offset position for a primary sidebar and its viewport content.
 
 ```scss
@@ -187,7 +186,7 @@ body {
 ## Accessibility
 A meaningful `role` should be set on all sidebars depending on how they are used.
 
-When the `<daff-sidebar-header>` is not used or there is no title for the sidebar, a meaningful `aria-label` should be set to describe the sidebar.
+When a sidebar header is not used or there is no title for the sidebar, a meaningful `aria-label` should be set to describe the sidebar.
 
 ### Focus
-Focus trapping is enabled for `over` and `under` modes, and disabled for `side` and `side-fixed` modes. When a sidebar is opened, the first tabbable element within the will receive focus. When a sidebar is opened, the first tabbable element within the will receive focus. When a sidebar is closed, the element that was focused before the sidebar was opened will be re-focused.
+Focus trapping is enabled for `over` and `under` modes, and disabled for `side` and `side-fixed` modes. When a sidebar is opened, the first tabbable element within the sidebar will receive focus. When a sidebar is closed, the element that was focused before the sidebar was opened will be re-focused.

package/sidebar/helper/sidebar-mode.d.ts

@@ -1,23 +1,17 @@
 /**
- * The various modes that a DaffSidebar can be in.
+ * The available display modes for the `DaffSidebarComponent`.
  *
- * * `side` is a mode that allows you to place the sidebar alongside
- *    the content.
- *
- * * `side-fixed` is a mode that allows you want to place the sidebar
- *    alongside the content, however the sidebar will scroll separately
- *    from the content.
- *
- * * `over` is a mode which allows the sidebar to slide *over* the rest of
- *    the content in the viewport.
- *
- * * `under` is a mode that freezes the sidebar in place and allows the content
- *   slide above it.
+ * | Mode | Description |
+ * | -- | -- |
+ * | `side` | Displays the sidebar alongside the main content. |
+ * | `side-fixed` | Displays the sidebar alongside the content, but the sidebar remains fixed in place and scrolls independently from the content. |
+ * | `over` | The sidebar slides over the main content when open, temporarily covering part of the content when active. |
+ * | `under` | The sidebar remains fixed in place while the main content slides over it when the sidebar is closed. |
  */
 export type DaffSidebarMode = 'side' | 'over' | 'under' | 'side-fixed';
 /**
- * A enum representing the different sidebar modes.
- * See {@link DaffSidebarMode}
+ * Enum for representing the available sidebar display modes.
+ * See {@link DaffSidebarMode} for descriptions of each mode.
  */
 export declare const enum DaffSidebarModeEnum {
     Side = "side",

package/sidebar/public_api.d.ts

@@ -1,15 +1,14 @@
 export { DaffSidebarModule } from './sidebar.module';
-export * from './service/registration.type';
-export * from './service/sidebar.service';
-export * from './sidebar-viewport/sidebar-viewport.component';
-export * from './sidebar/sidebar.component';
-export * from './sidebar-header/sidebar-header.component';
-export * from './sidebar-footer/sidebar-footer.component';
-export * from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
-export * from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
-export * from './sidebar-viewport-backdrop/sidebar-viewport-backdrop.component';
+export { DaffSidebarRegistration } from './service/registration.type';
+export { DaffSidebarService } from './service/sidebar.service';
+export { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewport.component';
+export { DaffSidebarComponent } from './sidebar/sidebar.component';
+export { DaffSidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
+export { DaffSidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
+export { DaffSidebarHeaderTitleDirective } from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
+export { DaffSidebarHeaderActionDirective } from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
 export { DaffSidebarMode, DaffSidebarModeEnum, } from './helper/sidebar-mode';
 export { DaffSidebarSide, DaffSidebarSideEnum, } from './helper/sidebar-side';
-export * from './helper/is-docked-mode';
-export * from './helper/is-floating-mode';
+export { daffSidebarIsDockedMode } from './helper/is-docked-mode';
+export { daffSidebarIsFloatingMode } from './helper/is-floating-mode';
 export { DAFF_SIDEBAR_COMPONENTS } from './sidebar';

package/sidebar/sidebar/sidebar.component.d.ts

@@ -8,9 +8,13 @@ import { DaffSidebarSide } from '../helper/sidebar-side';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
 /**
- * DaffSidebarComponent is heavily based upon the work done by the @angular/components
- * team on `mat-drawer` and `mat-sidenav`. `daff-sidebar` is intended to be
- * a simplified version (with a different design) of `mat-drawer`.
+ * DaffSidebarComponent is heavily based upon the work done by the `@angular/components`
+ * team on `mat-drawer` and `mat-sidenav`. It's intended to be a simplified version
+ * (with a different design) of `mat-drawer`.
+ *
+ * ```html
+ * <daff-sidebar></daff-sidebar>
+ * ```
  */
 export declare class DaffSidebarComponent implements DaffOpenable {
     private _elementRef;
@@ -29,6 +33,8 @@ export declare class DaffSidebarComponent implements DaffOpenable {
         'daff-sidebar': boolean;
     };
     /**
+     * @docs-private
+     *
      * The animation state of the sidebar.
      */
     get transformSidebar(): {
@@ -38,7 +44,7 @@ export declare class DaffSidebarComponent implements DaffOpenable {
         };
     };
     /**
-     * Event fired when `ESC` key is pressed when the sidebar has focus
+     * Event fired when `ESC` key is pressed when the sidebar has focus.
      */
     escapePressed: EventEmitter<void>;
     /**
@@ -50,33 +56,42 @@ export declare class DaffSidebarComponent implements DaffOpenable {
      */
     mode: DaffSidebarMode;
     /**
+     * @docs-private
+     *
      * The width of the sidebar.
      */
     get width(): number;
+    /**
+     * @docs-private
+     */
     get open(): boolean;
     constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusTrapFactory: ConfigurableFocusTrapFactory, _focusStack: DaffFocusStackService, openDirective: DaffOpenableDirective, _doc: any);
     private _focusTrap;
     /**
+     * @docs-private
+     *
      * Animation event that can be used to hook into when the transformSidebar
      * animation begins. This is used in sidebar to determine when to show the
      * visibility of the sidebar so that the animation does not jump as the element is shown.
      */
     onAnimationStart(e: AnimationEvent): void;
     /**
+     * @docs-private
+     *
      * Animation event that can be used to hook into when the
      * transformSidebar animation is complete.
      */
     onAnimationComplete(e: AnimationEvent): void;
     /**
-     * Reveal the contents of the sidebar
+     * Reveal the contents of the sidebar.
      */
     reveal(): void;
     /**
-     * Hide the contents of the sidebar
+     * Hide the contents of the sidebar.
      */
     hide(): void;
     /**
-     * Toggle the visibility of the sidebar
+     * Toggle the visibility of the sidebar.
      */
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarComponent, never>;

package/sidebar/sidebar-footer/sidebar-footer.component.d.ts

@@ -1,5 +1,16 @@
 import * as i0 from "@angular/core";
+/**
+ * Sidebar footer is a child component of the sidebar that is used to display a
+ * footer container, positioned at the bottom of a sidebar.
+ *
+ * ```html
+ * <daff-sidebar-footer></daff-sidebar-footer>
+ * ```
+ */
 export declare class DaffSidebarFooterComponent {
+    /**
+     * @docs-private
+     */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarFooterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarFooterComponent, "daff-sidebar-footer", never, {}, {}, never, ["*"], true, never>;

package/sidebar/sidebar-header/sidebar-header-title/sidebar-header-title.directive.d.ts

@@ -1,4 +1,12 @@
 import * as i0 from "@angular/core";
+/**
+ * Sidebar header title is a child directive of `DaffSidebarHeaderComponent`
+ * that can be used to provide a title for the sidebar.
+ *
+ * ```html
+ * <div daffSidebarHeaderTitle>Title</div>
+ * ```
+ */
 export declare class DaffSidebarHeaderTitleDirective {
     /**
      * @docs-private

package/sidebar/sidebar-header/sidebar-header.component.d.ts

@@ -1,14 +1,32 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
+/**
+ * Sidebar header is a child component of the sidebar that is used to display a header container,
+ * positioned at the top of a sidebar. It includes an optional title (`[daffSidebarHeaderTitle]`)
+ * slot and a slot to render any custom content.
+ *
+ * ```html
+ * <daff-sidebar-header></daff-sidebar-header>
+ * ```
+ */
 export declare class DaffSidebarHeaderComponent {
+    /**
+     * @docs-private
+     */
     faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    /**
+     * @docs-private
+     */
     class: boolean;
-    /** Whether or not a sidebar header displays the close icon */
+    /** Whether or not a sidebar header should display the close icon. */
     dismissible: boolean;
     /**
      * Output event triggered when the close icon is clicked.
      */
     closeSidebar: EventEmitter<void>;
+    /**
+     * @docs-private
+     */
     onCloseSidebar(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarHeaderComponent, "daff-sidebar-header", never, { "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closeSidebar": "closeSidebar"; }, never, ["*"], true, never>;

package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts

@@ -5,23 +5,19 @@ import { DaffSidebarScroll } from './scroll-token/scroll.token';
 import { DaffSidebarViewportAnimationStateWithParams } from '../animation/sidebar-viewport-animation-state';
 import * as i0 from "@angular/core";
 /**
- * The DaffSidebarViewportComponent is the "holder" of sidebars throughout an entire application.
+ * DaffSidebarViewportComponent serves as the container for managing sidebars across an entire application.
+ * Because it's a functional component, it supports multiple simultaneously open sidebar and is designed to
+ * handle these scenarios gracefully.
  *
- * `<daff-sidebar-viewport>` should only ever be used once in an application,
- * but it's possible for there to be multiple sidebars of many modes
- * at the same time. See {@link DaffSidebarMode}.
+ * > However, there is one key contraint: only one sidebar per **mode** is allowed
+ * on each **side** (e.g., left or right) at any given time.
  *
- * Since this is a functional component, it's possible to have multiple "open" sidebars
- * at the same time. As a result, this component attempts to gracefully handle these situations.
- * However, importantly, there can only be one sidebar of each mode, on each side, at any given time.
+ * If this constraint is violated, the component will throw an exception to prevent unintended behavior.
  *
- * If this is violated, this component will throw an exception.
- *
- * @example Using the sidebar viewport
  * ```html
  * <daff-sidebar-viewport>
  *    <daff-sidebar></daff-sidebar>
- *    <p>Site content</p>
+ *    <div>Site content</div>
  * </daff-sidebar-viewport>
  * ```
  */
@@ -31,19 +27,33 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
     private bodyScroll;
     private parentViewport;
     private scroll;
+    /**
+     * @docs-private
+     */
     hostClass: boolean;
+    /**
+     * @docs-private
+     */
     get classes(): {
         [x: string]: boolean;
         'daff-sidebar-viewport': boolean;
         'pad-left': boolean;
         'pad-right': boolean;
     };
+    /**
+     * @docs-private
+     */
     get isNavOnSide(): boolean;
+    /**
+     * @docs-private
+     */
     onContentAnimationStart(e: AnimationEvent): void;
+    /**
+     * @docs-private
+     */
     onContentAnimationDone(e: AnimationEvent): void;
     /**
-     * The placement of the nav in relation to the sidebar. The default is set to `top`.
-     * Note that this is really only available when there is a `side-fixed` sidebar.
+     * The placement of the nav in relation to the sidebar. Note that this is really only available when there is a `side-fixed` sidebar.
      */
     navPlacement: DaffNavPlacement;
     constructor(cdRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, bodyScroll: DaffSidebarScroll, parentViewport: any, scroll: DaffSidebarScroll);
@@ -61,10 +71,14 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
     private _isPaddedLeft;
     private _isPaddedRight;
     /**
+     * @docs-private
+     *
      * Whether or not the backdrop is interactable
      */
     _backdropInteractable: boolean;
     /**
+     * @docs-private
+     *
      * The animation state
      */
     _animationState: DaffSidebarViewportAnimationStateWithParams;
@@ -72,7 +86,13 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
      * Event fired when the backdrop is clicked. This is often used to close the sidebar.
      */
     backdropClicked: EventEmitter<void>;
+    /**
+     * @docs-private
+     */
     ngAfterContentChecked(): void;
+    /**
+     * @docs-private
+     */
     ngOnDestroy(): void;
     /**
      * @docs-private
@@ -83,9 +103,10 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
     private updateAnimationState;
     /**
      * @docs-private
-     * The called when the backdrop of the viewport is clicked upon.
+     *
+     * Called when the backdrop of the viewport is clicked upon.
      */
     _backdropClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarViewportComponent, [null, null, { skipSelf: true; }, { optional: true; skipSelf: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarViewportComponent, "daff-sidebar-viewport", never, { "navPlacement": { "alias": "navPlacement"; "required": false; }; }, { "backdropClicked": "backdropClicked"; }, ["sidebars"], ["[daff-sidebar-viewport-nav]", "daff-sidebar:not([side=right])", "*", "daff-sidebar[side=right]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarViewportComponent, "daff-sidebar-viewport", never, { "navPlacement": { "alias": "navPlacement"; "required": false; }; }, { "backdropClicked": "backdropClicked"; }, ["sidebars"], ["[daff-sidebar-viewport-nav]", "daff-sidebar:not([side=right])", "*", "[daff-sidebar-viewport-footer]", "daff-sidebar[side=right]"], true, never>;
 }

package/sidebar/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.d.ts

@@ -2,6 +2,9 @@ import { AnimationEvent } from '@angular/animations';
 import { EventEmitter, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class DaffSidebarViewportBackdropComponent implements OnInit {
+    /**
+     * @docs-private
+     */
     interactableClass: boolean;
     /**
      * Determines whether or not the backdrop is transparent.
@@ -20,14 +23,28 @@ export declare class DaffSidebarViewportBackdropComponent implements OnInit {
      * Output event triggered when the backdrop is clicked.
      */
     backdropClicked: EventEmitter<void>;
+    /**
+     * @docs-private
+     */
     ngOnInit(): void;
     /**
+     * @docs-private
+     *
      * Animation hook for that controls the backdrops
      * entrance and fade animations.
      */
     get fadeBackdropTrigger(): import("./animation/backdrop-animation-state").DaffSidebarViewportBackdropAnimationState;
+    /**
+     * @docs-private
+     */
     animationDone(e: AnimationEvent): void;
+    /**
+     * @docs-private
+     */
     animationStart(e: AnimationEvent): void;
+    /**
+     * @docs-private
+     */
     onBackdropClicked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarViewportBackdropComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarViewportBackdropComponent, "daff-sidebar-viewport-backdrop", never, { "transparent": { "alias": "transparent"; "required": false; }; "interactable": { "alias": "interactable"; "required": false; }; "fullscreen": { "alias": "fullscreen"; "required": false; }; }, { "backdropClicked": "backdropClicked"; }, never, ["*"], true, never>;

package/sidebar/sidebar.d.ts

@@ -4,5 +4,7 @@ import { DaffSidebarHeaderActionDirective } from './sidebar-header/sidebar-heade
 import { DaffSidebarHeaderTitleDirective } from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
 import { DaffSidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
 import { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewport.component';
-import { DaffSidebarViewportBackdropComponent } from './sidebar-viewport-backdrop/sidebar-viewport-backdrop.component';
-export declare const DAFF_SIDEBAR_COMPONENTS: readonly [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective, typeof DaffSidebarViewportBackdropComponent];
+/**
+ * @docs-private
+ */
+export declare const DAFF_SIDEBAR_COMPONENTS: readonly [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective];