chore: general cleanup and consistency sweep

.stylelintrc

@@ -1,3 +1,6 @@
 {
-  "extends": "@tylertech/stylelint-rules"
+  "extends": "@tylertech/stylelint-rules",
+  "rules": {
+    "length-zero-no-unit": null
+  }
 }

src/dev/pages/circular-progress/circular-progress.html

@@ -4,15 +4,19 @@
     title: 'Circular progress',
     includePath: './pages/circular-progress/circular-progress.ejs',
     options: [
-      {
+    {
         type: 'select',
         label: 'Theme',
         id: 'opt-theme',
         defaultValue: 'tertiary',
         options: [
           { label: 'Primary', value: 'primary' },
           { label: 'Secondary', value: 'secondary' },
-          { label: 'Tertiary', value: 'tertiary' }
+          { label: 'Tertiary', value: 'tertiary' },
+          { label: 'Success', value: 'success' },
+          { label: 'Error', value: 'error' },
+          { label: 'Warning', value: 'warning' },
+          { label: 'Info', value: 'info' }
         ]
       },
       { type: 'text-field', label: 'Size', id: 'opt-size', defaultValue: '48px' },

src/dev/pages/circular-progress/circular-progress.ts

@@ -8,11 +8,7 @@ let determinateIntervalTimer: number | undefined;
 
 const showTrackToggle = document.getElementById('opt-show-track') as ISwitchComponent;
 showTrackToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
-  if (selected) {
-    circularProgress.style.removeProperty('--forge-circular-progress-track-background');
-  } else {
-    circularProgress.style.setProperty('--forge-circular-progress-track-background', 'transparent');
-  }
+  circularProgress.track = selected;
 });
 
 const showPercentToggle = document.getElementById('opt-show-percent') as ISwitchComponent;
@@ -22,11 +18,7 @@ showPercentToggle.addEventListener('forge-switch-change', ({ detail: selected })
 
 const themeSelect = document.getElementById('opt-theme') as ISelectComponent;
 themeSelect.addEventListener('change', ({ detail }) => {
-  if (detail === 'tertiary') {
-    circularProgress.style.removeProperty('--forge-theme-tertiary');
-  } else {
-    circularProgress.style.setProperty('--forge-theme-tertiary', `var(--forge-theme-${detail})`);
-  }
+  circularProgress.theme = detail;
 });
 
 const determinateToggle = document.getElementById('opt-determinate') as ISwitchComponent;

src/dev/pages/linear-progress/linear-progress.html

@@ -13,6 +13,21 @@
           { label: 'Determinate', value: 'determinate' },
           { label: 'Buffer', value: 'buffer' }
         ]
+      },
+      {
+        type: 'select',
+        label: 'Theme',
+        id: 'opt-theme',
+        defaultValue: 'tertiary',
+        options: [
+          { label: 'Primary', value: 'primary' },
+          { label: 'Secondary', value: 'secondary' },
+          { label: 'Tertiary', value: 'tertiary' },
+          { label: 'Success', value: 'success' },
+          { label: 'Error', value: 'error' },
+          { label: 'Warning', value: 'warning' },
+          { label: 'Info', value: 'info' }
+        ]
       }
     ]
   }

src/dev/pages/linear-progress/linear-progress.ts

@@ -3,8 +3,8 @@ import type { ILinearProgressComponent, ISelectComponent } from '@tylertech/forg
 import '@tylertech/forge/linear-progress';
 
 const linearProgress = document.getElementById('linear-progress') as ILinearProgressComponent;
-const modeSelect = document.getElementById('opt-mode') as ISelectComponent;
 
