@daffodil/design 0.93.0 → 0.93.1

package/tag/README.md

@@ -1,8 +1,8 @@
 # Tag
-Tags are compact visual indicators used to display short pieces of information such as status, categories, or labels.
+Tags are interactive indicators and filters that can be edited or removed, used to represent selections, categories, or applied filters.
 
 ## Overview
-Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container.
+Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container. Tags can be dismissed to remove a selection or filter, making them well suited for filter chips, applied search criteria, and editable selections.
 
 <daff-docs-example-viewer example="basic-tag"></daff-docs-example-viewer>
 
@@ -36,7 +36,7 @@ A tag is composed of a wrapper, an optional prefix, a label, and an optional clo
 - **`<daff-tag>`**: The wrapper component that holds all tag content.
 - **`[daffPrefix]`**: A leading visual, typically an icon, displayed before the label.
 - **Label**: The text content of the tag, projected as a child element.
-- **Close button**: A trailing dismiss button, displayed when `dismissible` is `true`.
+- **Close button**: A trailing remove button, displayed when `dismissible` is `true`.
 
 ## Features
 
@@ -46,7 +46,7 @@ Set `dismissible` to `true` to display a close button. The button emits a `close
 <daff-docs-example-viewer example="dismissible-tag"></daff-docs-example-viewer>
 
 ### Disabled tags
-Set `disabled` to `true` to disable the tag. Disabled tags cannot be dismissed.
+Set `disabled` to `true` to disable the tag. Disabled tags cannot be removed.
 
 <daff-docs-example-viewer example="disabled-tag"></daff-docs-example-viewer>
 
@@ -63,15 +63,19 @@ Use the `color` property to change the color of a tag. Supported colors: `primar
 ### Statuses
 Use the `status` property to convey semantic meaning. Supported statuses: `warn`, `critical`, `info`, `success`.
 
+> **Deprecation notice:**
+>
+> The `status` property is deprecated. Tags are intended for selections, categories, and applied filters, so use the `color` property instead.
+
 <daff-docs-example-viewer example="statusable-tag"></daff-docs-example-viewer>
 
 ## Accessibility
 
 ### Built-in behavior
 - Default tags are not interactive and do not receive focus.
-- Dismissible tags include a focusable close button that can be activated with `Enter` or `Space`.
+- Removable tags include a focusable close button that can be activated with `Enter` or `Space`.
 - Disabled tags expose `aria-disabled="true"` and ignore close button activation.
 
 ### Developer responsibilities
 - Always provide a text label unless the icon is universally understood and accessible.
-- Use the `status` property to communicate semantic meaning, rather than relying on color alone.
+- Communicate meaning through the tag's label or an accessible icon, rather than relying on color alone.

package/tag/src/tag-theme.scss

