@daffodil/design 0.87.2 → 0.88.1

package/paginator/paginator/paginator.component.d.ts

@@ -3,14 +3,6 @@ import { Params } from '@angular/router';
 import * as i0 from "@angular/core";
 export declare class DaffPaginatorComponent implements OnChanges {
     private elementRef;
-    /**
-     * @docs-private
-     */
-    class: boolean;
-    /**
-     * @docs-private
-     */
-    role: string;
     /**
      * @docs-private
      */
@@ -98,14 +90,12 @@ export declare class DaffPaginatorComponent implements OnChanges {
      * Emits a pageNumber to notifyPageChange Output.
      *
      * @docs-private
-     * @param pageNumber a page number
      */
     _onNotifyPageChange(pageNumber: number): void;
     /**
      * A simple function that determines if the given page number is the current page number.
      *
      * @docs-private
-     * @param page a page number
      */
     _isSelected(page: number): boolean;
     /**
@@ -113,7 +103,6 @@ export declare class DaffPaginatorComponent implements OnChanges {
      * so the paginator retains the same total width at the extreme page numbers (1 and numberOfPages).
      *
      * @docs-private
-     * @param pageNumber page number to check.
      */
     _showNumber(pageNumber: number): boolean;
     /**

package/progress-bar/README.md

@@ -1,6 +1,11 @@
 # Progress Bar
 A progress bar provides visual feedback about the duration or progress of a task or operation.
 
+## Overview
+Progress bars can be **determinate** (percentage known) or **indeterminate** (percentage unknown).
+
+<design-land-example-viewer-container example="progress-bar-default"></design-land-example-viewer-container>
+
 ## Usage
 
 ### Within a standalone component
@@ -43,25 +48,43 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
+## Label
+Use `<daff-progress-bar-label>` to help users understand what the progress represents. The label is automatically associated with the progress bar for accessibility via `aria-labelledby`.
+
+If no label is provided, add an `aria-label` to `<daff-progress-bar>` to ensure an accessible experience.
+
 ## Types
-There are two types of progress bars: `determinate` and `indeterminate`. They are `determinate` by default.
 
 ### Determinate
-Determinate progress bars should be used when the percentage of a task or operation is known.
-
-<design-land-example-viewer-container example="progress-bar-default"></design-land-example-viewer-container>
+Use determinate progress bars when the percentage of completion is known. This is the default type.
 
 ### Indeterminate
-Indeterminate progress bars should be used when the loading percentage of a task or operation is unknown or cannot be calculated.
+Use indeterminate progress bars when when the percentage of completion is unknown or cannot be calculated. Set the `indeterminate` property to `true`:
 
 <design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
 
-## Theming
-Use the `color` property to change the color of a progress bar. The default color is primary.
+## Colors
+The default color is `primary`. Use the `color` property to change a progress bar's color.
 
 > `theme`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
 
 <design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
 
 ## Accessibility
-The progress bar component works with the ARIA `role="progressbar"` to provide an accessible experience. A Label should always be provided by using `label[daffFormLabel]`, `aria-label`, or `aria-labelledby`.
+Progress bar implements the ARIA `role="progressbar"` pattern:
+
+- `aria-valuemin="0"` and `aria-valuemax="100"` are set by default.
+- `aria-valuenow` reflects the current progress value (not relevant for indeterminate mode).
+- `aria-labelledby` links the progress bar track to `<daff-progress-bar-label>` when present.
+
+**Best practice:** Always provide an accessible label via `<daff-progress-bar-label>` or `aria-label` so users know what the progress represents.
+
+```html
+<daff-progress-bar>
+  <daff-progress-bar-label>File upload</daff-progress-bar-label>
+</daff-progress-bar>
+```
+
+```html
+<daff-progress-bar aria-label="File upload"></daff-progress-bar>
+```

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

@@ -1,9 +1,13 @@
 import * as i0 from "@angular/core";
+/**
+ * Use label to help users understand what the progress represents.
+ *
+ * @usage
+ * ```html
+ * <daff-progress-bar-label>File upload</daff-progress-bar-label>
+ * ```
+ */
 export declare class DaffProgressBarLabelDirective {
-    /**
-     * @docs-private
-     */
-    class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffProgressBarLabelDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffProgressBarLabelDirective, "[daffProgressBarLabel]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffProgressBarLabelDirective, "daff-progress-bar-label", never, {}, {}, never, never, true, never>;
 }

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

@@ -1,73 +1,77 @@
-import { AnimationEvent } from '@angular/animations';
 import { EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { DaffColorableDirective } from '@daffodil/design';
+import { DaffProgressBarLabelDirective } from './progress-bar-label/progress-bar-label.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
-export declare const clamp: (number: number, min: number, max: number) => number;
+export declare const clamp: (value: number, min: number, max: number) => number;
+/**
+ * A progress bar provides visual feedback about the duration or progress of a task or operation.
+ *
+ * @usage
+ * ```html
+ * <daff-progress-bar>
+ *  <daff-progress-bar-label>File upload</daff-progress-bar-label>
+ * </daff-progress-bar>
+ * ```
+ */
 export declare class DaffProgressBarComponent {
     private _changeDetectorRef;
     private colorable;
+    constructor(_changeDetectorRef: ChangeDetectorRef, colorable: DaffColorableDirective);
+    private _percentage;
     /**
      * @docs-private
      */
-    class: boolean;
-    /**
-     * @docs-private
-     */
-    get indeterminateClass(): boolean;
+    _label: DaffProgressBarLabelDirective;
     /**
-     * @docs-private
+     * Sets the percentage completion of the progression,
+     * expressed as a whole number between 0 and 100.
      */
-    get role(): string;
+    get percentage(): number;
+    set percentage(val: number);
     /**
      * @docs-private
      */
-    get ariaLabel(): string;
+    get ariaValueNow(): number;
     /**
      * @docs-private
      */
-    ariaValueMin: string;
+    get ariaLabelledBy(): string;
     /**
      * @docs-private
+     *
+     * The unique id of the progress bar.
      */
-    ariaValueMax: string;
+    id: string;
     /**
-     * @docs-private
+     * An `aria-label` for the progress bar.
      */
-    get ariaValueNow(): number;
-    constructor(_changeDetectorRef: ChangeDetectorRef, colorable: DaffColorableDirective);
-    private _percentage;
-    private _indeterminate;
-    /**
-     * Sets the percentage completion of the progression,
-     * expressed as a whole number between 0 and 100.
-     *
-     */
-    get percentage(): number;
-    set percentage(val: number);
+    ariaLabel: string;
     /**
      * Property to set the animation of a progress bar to
      * run for an indefinite amount of time.
      *
      * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
      **/
-    get indeterminate(): any;
-    set indeterminate(value: any);
+    indeterminate: boolean;
     /**
-     * An event that emits each time the progression reaches 100%
-     * and the animation is finished
+     * @docs-private
+     *
+     * Returns the transform style for the determinate progress bar.
      */
-    finished: EventEmitter<void>;
+    _determinateBarTransform(): string;
     /**
-     * Calculates when the progress animation is fully completed
-     *
-     * @param event: AnimationEvent
+     * An event that emits each time the progression reaches 100%
+     * and the animation is finished.
      */
-    onAnimationComplete(event: AnimationEvent): void;
+    finished: EventEmitter<void>;
     /**
      * @docs-private
+     *
+     * Handles the CSS transition end event.
      */
-    get fillState(): any;
+    onTransitionEnd(event: TransitionEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffProgressBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffProgressBarComponent, "daff-progress-bar", never, { "percentage": { "alias": "percentage"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "finished": "finished"; }, never, ["label[daffProgressBarLabel]"], true, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffProgressBarComponent, "daff-progress-bar", never, { "percentage": { "alias": "percentage"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "finished": "finished"; }, ["_label"], ["daff-progress-bar-label"], true, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
+    static ngAcceptInputType_indeterminate: unknown;
 }

package/progress-bar/public_api.d.ts

@@ -1,4 +1,4 @@
 export { DaffProgressBarModule } from './progress-bar.module';
-export * from './progress-bar.component';
-export * from './progress-bar-label/progress-bar-label.directive';
+export { DaffProgressBarComponent } from './progress-bar.component';
+export { DaffProgressBarLabelDirective } from './progress-bar-label/progress-bar-label.directive';
 export { DAFF_PROGRESS_BAR_COMPONENTS } from './progress-bar';

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

@@ -29,7 +29,17 @@ export declare class DaffQuantityFieldComponent extends DaffFormFieldControl<num
     selectMax: number;
     id: string;
     get focused(): boolean;
+    /**
+     * @docs-private
+     *
+     * TODO: Update functionality to match other control during refactor.
+     */
     disabled: boolean;
+    /**
+     * @docs-private
+     * TODO: Update functionality to match other control during refactor.
+     */
+    required: boolean;
     private _quantity;
     private _inputHasBeenShown;
     get quantity(): number;

package/scss/global.scss

@@ -25,7 +25,6 @@ html {
 	line-height: 1.5;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	--daff-sidebar-side-fixed-top-shift: 0;
 }
 
 html {

package/select/select/select.component.d.ts

@@ -3,7 +3,6 @@ import { TemplatePortal } from '@angular/cdk/portal';
 import { ChangeDetectorRef, OnInit, ElementRef, OnDestroy } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { DaffFormFieldComponent, DaffFormFieldControl, DaffOpenableDirective } from '@daffodil/design';
-import { DaffSelectAnimationState } from '../animation/state.enum';
 import { DaffSelectOptionDirective } from '../option/option.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@daffodil/design";
@@ -29,8 +28,6 @@ export declare class DaffSelectComponent<T = unknown> extends DaffFormFieldContr
     private _overlay;
     private _value;
     private _highlighted;
-    private _animationState;
-    private _animationFinishCallbackQueue;
     /**
      * @docs-private
      */
@@ -45,22 +42,23 @@ export declare class DaffSelectComponent<T = unknown> extends DaffFormFieldContr
     blur(): void;
     /**
      * @docs-private
+     *
+     * Implemented as part of DaffFormFieldControl.
      */
-    _disabled: boolean;
     disabled: boolean;
-    options: T[];
-    /**
-     * @docs-private
-     */
-    get isOpen(): boolean;
+    private _required;
     /**
      * @docs-private
+     *
+     * Implemented as part of DaffFormFieldControl.
      */
-    class: boolean;
+    get required(): boolean;
+    set required(value: boolean);
+    options: T[];
     /**
      * @docs-private
      */
-    get disabledClass(): boolean;
+    get isOpen(): boolean;
     /**
      * @docs-private
      *
@@ -88,10 +86,6 @@ export declare class DaffSelectComponent<T = unknown> extends DaffFormFieldContr
      * @docs-private
      */
     optionTemplate?: DaffSelectOptionDirective;
-    /**
-     * @docs-private
-     */
-    get animationState(): DaffSelectAnimationState;
     /**
      * @docs-private
      */
@@ -121,10 +115,6 @@ export declare class DaffSelectComponent<T = unknown> extends DaffFormFieldContr
      * @docs-private
      */
     registerOnTouched(fn: any): void;
-    /**
-     * @docs-private
-     */
-    setDisabledState(isDisabled: boolean): void;
     /**
      * @docs-private
      */
@@ -133,10 +123,6 @@ export declare class DaffSelectComponent<T = unknown> extends DaffFormFieldContr
      * @docs-private
      */
     ngOnInit(): void;
-    /**
-     * @docs-private
-     */
-    animationFinished(): void;
     /**
      * Opens the options list.
      */
@@ -165,6 +151,8 @@ export declare class DaffSelectComponent<T = unknown> extends DaffFormFieldContr
      * Highlights the previous option in the list.
      */
     highlightPrevious(event?: KeyboardEvent | MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSelectComponent<any>, [null, null, { optional: true; self: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSelectComponent<any>, "daff-select", never, { "disabled": { "alias": "disabled"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionsId": { "alias": "optionsId"; "required": false; }; }, {}, ["optionTemplate"], never, true, [{ directive: typeof i1.DaffOpenableDirective; inputs: {}; outputs: {}; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffSelectComponent<any>, [null, null, { optional: true; self: true; }, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSelectComponent<any>, "daff-select", never, { "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionsId": { "alias": "optionsId"; "required": false; }; }, {}, ["optionTemplate"], never, true, [{ directive: typeof i1.DaffOpenableDirective; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_required: unknown;
 }

package/select/select.d.ts

@@ -1,4 +1,3 @@
-import { DaffErrorMessageComponent, DaffFormLabelDirective } from '@daffodil/design';
 import { DaffSelectOptionDirective } from './option/option.directive';
 import { DaffSelectComponent } from './select/select.component';
-export declare const DAFF_SELECT_COMPONENTS: readonly [typeof DaffSelectComponent, typeof DaffSelectOptionDirective, typeof DaffErrorMessageComponent, typeof DaffFormLabelDirective];
+export declare const DAFF_SELECT_COMPONENTS: readonly [typeof DaffSelectComponent, typeof DaffSelectOptionDirective];

package/sidebar/README.md

@@ -1,8 +1,10 @@
 # Sidebar
-Sidebar is a component used to display additional information to the side of a page that may be fixed or collapsible.
+Sidebar is a component used to display additional information alongside a page.
 
 ## Overview
-Sidebars are often used for navigation, but it's built to be flexible and extensible so that it can be used for any content. Sidebar supports a header and footer component with minimal default styling.
+Sidebars are commonly used for navigation but are flexible enough to display any type of content. They include optional header and footer components with minimal styling. They can be fixed or collapsible and support multiple modes and positions.
+
+<design-land-example-viewer-container example="basic-sidebar"></design-land-example-viewer-container>
 
 ## Usage
 
@@ -47,21 +49,34 @@ 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.
+The `@angular/platform-browser/animations` `BrowserAnimationsModule` or `NoopAnimationsModule` must be imported in your application module for the sidebar to render and function properly. Without one of these imports, the sidebar component will not initialize correctly.
 
-## Basic sidebar
-The default setting for sidebar is `mode="side"` and `side="left"`.
+```ts
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-<design-land-example-viewer-container example="basic-sidebar"></design-land-example-viewer-container>
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+  ],
+})
+export class CustomComponentModule {}
+```
 
-## 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>`.
+## Anatomy
+`<daff-sidebar>` is placed inside a `<daff-sidebar-viewport>` alongside the page content. It optionally supports:
 
-> 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.
+**Header**\
+Contains an optional title (`[daffSidebarHeaderTitle]`), an optional dismiss button, and a slot for custom content. Use `<daff-sidebar-header>`.
 
-A viewport navigation can either be:
+**Footer**\
+A fixed container anchored to the bottom of the sidebar, often used for persistent actions or controls. Use `<daff-sidebar-footer>`.
 
-- Placed alongside the `<daff-sidebar>` using the `[daff-sidebar-viewport-nav]` selector.
+> `<daff-sidebar-viewport>` should only be used once per application, but multiple sidebars of different modes can exist within it.
+
+## Navigation placement
+A viewport navigation can be placed either:
+
+- Alongside the sidebar, using the `[daff-sidebar-viewport-nav]` selector:
 
 ```html
 <daff-sidebar-viewport (backdropClicked)="toggleOpen()">
@@ -79,7 +94,7 @@ A viewport navigation can either be:
 </daff-sidebar-viewport>
 ```
 
-- Placed inside of the viewport content by **omitting** the `[daff-sidebar-viewport-nav]` selector from the nav component.
+- Inside the viewport content by **omitting** the `[daff-sidebar-viewport-nav]` selector:
 
 ```html
 <daff-sidebar-viewport (backdropClicked)="toggleOpen()">
@@ -97,59 +112,48 @@ A viewport navigation can either be:
 </daff-sidebar-viewport>
 ```
 
-## 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.
-
-The `<daff-sidebar-footer>` is a "holder" component with minimal default styling. Its main purpose is to position the footer at the bottom of the sidebar, allowing the sidebar's content to overflow and scroll while ensuring that the footer remains constantly visible.
-
-Both the header and footer are optional components that will not render in the DOM if they are not used.
-
 ## 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.
-
-> Note:  The close button is hidden by default. To make it visible, set the `dismissible` property on the sidebar header to `true`.
+A sidebar can be closed by:
+- Clicking on the backdrop
+- Pressing the `ESC` key
+- Clicking the close button (requires `dismissible="true"` on the sidebar header)
 
 ## Modes
-A sidebar can be rendered four different ways by using the `mode` property. If `mode` is not specified, `side` is used by default.
+Use the `mode` property to control how the sidebar is displayed:
 
-| 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. |
+| Mode       | Description |
+| ---------- | ----------- |
+| `side` (default) | Displays the sidebar alongside the main content. |
+| `side-fixed` | Displays the sidebar alongside the content but remains fixed in place, scrolling independently from the content. |
+| `over` | Slides over the main content, temporarily covering it when active. |
+| `under` | Sits beneath the main content, which slides over the sidebar when closed. |
 
-### Over sidebar
-<design-land-example-viewer-container example="over-sidebar"></design-land-example-viewer-container>
+**Over and under sidebars**
+<design-land-example-viewer-container example="over-and-under-sidebars"></design-land-example-viewer-container>
 
-### Under sidebar
-<design-land-example-viewer-container example="under-sidebar"></design-land-example-viewer-container>
+**Side fixed sidebar**
+<design-land-example-viewer-container example="side-fixed-sidebar"></design-land-example-viewer-container>
 
-### Two fixed sidebars on either side
+**Two fixed sidebars on either side**
 <design-land-example-viewer-container example="two-fixed-sidebars-either-side"></design-land-example-viewer-container>
 
-### Fixed and over sidebar
+**Fixed and over sidebar**
 <design-land-example-viewer-container example="fixed-and-over-sidebar"></design-land-example-viewer-container>
 
 ## Sides
-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.
+Use the `side` property to control the placement of the sidebar:
 
-| Side  | Description                                    |
-| ----- | ---------------------------------------------- |
-| left  | Places sidebar on the left side of the screen  |
-| right | Places sidebar on the right side of the screen |
+| Side  | Description |
+| ----- | ----------- |
+| `left` (default) | Places the sidebar on the left side of the screen.  |
+| `right` | Places the sidebar on the right side of the screen. |
 
-## Custom styles
+<design-land-example-viewer-container example="sidebar-sides"></design-land-example-viewer-container>
 
-#### Setting a sidebar's width
-The default size of a sidebar is `240px`. The `--daff-sidebar-left-width` and `--daff-sidebar-right-width` variables can be used to change the width of a left or right sidebar. These variables need to be defined on `<daff-sidebar-viewport>` or on the shadow DOM.
+## Customizations
 
-`custom-sidebar-viewport.html`
-```html
-<daff-sidebar-viewport>
-	<daff-sidebar></daff-sidebar>
-</daff-sidebar-viewport>
-```
+### Sidebar width
+The default width is `240px`. Override it with:
 
 ```scss
 :host {
@@ -158,35 +162,26 @@ The default size of a sidebar is `240px`. The `--daff-sidebar-left-width` and `-
 }
 ```
 
-or:
-
-```scss
-daff-sidebar-viewport {
-	--daff-sidebar-left-width: 288px;
-	--daff-sidebar-right-width: 288px;
-}
-```
-
-## 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.
+### Side fixed mode's top offset position
+The default offset for a `side-fixed` sidebar is `64px` (matching the [Navbar](/libs/design/navbar/README.md)'s height). Override it with:
 
 ```scss
 body {
-	--daff-sidebar-side-fixed-top-shift: 64px;
+	--daff-sidebar-side-fixed-top-shift: 72px;
 }
 ```
 
-## Examples
-#### Over and under sidebars
-<design-land-example-viewer-container example="over-and-under-sidebars"></design-land-example-viewer-container>
-
-### Side fixed sidebar
-<design-land-example-viewer-container example="side-fixed-sidebar"></design-land-example-viewer-container>
-
 ## Accessibility
-A meaningful `role` should be set on all sidebars depending on how they are used.
+- Apply a meaningful `role` (e.g., navigation) to describe the sidebar’s purpose.
+- When no title or header is present, use an `aria-label` to provide context.
 
-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 management
+Focus trapping is automatically applied for `over` and `under` modes and turned off for `side` and `side-fixed` modes. When opened, the first tabbable element in the sidebar receives focus. When closed, focus returns to the previously focused element.
 
-### 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 sidebar will receive focus. When a sidebar is closed, the element that was focused before the sidebar was opened will be re-focused.
+## Deprecations
+`[daffSidebarHeaderAction]` has been deprecated in favor of the `dismissible` property. Replace `[daffSidebarHeaderAction]` with `<daff-sidebar-header [dismissible]="true">`
+
+```html
+<daff-sidebar-header [dismissible]="true">
+</daff-sidebar-header>
+```

package/sidebar/examples/over-and-under-sidebars/over-and-under-sidebars.component.d.ts

@@ -3,7 +3,6 @@ import * as i0 from "@angular/core";
 export declare class OverandUnderSidebarsComponent {
     faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
     open: boolean;
-    sideControl: FormControl;
     modeControl: FormControl;
     openSidebar(): void;
     closeSidebar(): void;

package/sidebar/examples/sidebar-sides/sidebar-sides.component.d.ts

@@ -0,0 +1,11 @@
+import { FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class SidebarSidesComponent {
+    faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    open: boolean;
+    sideControl: FormControl;
+    openSidebar(): void;
+    closeSidebar(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarSidesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SidebarSidesComponent, "sidebar-sides", never, {}, {}, never, never, true, never>;
+}

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

@@ -23,15 +23,6 @@ export declare class DaffSidebarComponent implements DaffOpenable {
     private _focusStack;
     private openDirective;
     private _doc;
-    /**
-     * @docs-private
-     *
-     * The CSS classes set.
-     */
-    get classes(): {
-        [x: string]: boolean;
-        'daff-sidebar': boolean;
-    };
     /**
      * @docs-private
      *

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

@@ -8,10 +8,6 @@ import * as i0 from "@angular/core";
  * ```
  */
 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-action/sidebar-header-action.directive.d.ts

@@ -1,4 +1,7 @@
 import * as i0 from "@angular/core";
+/**
+ * @deprecated in favor of the `dismissible` property on `DaffSidebarHeaderComponent`. Deprecated in version 0.88.0. Will be removed in version 0.91.0.
+ */
 export declare class DaffSidebarHeaderActionDirective {
     /**
      * @docs-private

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

@@ -14,10 +14,6 @@ export declare class DaffSidebarHeaderComponent {
      * @docs-private
      */
     faTimes: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    /**
-     * @docs-private
-     */
-    class: boolean;
     /** Whether or not a sidebar header should display the close icon. */
     dismissible: boolean;
     /**