+const modeSelect = document.getElementById('opt-mode') as ISelectComponent;
 modeSelect.addEventListener('change', ({ detail: value }) => {
   if (value === 'determinate' || value === 'indeterminate') {
     linearProgress.determinate = value === 'determinate';
@@ -16,3 +16,8 @@ modeSelect.addEventListener('change', ({ detail: value }) => {
     linearProgress.buffer = 0.75;
   }
 });
+
+const themeSelect = document.getElementById('opt-theme') as ISelectComponent;
+themeSelect.addEventListener('change', ({ detail }) => {
+  linearProgress.theme = detail;
+});

src/lib/button/button-constants.ts

@@ -1,4 +1,4 @@
-import { COMPONENT_NAME_PREFIX } from '../constants';
+import { COMPONENT_NAME_PREFIX, Theme } from '../constants';
 
 const elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}button`;
 
@@ -19,4 +19,4 @@ export const BUTTON_CONSTANTS = {
 };
 
 export type ButtonVariant = 'text' | 'raised' | 'outlined' | 'flat' | 'link';
-export type ButtonTheme = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'info';
+export type ButtonTheme = Theme;

src/lib/checkbox/checkbox.scss

@@ -142,11 +142,9 @@ forge-state-layer {
   ));
 }
 
-/* stylelint-disable length-zero-no-unit */
 forge-focus-indicator {
   @include focus-indicator.provide-theme((
-    shape: 0px,
+    shape: 0px, // Requires unit
     outward-offset: 8px
   ));
 }
-/* stylelint-enable length-zero-no-unit */

src/lib/circular-progress/_core.scss

@@ -50,7 +50,8 @@ $_cycle-duration: calc(4 * #{token(arc-duration)});
   box-sizing: border-box;
   border-radius: 50%;
   border: solid calc(#{token(size)} * #{token(track-width)} / 100);
-  border-color: #{token(track-color)} #{token(track-color)} transparent transparent;
+  border-color: #{token(indicator-color)} #{token(indicator-color)} transparent transparent;
+  transition: border-color #{token(theme-transition-duration)} #{token(theme-transition-timing)};
   will-change: transform;
   animation: #{animation.$indeterminate-circle-animation};
   animation-iteration-count: infinite;
@@ -81,16 +82,18 @@ $_cycle-duration: calc(4 * #{token(arc-duration)});
 }
 
 @mixin determinate-progress {
-  transition: stroke-dashoffset 500ms #{animation.$determinate-easing};
-  stroke: #{token(track-color)};
+  transition: stroke-dashoffset 500ms #{animation.$determinate-easing},
+              stroke #{token(theme-transition-duration)} #{token(theme-transition-timing)};
+  stroke: #{token(indicator-color)};
 }
 
 @mixin determinate-track {
   stroke: transparent;
 }
 
 @mixin determinate-track-background {
-  stroke: #{token(track-background)};
+  transition: stroke #{token(theme-transition-duration)} #{token(theme-transition-timing)};
+  stroke: #{token(track-color)};
 }
 
 @mixin determinate-spinner {

src/lib/circular-progress/circular-progress-constants.ts

@@ -1,10 +1,12 @@
-import { COMPONENT_NAME_PREFIX } from '../constants';
+import { COMPONENT_NAME_PREFIX, Theme } from '../constants';
 
 const elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}circular-progress`;
 
 const attributes = {
   DETERMINATE: 'determinate',
   PROGRESS: 'progress',
+  THEME: 'theme',
+  NO_TRACK: 'no-track',
   ARIA_LABEL: 'data-aria-label'
 };
 
@@ -24,3 +26,5 @@ export const CIRCULAR_PROGRESS_CONSTANTS = {
   classes,
   selectors
 };
+
+export type CircularProgressTheme = Theme;

src/lib/circular-progress/circular-progress-foundation.ts

@@ -1,16 +1,20 @@
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 
 import { ICircularProgressAdapter } from './circular-progress-adapter';
-import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
+import { CircularProgressTheme, CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 
 export interface ICircularProgressFoundation extends ICustomElementFoundation {
   determinate: boolean;
   progress: number;
+  theme: CircularProgressTheme;
+  track: boolean;
 }
 
 export class CircularProgressFoundation implements ICircularProgressFoundation {
   private _determinate = false;
   private _progress = 0;
+  private _theme: CircularProgressTheme = 'primary';
+  private _track = true;
 
   constructor(private _adapter: ICircularProgressAdapter) {}
 
@@ -51,6 +55,27 @@ export class CircularProgressFoundation implements ICircularProgressFoundation {
     }
   }
 
+  public get theme(): CircularProgressTheme {
+    return this._theme;
+  }
+  public set theme(value: CircularProgressTheme) {
+    if (this._theme !== value) {
+      this._theme = value;
+      this._adapter.toggleHostAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME, !!this._theme, this._theme);
+    }
+  }
+
+  public get track(): boolean {
+    return this._track;
+  }
+  public set track(value: boolean) {
+    value = Boolean(value);
+    if (this._track !== value) {
+      this._track = value;
+      this._adapter.toggleHostAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK, !this._track);
+    }
+  }
+
   public set ariaLabel(value: string) {
     this._adapter.setAriaLabel(value);
   }