@@ -1,3 +1,4 @@
+// stylelint-disable selector-class-pattern
 @use '../../scss/theming' as *;
 
 @mixin daff-tag-theme($theme) {
@@ -18,119 +19,215 @@
 			background: daff-color($neutral, 20);
 			color: $black;
 
+			&::after {
+				background: daff-color($neutral, 30);
+			}
+
 			&.daff-primary {
 				background: daff-color($primary, 10);
 				color: daff-color($primary, 70);
+
+				&::after {
+					background: daff-color($primary, 20);
+				}
 			}
 
 			&.daff-secondary {
 				background: daff-color($secondary, 10);
 				color: daff-color($secondary, 70);
+
+				&::after {
+					background: daff-color($secondary, 20);
+				}
 			}
 
 			&.daff-tertiary {
 				background: daff-color($tertiary, 10);
 				color: daff-color($tertiary, 70);
+
+				&::after {
+					background: daff-color($tertiary, 20);
+				}
 			}
 
 			&.daff-dark {
 				background: daff-color($neutral, 90);
 				color: daff-color($neutral, 10);
+
+				&::after {
+					background: daff-color($neutral, 100);
+				}
 			}
 
 			&.daff-light {
 				background: daff-color($neutral, 10);
 				color: daff-color($neutral, 90);
+
+				&::after {
+					background: daff-color($neutral, 20);
+				}
 			}
 
 			&.daff-theme {
 				background: $white;
 				color: $black;
+
+				&::after {
+					background: daff-color($neutral, 20);
+				}
 			}
 
 			&.daff-theme-contrast {
 				background: $black;
 				color: $white;
+
+				&::after {
+					background: daff-color($neutral, 90);
+				}
 			}
 
 			&.daff-warn {
 				background: daff-color($warn, 10);
 				color: daff-color($warn, 70);
+
+				&::after {
+					background: daff-color($warn, 20);
+				}
 			}
 
 			&.daff-success {
 				background: daff-color($success, 10);
 				color: daff-color($success, 70);
+
+				&::after {
+					background: daff-color($success, 20);
+				}
 			}
 
 			&.daff-critical {
 				background: daff-color($critical, 10);
 				color: daff-color($critical, 70);
+
+				&::after {
+					background: daff-color($critical, 20);
+				}
 			}
 
 			&.daff-info {
 				background: daff-color($info, 10);
-				color: daff-color($info, 70);
+				color: daff-color($info, 90);
+
+				&::after {
+					background: daff-color($info, 20);
+				}
 			}
 		}
 
 		@include dark($mode) {
-			background: daff-color($neutral, 90);
+			background: daff-color($neutral, 80);
 			color: daff-color($neutral, 20);
 
+			&::after {
+				background: daff-color($neutral, 90);
+			}
+
 			&.daff-primary {
 				background: daff-color($primary, 90);
 				color: daff-color($primary, 10);
+
+				&::after {
+					background: daff-color($primary, 100);
+				}
 			}
 
 			&.daff-secondary {
 				background: daff-color($secondary, 90);
 				color: daff-color($secondary, 10);
+
+				&::after {
+					background: daff-color($secondary, 100);
+				}
 			}
 
 			&.daff-tertiary {
 				background: daff-color($tertiary, 90);
 				color: daff-color($tertiary, 10);
+
+				&::after {
+					background: daff-color($tertiary, 100);
+				}
 			}
 
 			&.daff-dark {
 				background: daff-color($neutral, 90);
 				color: daff-color($neutral, 10);
+
+				&::after {
+					background: daff-color($neutral, 100);
+				}
 			}
 
 			&.daff-light {
 				background: daff-color($neutral, 10);
 				color: daff-color($neutral, 90);
+
+				&::after {
+					background: daff-color($neutral, 30);
+				}
 			}
 
 			&.daff-theme {
 				background: $black;
 				color: $white;
+
+				&::after {
+					background: daff-color($neutral, 100);
+				}
 			}
 
 			&.daff-theme-contrast {
 				background: $white;
 				color: $black;
+
+				&::after {
+					background: daff-color($neutral, 20);
+				}
 			}
 
 			&.daff-warn {
 				background: daff-color($warn, 90);
 				color: daff-color($warn, 10);
+
+				&::after {
+					background: daff-color($warn, 100);
+				}
 			}
 
 			&.daff-success {
 				background: daff-color($success, 90);
 				color: daff-color($success, 10);
+
+				&::after {
+					background: daff-color($success, 100);
+				}
 			}
 
 			&.daff-critical {
 				background: daff-color($critical, 90);
 				color: daff-color($critical, 10);
+
+				&::after {
+					background: daff-color($critical, 100);
+				}
 			}
 
 			&.daff-info {
-				background: daff-color($info, 70);
+				background: daff-color($info, 80);
 				color: daff-color($info, 10);
+
+				&::after {
+					background: daff-color($neutral, 80);
+				}
 			}
 		}
 	}

package/types/daffodil-design-beacon.d.ts

