@daffodil/design 0.77.0 → 0.79.0

package/sidebar/README.md

@@ -4,12 +4,53 @@ Sidebar is a component used to display additional information to the side of a p
 ## 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.
 
-### Basic sidebar
+## Usage
+
+### Within a standalone component
+To use sidebar in a standalone component, import `DAFF_SIDEBAR_COMPONENTS` directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_SIDEBAR_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use sidebar in a module, import `DaffSidebarModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffSidebarModule } from '@daffodil/design/sidebar';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffSidebarModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
+## Basic sidebar
 The default setting for sidebar is `mode="side"` and `side="left"`.
 
 <design-land-example-viewer-container example="basic-sidebar"></design-land-example-viewer-container>
 
-### Implementing the main and sidebar content
+## 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>`.
 
 A viewport navigation can either be:
@@ -50,17 +91,17 @@ A viewport navigation can either be:
 </daff-sidebar-viewport>
 ```
 
-#### Required Imports
+### 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
+## 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.
 
-### Opening and closing a sidebar
+## 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.
@@ -69,7 +110,7 @@ By default, sidebar supports two methods of closing itself: clicking on the back
 | `(backdropClicked)` | Set on the `<daff-sidebar-viewport>` |
 | `(escapePressed)`   | Set on the `<daff-sidebar>`          |
 
-### Modes
+## Modes
 `<daff-sidebar>` can be rendered four different ways by using the `mode` property. If `mode` is not specified, `side` is used by default.
 
 | Mode       | Description                                                                                          |
@@ -79,19 +120,19 @@ By default, sidebar supports two methods of closing itself: clicking on the back
 | 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 |
 
-#### Over sidebar
+### Over sidebar
 <design-land-example-viewer-container example="over-sidebar"></design-land-example-viewer-container>
 
-#### Under sidebar
+### Under sidebar
 <design-land-example-viewer-container example="under-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
+## 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.
 
 | Side  | Description                                    |
@@ -99,18 +140,35 @@ By default, sidebar supports two methods of closing itself: clicking on the back
 | left  | Places sidebar on the left side of the screen  |
 | right | Places sidebar on the right side of the screen |
 
-### Custom styles
+## Custom styles
 
 #### Setting a sidebar's width
-The default size of a sidebar is `240px`. The width can be changed by setting it via CSS:
+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.
+
+`custom-sidebar-viewport.html`
+```html
+<daff-sidebar-viewport>
+	<daff-sidebar></daff-sidebar>
+</daff-sidebar-viewport>
+```
+
+```scss
+:host {
+	--daff-sidebar-left-width: 288px;
+	--daff-sidebar-right-width: 288px;
+}
+```
+
+or:
 
 ```scss