src/lib/circular-progress/circular-progress.scss

@@ -1,6 +1,8 @@
 @use './core';
 @use './animation';
 @use './configuration';
+@use '../core/styles/theme';
+@use './token-utils' as *;
 
 //
 // Host styles
@@ -99,6 +101,32 @@ svg {
   @include core.determinate-spinner;
 }
 
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  :host([theme=#{$theme}]) {
+    .forge-circular-progress {
+      @include override(indicator-color, theme.variable($theme));
+      @include override(track-color, theme.variable(#{$theme}-container));
+    }
+  }
+}
+
+@include theme(primary);
+@include theme(secondary);
+@include theme(success);
+@include theme(error);
+@include theme(warning);
+@include theme(info);
+
+:host([no-track]) {
+  .forge-circular-progress {
+    @include override(track-color, transparent);
+  }
+}
+
 @media screen and (forced-colors: active) {
   .progress {
     stroke: CanvasText;

src/lib/circular-progress/circular-progress.test.ts

@@ -86,4 +86,34 @@ describe('Circular Progress', () => {
 
     expect(rootElement.getAttribute('aria-label')).to.equal(expectedLabel);
   });
+
+  it('should set theme', async () => {
+    const el = await fixture<ICircularProgressComponent>(html`<forge-circular-progress></forge-circular-progress>`);
+    el.theme = 'secondary';
+
+    expect(el.theme).to.equal('secondary');
+    expect(el.getAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME)).to.equal('secondary');
+  });
+
+  it('should set theme via attribute', async () => {
+    const el = await fixture<ICircularProgressComponent>(html`<forge-circular-progress theme="secondary"></forge-circular-progress>`);
+
+    expect(el.theme).to.equal('secondary');
+    expect(el.getAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME)).to.equal('secondary');
+  });
+
+  it('should set track', async () => {
+    const el = await fixture<ICircularProgressComponent>(html`<forge-circular-progress></forge-circular-progress>`);
+    el.track = false;
+
+    expect(el.track).to.equal(false);
+    expect(el.hasAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK)).to.equal(true);
+  });
+
+  it('should set track via attribute', async () => {
+    const el = await fixture<ICircularProgressComponent>(html`<forge-circular-progress no-track></forge-circular-progress>`);
+
+    expect(el.track).to.equal(false);
+    expect(el.hasAttribute(CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK)).to.equal(true);
+  });
 });

src/lib/circular-progress/circular-progress.ts

@@ -2,7 +2,7 @@ import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean,
 
 import { CircularProgressAdapter } from './circular-progress-adapter';
 import { CircularProgressFoundation } from './circular-progress-foundation';