@@ -0,0 +1,26 @@
+import * as i0 from '@angular/core';
+import * as i1 from '@daffodil/design';
+
+/**
+ * The cadence of the beacon ring, e.g. how long one expand-and-fade cycle takes.
+ *
+ * - `slow` - a relaxed 3.6s cycle.
+ * - `normal` - the default 2.4s cycle.
+ * - `fast` - an urgent 1.2s cycle.
+ */
+type DaffBeaconSpeed = 'slow' | 'normal' | 'fast';
+
+/**
+ * DaffBeaconComponent is a small indicator that draws visual attention to a specific location or element.
+ */
+declare class DaffBeaconComponent {
+    /**
+     * How fast the beacon pulses.
+     */
+    speed: i0.InputSignal<DaffBeaconSpeed>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DaffBeaconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffBeaconComponent, "daff-beacon", never, { "speed": { "alias": "speed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffSizableDirective; inputs: { "size": "size"; }; outputs: {}; }]>;
+}
+
+export { DaffBeaconComponent };

package/types/daffodil-design-tag.d.ts

@@ -2,7 +2,7 @@ import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome
 import * as i0 from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import * as i1 from '@daffodil/design';
-import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffDisableable, DaffPrefixDirective, DaffDisableableDirective } from '@daffodil/design';
+import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffDisableable, DaffPrefixDirective, DaffStatus, DaffDisableableDirective, DaffStatusableDirective } from '@daffodil/design';
 
 /**
  * The size types that the DaffTagComponent can implement.
@@ -14,19 +14,20 @@ declare class DaffTagSizableDirective extends DaffSizableDirective<DaffTagSize>
 }
 
 /**
- * Contains the tag content: checkmark icon, label, and delete button.
+ * DaffTagComponent is an interactive indicator and filter that can be edited or removed, used to represent selections, categories, or applied filters.
  *
  * @example
  * ```html
- *  <daff-tag [dismissible]="true" (closeTag)="onCloseTag()">
- *    <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
- *    <div>Label</div>
- *  </daff-tag>
+ * <daff-tag [dismissible]="true" (closeTag)="onCloseTag()">
+ *   <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
+ *   Label
+ * </daff-tag>
  * ```
  */
 declare class DaffTagComponent implements DaffDisableable {
     private size;
     private disabledDirective;
+    private statusable;
     /**
      * @docs-private
      */
@@ -41,12 +42,18 @@ declare class DaffTagComponent implements DaffDisableable {
      * Internal function to access the disabled property of the DaffDisableableDirective.
      */
     get disabled(): boolean;
-    private _dismissible;
-    /** Whether the tag can be dismissed by the user.
+    /**
+     * @deprecated Deprecated in version 0.93.0. Deprecated in version 0.93.1. Will be removed in version 0.96.0.
+     *
+     * Sets the status on the tag.
+     */
+    get status(): DaffStatus;
+    set status(value: DaffStatus);
+    /**
+     * Whether the tag can be dismissed by the user.
      * Displays a close icon if `true`.
      */
-    get dismissible(): any;
-    set dismissible(value: any);
+    dismissible: boolean;
     /**
      * Emits when the tag is closed.
      */
@@ -57,9 +64,10 @@ declare class DaffTagComponent implements DaffDisableable {
      * Internal handler for the close icon click.
      */
     onCloseTag(event: Event): void;
-    constructor(size: DaffTagSizableDirective, disabledDirective: DaffDisableableDirective);
+    constructor(size: DaffTagSizableDirective, disabledDirective: DaffDisableableDirective, statusable: DaffStatusableDirective);
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffTagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTagComponent, "daff-tag", never, { "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closeTag": "closeTag"; }, ["_prefix"], ["[daffPrefix]", "*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffTagSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DaffTagComponent, "daff-tag", never, { "status": { "alias": "status"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closeTag": "closeTag"; }, ["_prefix"], ["[daffPrefix]", "*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffTagSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
+    static ngAcceptInputType_dismissible: unknown;
 }
 
 /**

package/types/daffodil-design.d.ts

@@ -445,7 +445,7 @@ declare class DaffArticleEncapsulatedDirective {
 declare enum DaffTheme {
     Light = "light",
     Dark = "dark",
-    None = "none"
+    System = "system"
 }
 
 /**
@@ -498,6 +498,11 @@ declare class DaffThemingService {
      * Get the current theme.
      */
     getTheme(): Observable<DaffTheme>;
+    /**
+     * Get the user's stored theme preference. Emits `DaffTheme.System` when no
+     * preference is stored and the theme follows the operating system.
+     */
+    getThemePreference(): Observable<DaffTheme>;
     /**
      * Set the theme to dark mode.
      */
@@ -507,9 +512,9 @@ declare class DaffThemingService {
      */
     lightMode(): void;
     /**
-     * Switch between themes.
+     * Follow the operating system's theme preference by clearing any stored theme.
      */
-    switchTheme(): void;
+    systemMode(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DaffThemingService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DaffThemingService>;
 }