-daff-sidebar {
-	width: 240px;
+daff-sidebar-viewport {
+	--daff-sidebar-left-width: 288px;
+	--daff-sidebar-right-width: 288px;
 }
 ```
 
-### 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
@@ -119,17 +177,17 @@ body {
 }
 ```
 
-### Examples
+## Examples
 #### Over and under sidebars
 <design-land-example-viewer-container example="over-and-under-sidebars"></design-land-example-viewer-container>
 
-#### Side fixed sidebar
+### Side fixed sidebar
 <design-land-example-viewer-container example="side-fixed-sidebar"></design-land-example-viewer-container>
 
-### Accessibility
+## 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.
 
-#### Focus
+### 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.

package/sidebar/public_api.d.ts

@@ -12,3 +12,4 @@ 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 { DAFF_SIDEBAR_COMPONENTS } from './sidebar';

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

@@ -1,21 +1,23 @@
 import { AnimationEvent } from '@angular/animations';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { NgZone, ElementRef, EventEmitter } from '@angular/core';
-import { DaffFocusStackService } from '@daffodil/design';
+import { DaffFocusStackService, DaffOpenable, DaffOpenableDirective } from '@daffodil/design';
 import { DaffSidebarAnimationState } from '../animation/sidebar-animation-state';
 import { DaffSidebarMode } from '../helper/sidebar-mode';
 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`.
  */
-export declare class DaffSidebarComponent {
+export declare class DaffSidebarComponent implements DaffOpenable {
     private _elementRef;
     private _ngZone;
     private _focusTrapFactory;
     private _focusStack;
+    private openDirective;
     private _doc;
     /**
      * @docs-private
@@ -47,15 +49,12 @@ export declare class DaffSidebarComponent {
      * The mode of the sidebar.
      */
     mode: DaffSidebarMode;
-    /**
-     * Whether or not the sidebar is open.
-     */
-    open: boolean;
     /**
      * The width of the sidebar.
      */
     get width(): number;
-    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusTrapFactory: ConfigurableFocusTrapFactory, _focusStack: DaffFocusStackService, _doc: any);
+    get open(): boolean;
+    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusTrapFactory: ConfigurableFocusTrapFactory, _focusStack: DaffFocusStackService, openDirective: DaffOpenableDirective, _doc: any);
     private _focusTrap;
     /**
      * Animation event that can be used to hook into when the transformSidebar
@@ -68,6 +67,18 @@ export declare class DaffSidebarComponent {
      * transformSidebar animation is complete.
      */
     onAnimationComplete(e: AnimationEvent): void;
+    /**
+     * Reveal the contents of the sidebar
+     */
+    reveal(): void;
+    /**
+     * Hide the contents of the sidebar
+     */
+    hide(): void;
+    /**
+     * Toggle the visibility of the sidebar
+     */
+    toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarComponent, "daff-sidebar", never, { "side": { "alias": "side"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "open": { "alias": "open"; "required": false; }; }, { "escapePressed": "escapePressed"; }, never, ["daff-sidebar-header", "*", "daff-sidebar-footer"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarComponent, "daff-sidebar", never, { "side": { "alias": "side"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "escapePressed": "escapePressed"; }, never, ["daff-sidebar-header", "*", "daff-sidebar-footer"], true, [{ directive: typeof i1.DaffOpenableDirective; inputs: { "open": "open"; }; outputs: { "toggled": "toggled"; }; }]>;
 }

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

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class DaffSidebarFooterComponent {
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarFooterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarFooterComponent, "daff-sidebar-footer", never, {}, {}, never, ["*"], false, 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

@@ -5,5 +5,5 @@ export declare class DaffSidebarHeaderActionDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarHeaderActionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSidebarHeaderActionDirective, "[daffSidebarHeaderAction]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSidebarHeaderActionDirective, "[daffSidebarHeaderAction]", never, {}, {}, never, never, true, never>;
 }

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

@@ -5,5 +5,5 @@ export declare class DaffSidebarHeaderTitleDirective {
      */
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarHeaderTitleDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSidebarHeaderTitleDirective, "[daffSidebarHeaderTitle]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSidebarHeaderTitleDirective, "[daffSidebarHeaderTitle]", never, {}, {}, never, never, true, never>;
 }

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

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class DaffSidebarHeaderComponent {
     class: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarHeaderComponent, "daff-sidebar-header", never, {}, {}, never, ["[daffSidebarHeaderAction]", "[daffSidebarHeaderTitle]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffSidebarHeaderComponent, "daff-sidebar-header", never, {}, {}, never, ["[daffSidebarHeaderAction]", "[daffSidebarHeaderTitle]", "*"], true, never>;
 }

package/sidebar/sidebar-viewport/scroll-token/scroll.token.d.ts

@@ -1,4 +1,3 @@
-import { InjectionToken } from '@angular/core';
 /**
  * An interface that enables a user to enable or disable scrolling on sidebars.
  *
@@ -8,12 +7,7 @@ export interface DaffSidebarScroll {
     enable(): void;
     disable(): void;
 }
-/**
- * An injection token that can be used within a sidebar to determine
- * what to do enabling and disabling scrolling. By default, the body
- * is the element where scrolling is controlled.
- */
-export declare const DAFF_SIDEBAR_SCROLL_TOKEN: InjectionToken<DaffSidebarScroll>;
+export declare const DAFF_SIDEBAR_SCROLL_TOKEN: import("@angular/core").InjectionToken<DaffSidebarScroll>, provideDaffSidebarScrollToken: <R extends DaffSidebarScroll = DaffSidebarScroll>(value: R) => import("@angular/core").ValueProvider;
 /**
  * A factory function that return a DaffSidebarScroll
  * for the current sidebar viewport.

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

@@ -33,6 +33,8 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
     get classes(): {
         [x: string]: boolean;
         'daff-sidebar-viewport': boolean;
+        'pad-left': boolean;
+        'pad-right': boolean;
     };
     get isNavOnSide(): boolean;
     onContentAnimationStart(e: AnimationEvent): void;
@@ -54,22 +56,8 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
      * right when there are child sidebars.
      */
     private _shift;
-    /**
-     * The left padding on the content when left side-fixed sidebars are open.
-     */
-    _contentPadLeft: number;
-    /**
-     * The left padding on the nav when left side-fixed sidebars are open.
-     */
-    _navPadLeft: number;
-    /**
-     * The right padding on the content when right side-fixed sidebars are open.
-     */
-    _contentPadRight: number;
-    /**
-     * The right padding on the content when right side-fixed sidebars are open.
-     */
-    _navPadRight: number;
+    private _isPaddedLeft;
+    private _isPaddedRight;
     /**
      * Whether or not the backdrop is interactable
      */
@@ -97,5 +85,5 @@ export declare class DaffSidebarViewportComponent implements AfterContentChecked
      */
     _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:not([side=right])", "[daff-sidebar-viewport-nav]", "*", "daff-sidebar[side=right]"], false, 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[side=right]"], true, never>;
 }

package/sidebar/sidebar-viewport/utils/content-pad.d.ts

@@ -2,6 +2,6 @@ import { QueryList } from '@angular/core';
 import { DaffSidebarSide } from '../../helper/sidebar-side';
 import { DaffSidebarComponent } from '../../sidebar/sidebar.component';
 /**
- * Given a list of sidebars, compute the associated content shift.
+ * Given a list of sidebars, compute the whether or not the content is padded.
  */
-export declare const sidebarViewportContentPadding: (sidebars: QueryList<DaffSidebarComponent>, side: DaffSidebarSide) => number;
+export declare const isSidebarViewportContentPadded: (sidebars: QueryList<DaffSidebarComponent>, side: DaffSidebarSide) => boolean;

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

@@ -30,5 +30,5 @@ export declare class DaffSidebarViewportBackdropComponent implements OnInit {
     animationStart(e: AnimationEvent): void;
     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, ["*"], false, 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

@@ -0,0 +1,8 @@
+import { DaffSidebarComponent } from './sidebar/sidebar.component';
+import { DaffSidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
+import { DaffSidebarHeaderActionDirective } from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
+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];

package/sidebar/sidebar.module.d.ts

@@ -1,15 +1,18 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./sidebar/sidebar.component";
-import * as i2 from "./sidebar-viewport/sidebar-viewport.component";
-import * as i3 from "./sidebar-header/sidebar-header.component";
-import * as i4 from "./sidebar-footer/sidebar-footer.component";
-import * as i5 from "./sidebar-header/sidebar-header-title/sidebar-header-title.directive";
-import * as i6 from "./sidebar-header/sidebar-header-action/sidebar-header-action.directive";
-import * as i7 from "./sidebar-viewport-backdrop/sidebar-viewport-backdrop.component";
-import * as i8 from "@angular/common";
-import * as i9 from "@angular/cdk/a11y";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/cdk/a11y";
+import * as i3 from "./sidebar/sidebar.component";
+import * as i4 from "./sidebar-viewport/sidebar-viewport.component";
+import * as i5 from "./sidebar-header/sidebar-header.component";
+import * as i6 from "./sidebar-footer/sidebar-footer.component";
+import * as i7 from "./sidebar-header/sidebar-header-title/sidebar-header-title.directive";
+import * as i8 from "./sidebar-header/sidebar-header-action/sidebar-header-action.directive";
+import * as i9 from "./sidebar-viewport-backdrop/sidebar-viewport-backdrop.component";
+/**
+ * @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS} Deprecated in version 0.78.0. Will be removed in version 0.81.0.
+ */
 export declare class DaffSidebarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, [typeof i1.DaffSidebarComponent, typeof i2.DaffSidebarViewportComponent, typeof i3.DaffSidebarHeaderComponent, typeof i4.DaffSidebarFooterComponent, typeof i5.DaffSidebarHeaderTitleDirective, typeof i6.DaffSidebarHeaderActionDirective, typeof i7.DaffSidebarViewportBackdropComponent], [typeof i8.CommonModule, typeof i9.A11yModule], [typeof i1.DaffSidebarComponent, typeof i2.DaffSidebarViewportComponent, typeof i3.DaffSidebarHeaderComponent, typeof i4.DaffSidebarFooterComponent, typeof i5.DaffSidebarHeaderTitleDirective, typeof i6.DaffSidebarHeaderActionDirective, typeof i7.DaffSidebarViewportBackdropComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, never, [typeof i1.CommonModule, typeof i2.A11yModule, typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective, typeof i9.DaffSidebarViewportBackdropComponent], [typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective, typeof i9.DaffSidebarViewportBackdropComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DaffSidebarModule>;
 }

package/tabs/README.md

@@ -0,0 +1,19 @@
+# Tabs
+Tabs provide a way to navigate between panels that display related content.
+
+## Overview
+Tabs allow for users to navigate between related content without having to leave the page. They can be used within components like modals or cards.
+
+## Accessbility
+Tabs follow the [ARIA Tabs design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). Tabs compose of `tablist`, `tab`, and `tabpanel` elements,  each with its appropriate role and integrated keyboard interactions.
+
+### Label
+A meaningful `aria-label` should be set on `<daff-tabs>` by using the `aria-label` property. This will set the `aria-label` on the `tablist` element.
+
+### Keyboard Interactions
+| Key | Action |
+| --- | ------ |
+| Left Arrow |  Moves focus and activates previous tab. If focus is on the first tab, moves focus to the last tab. |
+| Right Arrow |  Moves focus and activates next tab. If focus is on the last tab, moves focus to the first tab. |
+| Home |  Moves focus and activates first tab. |
+| End |  Moves focus and activates last tab. |

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

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class BasicTabsComponent {
+    faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BasicTabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BasicTabsComponent, "basic-tabs", never, {}, {}, never, never, true, never>;
+}

package/tabs/examples/custom-select-tabs/custom-select-tabs.component.d.ts

@@ -0,0 +1,11 @@
+import { DaffTabsComponent } from '@daffodil/design/tabs';
+import * as i0 from "@angular/core";
+export declare class CustomSelectTabsComponent {
+    faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    selectedTab: string;
+    _tab: DaffTabsComponent;
+    selectTabThree(): void;
+    selectTabFive(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CustomSelectTabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CustomSelectTabsComponent, "custom-select-tabs", never, {}, {}, never, never, true, never>;
+}

package/tabs/examples/disabled-tabs/disabled-tabs.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class DisabledTabsComponent {
+    faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DisabledTabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DisabledTabsComponent, "disabled-tabs", never, {}, {}, never, never, true, never>;
+}

package/tabs/examples/index.d.ts

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

package/tabs/examples/initially-select-tab/initially-select-tab.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class InitiallySelectTabComponent {
+    faInfoCircle: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InitiallySelectTabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InitiallySelectTabComponent, "initially-select-tab", never, {}, {}, never, never, true, never>;
+}

package/tabs/examples/public_api.d.ts

@@ -0,0 +1,2 @@
+import { BasicTabsComponent } from './basic-tabs/basic-tabs.component';
+export declare const TABS_EXAMPLES: (typeof BasicTabsComponent)[];

package/tabs/index.d.ts

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

package/tabs/public_api.d.ts

@@ -0,0 +1,5 @@
+export { DAFF_TABS_COMPONENTS } from './tabs';
+export { DaffTabsComponent } from './tabs/tabs.component';
+export { DaffTabPanelComponent } from './tabs/tab-panel/tab-panel.component';
+export { DaffTabComponent } from './tabs/tab/tab.component';
+export { DaffTabLabelComponent } from './tabs/tab-label/tab-label.component';

package/tabs/src/tabs-theme.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '../../scss/core';
+@use '../../scss/theming';
+
+@mixin daff-tabs-theme($theme) {
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$neutral: core.daff-map-deep-get($theme, 'core.neutral');
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+
+	.daff-tab-activator {
+		border-bottom: 2px solid theming.daff-illuminate($base, $neutral, 2);
+
+		&.selected {
+			border-bottom: 2px solid theming.daff-color($primary);
+		}
+	}
+}

package/tabs/tabs/tab/tab.component.d.ts

@@ -0,0 +1,57 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * `DaffTabComponet` is an element in the tab list that is used as a content container to group the label of a tab panel and the tab panel together.
+ *
+ * ## Template Structure
+ * A `<daff-tab>` should include the {@link DaffTabLabelComponent} and {@link DaffTabPanelComponent} components in order to properly structure the UI.
+ *
+ * ## Usage
+ * ```html
+ * <daff-tab>
+ * 	<daff-tab-label>
+ * 		<fa-icon [icon]="faInfoCircle" daffPrefix></fa-icon>
+ * 		Tab 1
+ * 	</daff-tab-label>
+ * 	<daff-tab-panel>
+ * 		Tab 1 Panel
+ * 	</daff-tab-panel>
+ * </daff-tab>
+ * ```
+ */
+export declare class DaffTabComponent {
+    /**
+     * Whether the tab is disabled.
+     *
+     * ```html
+     * <daff-tab [disabled]="true">
+     * </daff-tab>
+     * ```
+     */
+    disabled: boolean;
+    /**
+     * @docs-private
+     */
+    contentRef: TemplateRef<any>;
+    /**
+     * @docs-private
+     */
+    labelRef: TemplateRef<any>;
+    /**
+     * A unique id for the tab component.
+     *
+     * The `id` is automatically generated by linking the prefix 'daff-tab-' with an incrementing `tabId`. This value can be customized by passing a different `id` value via the component's `id` input.
+     *
+     * ```html
+     * <daff-tab [id]="'custom-id'"></daff-tab>
+     * ```
+     */
+    id: string;
+    /**
+     * @docs-private
+     */
+    panelId: string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabComponent, "daff-tab", never, { "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, ["daff-tab-label", "daff-tab-panel"], true, never>;
+}

package/tabs/tabs/tab-activator/tab-activator.component.d.ts

@@ -0,0 +1,37 @@
+import { OnInit, ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DaffTabActivatorComponent implements OnInit {
+    private el;
+    /**
+     * @docs-private
+     */
+    class: boolean;
+    /**
+     * Sets the `role` to tab.
+     */
+    role: string;
+    /** Whether or not a tab is selected */
+    selected: boolean;
+    /**
+     * Sets `aria-selected` to true if the component is selected and false if it's not selected.
+     */
+    get ariaSelected(): boolean;
+    /**
+     * Sets `tabindex` to `0` if the component is selected and `-1` if it's not selected.
+     */
+    get tabIndex(): "0" | "-1";
+    ariaControls: string;
+    /**
+     * The html id of the tab activator component
+     */
+    tabActivatorId: string;
+    panelId: string;
+    ngOnInit(): void;
+    constructor(el: ElementRef);
+    /**
+     * Sets focus to the native element of the component
+     */
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabActivatorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabActivatorComponent, "button[daff-tab-activator],a[daff-tab-activator]", never, { "selected": { "alias": "selected"; "required": false; }; "tabActivatorId": { "alias": "tabActivatorId"; "required": false; }; "panelId": { "alias": "panelId"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/tabs/tabs/tab-label/tab-label.component.d.ts

@@ -0,0 +1,19 @@
+import { DaffPrefixDirective, DaffSuffixDirective, DaffPrefixable, DaffSuffixable } from '@daffodil/design';
+import * as i0 from "@angular/core";
+/**
+ * DaffTabLabelComponent is used to display the label of a tab panel. Labels may optionally contain a `daffPrefix` or `daffSuffix` to add icons or badges.
+ *
+ * ```html
+ * <daff-tab-label>
+ *  <div daffPrefix></div>
+ *  Label
+ *  <div daffSuffix></div
+ * </daff-tab-Label>
+ * ```
+ */
+export declare class DaffTabLabelComponent implements DaffPrefixable, DaffSuffixable {
+    _prefix: DaffPrefixDirective;
+    _suffix: DaffSuffixDirective;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffTabLabelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTabLabelComponent, "daff-tab-label", never, {}, {}, ["_prefix", "_suffix"], ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
+}