-import { CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
+import { CircularProgressTheme, CIRCULAR_PROGRESS_CONSTANTS } from './circular-progress-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 
 import template from './circular-progress.html';
@@ -11,6 +11,8 @@ import styles from './circular-progress.scss';
 export interface ICircularProgressComponent extends IBaseComponent {
   determinate: boolean;
   progress: number;
+  theme: CircularProgressTheme;
+  track: boolean;
 }
 
 declare global {
@@ -32,17 +34,25 @@ declare global {
  *
  * @property {boolean} determinate - Controls the determinate state.
  * @property {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
+ * @property {CircularProgressTheme} theme - Controls the theme of the progress indicator.
+ * @property {boolean} track - Controls the visibility of the track background.
  * 
  * @attribute {boolean} determinate - Controls the determinate state.
+ * @attribute {boolean} progress - Controls the progress while in a determinate state. Accepts values from `0` to `1`.
+ * @attribute {CircularProgressTheme} theme - Controls the theme of the progress indicator.
+ * @attribute {boolean} no-track - Controls the visibility of the track background.
  * @attribute {string} data-aria-label - Propagates an `aria-label` to the underlying progressbar element.
  * 
  * @slot - The is the default/unnamed slot. Renders content at the center of the progress indicator.
  * 
  * @cssproperty --forge-circular-progress-size - The height and width of the indicator container.
  * @cssproperty --forge-circular-progress-padding - The padding inside the bounding box of the container.
  * @cssproperty --forge-circular-progress-track-width - The track indicator width.
- * @cssproperty --forge-circular-progress-track-color - The track indicator color.
- * @cssproperty --forge-circular-progress-track-background - The track background color.
+ * @cssproperty --forge-circular-progress-track-color - The track background color.
+ * @cssproperty --forge-circular-progress-indicator-color - The track indicator color.
+ * @cssproperty --forge-circular-progress-arc-duration - The duration of the arc animation.
+ * @cssproperty --forge-circular-progress-theme-transition-duration - The duration of the theme transition.
+ * @cssproperty --forge-circular-progress-theme-transition-timing - The easing function to use for the theme transition.
  * 
  * @csspart progressbar - Styles the progress bar container element
  */
@@ -54,6 +64,8 @@ export class CircularProgressComponent extends BaseComponent implements ICircula
     return [
       CIRCULAR_PROGRESS_CONSTANTS.attributes.DETERMINATE,
       CIRCULAR_PROGRESS_CONSTANTS.attributes.PROGRESS,
+      CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME,
+      CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK,
       CIRCULAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL
     ];
   }
@@ -78,6 +90,12 @@ export class CircularProgressComponent extends BaseComponent implements ICircula
       case CIRCULAR_PROGRESS_CONSTANTS.attributes.PROGRESS:
         this.progress = coerceNumber(newValue);
         break;
+      case CIRCULAR_PROGRESS_CONSTANTS.attributes.THEME:
+        this.theme = newValue as CircularProgressTheme;
+        break;
+      case CIRCULAR_PROGRESS_CONSTANTS.attributes.NO_TRACK:
+        this.track = !coerceBoolean(newValue);
+        break;
       case CIRCULAR_PROGRESS_CONSTANTS.attributes.ARIA_LABEL:
         this._foundation.ariaLabel = newValue;
         break;
@@ -89,4 +107,10 @@ export class CircularProgressComponent extends BaseComponent implements ICircula
 
   @FoundationProperty()
   public declare progress: number;
+
+  @FoundationProperty()
+  public declare theme: CircularProgressTheme;
+
+  @FoundationProperty()
+  public declare track: boolean;
 }

src/lib/constants.ts

@@ -3,3 +3,5 @@ export const KEYSTROKE_DEBOUNCE_THRESHOLD = 500;
 export const ICON_CLASS_NAME = 'tyler-icons';
 export const CDN_BASE_URL = 'https://cdn.forge.tylertech.com/';
 export const internals = Symbol('ElementInternals');
+
+export type Theme = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info';

src/lib/core/base/base-adapter.ts

@@ -11,7 +11,7 @@ export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
   redispatchEvent(event: Event, options?: { bubbles?: boolean; cancelable?: boolean; composed?: boolean }): boolean;
   emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
   addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
-  removeHostListener(event: string, callback: (event: Event) => void): void;
+  removeHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
   addWindowListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
   removeWindowListener(event: string, callback: (event: Event) => void, options?: boolean | EventListenerOptions): void;
   addDocumentListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;