@tylertech/forge 3.0.0-next.15 → 3.0.0-next.16

package/styles/checkbox/checkbox.scss

@@ -3,14 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
-@use './configuration';
+@use './core' as *;
 @use '../focus-indicator';
 @use '../state-layer';
-@use './token-utils' as *;
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -19,60 +17,60 @@
 
 // Unchecked
 .forge-checkbox {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 .forge-checkbox {
-  @include core.checkbox;
+  @include checkbox;
 
   .container {
-    @include core.container;
+    @include container;
   }
 
   .input {
-    @include core.input;
+    @include input;
   }
 
   .background {
-    @include core.background;
+    @include background;
   }
 
   .icon {
-    @include core.icon;
+    @include icon;
 
     &--checked {
-      @include core.icon-checked;
-      @include core.icon-checked-hidden;
+      @include icon-checked;
+      @include icon-checked-hidden;
     }
 
     &--indeterminate {
-      @include core.icon-indeterminate;
-      @include core.icon-indeterminate-hidden;
+      @include icon-indeterminate;
+      @include icon-indeterminate-hidden;
     }
   }
 
   .label {
-    @include core.label;
+    @include label;
   }
 
   ::slotted([slot=input]) {
-    @include core.input;
+    @include input;
   }
 }
 
 // Checked
 :host([checked]) {
   .background {
-    @include core.background-checked;
+    @include background-checked;
   }
 
   .icon {
     &--checked {
-      @include core.icon-checked-visible;
+      @include icon-checked-visible;
     }
 
     &--indeterminate {
-      @include core.icon-indeterminate-hidden;
+      @include icon-indeterminate-hidden;
     }
   }
 
@@ -86,16 +84,16 @@
 // Indeterminate
 :host([indeterminate]) {
   .background {
-    @include core.background-checked;
+    @include background-checked;
   }
 
   .icon {
     &--checked {
-      @include core.icon-checked-hidden;
+      @include icon-checked-hidden;
     }
 
     &--indeterminate {
-      @include core.icon-indeterminate-visible;
+      @include icon-indeterminate-visible;
     }
   }
 
@@ -110,17 +108,17 @@
 :host([dense]) {
   .forge-checkbox {
     .container {
-      @include core.container-dense;
+      @include container-dense;
     }
   }
 }
 
 :host([disabled]) {
   .forge-checkbox {
-    @include core.checkbox-disabled;
+    @include checkbox-disabled;
 
     .container {
-      @include core.container-disabled;
+      @include container-disabled;
     }
   }
 }
@@ -129,7 +127,7 @@
 :host([readonly]) {
   .forge-checkbox {
     .container {
-      @include core.container-disabled;
+      @include container-disabled;
     }
   }
 }

package/styles/checkbox/index.scss

@@ -3,6 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;

package/styles/circular-progress/_core.scss

@@ -7,6 +7,8 @@
 @use './animation';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 $_cycle-duration: calc(4 * #{token(arc-duration)});
 
 @mixin container {

package/styles/circular-progress/circular-progress.scss

@@ -3,22 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
+@use './core' as *;
 @use './animation';
-@use './configuration';
 @use '../core/styles/theme';
-@use './token-utils' as *;
 
 //
 // Host styles
 //
 
+$_host-tokens: [size];
+
 :host {
-  @include configuration.host-configuration;
+  @include tokens($includes: $_host-tokens);
 }
 
 :host {
-  @include core.container;
+  @include container;
 }
 
 :host([hidden]) {
@@ -30,14 +30,14 @@
 //
 
 .forge-circular-progress {
-  @include configuration.configuration;
+  @include tokens($excludes: $_host-tokens);
 }
 
 .forge-circular-progress {
-  @include core.progress;
+  @include progress;
 
   &--indeterminate {
-    @include core.indeterminate;
+    @include indeterminate;
   }
 }
 
@@ -47,11 +47,11 @@
 .right,
 .circle,
 svg {
-  @include core.positioned;
+  @include positioned;
 }
 
 .center-content {
-  @include core.center-content;
+  @include center-content;
 }
 
 //
@@ -59,23 +59,23 @@ svg {
 //
 
 .left {
-  @include core.indeterminate-left;
+  @include indeterminate-left;
 
   .circle {
-    @include core.indeterminate-left-circle;
+    @include indeterminate-left-circle;
   }
 }
     
 .right {
-  @include core.indeterminate-right;
+  @include indeterminate-right;
 
   .circle {
-    @include core.indeterminate-right-circle;
+    @include indeterminate-right-circle;
   }
 }
 
 .circle {
-  @include core.indeterminate-circle;
+  @include indeterminate-circle;
 }
 
 //
@@ -83,27 +83,37 @@ svg {
 //
 
 svg {
-  @include core.determinate-svg;
+  @include determinate-svg;
 
   circle {
-    @include core.determinate-svg-circle;
+    @include determinate-svg-circle;
   }
 }
 
 .progress {
-  @include core.determinate-progress;
+  @include determinate-progress;
 }
 
 .track {
-  @include core.determinate-track;
+  @include determinate-track;
 
   &-background {
-    @include core.determinate-track-background;
+    @include determinate-track-background;
   }
 }
 
 .spinner {
-  @include core.determinate-spinner;
+  @include determinate-spinner;
+}
+
+//
+// Track
+//
+
+:host(:is([track],[determinate])) {
+  .forge-circular-progress {
+    @include override(track-color, track-fill-color);
+  }
 }
 
 //
@@ -114,6 +124,11 @@ svg {
   :host([theme=#{$theme}]) {
     .forge-circular-progress {
       @include override(indicator-color, theme.variable($theme), value);
+    }
+  }
+
+  :host([theme=#{$theme}]:is([track],[determinate])) {
+    .forge-circular-progress {
       @include override(track-color, theme.variable(#{$theme}-container), value);
     }
   }
@@ -126,12 +141,6 @@ svg {
 @include theme(warning);
 @include theme(info);
 
-:host([track]) {
-  .forge-circular-progress {
-    @include override(track-color, track-fill-color);
-  }
-}
-
 @media screen and (forced-colors: active) {
   .progress {
     stroke: CanvasText;

package/styles/circular-progress/index.scss

@@ -4,6 +4,4 @@
  * License: Apache-2.0
  */
 @forward './animation';
-@forward './configuration';
 @forward './core';
-@forward './token-utils' show provide-theme;

package/styles/core/styles/elevation/index.scss

@@ -6,9 +6,9 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use '../utils';
 @use '../core/config';
 @use '../tokens/elevation/tokens';
-@use '../utils';
 
 ///
 /// Generates a `box-shadow` style value for the provided elevation z-value.

package/styles/core/styles/tokens/_token-utils.scss

@@ -3,10 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use 'sass:meta';
 @use 'sass:map';
-@use 'sass:list';
+@use 'sass:string';
 @use '../utils';
+@use '../core/config';
 
 ///
 /// Mixin for providing theme tokens to the module using external names.
@@ -91,13 +91,22 @@
 /// @param {List} $excludes - An optional list of token names to exclude from `$tokens`
 /// 
 @mixin tokens($module, $tokens, $includes: null, $excludes: null) {
+  // Validate that all tokens are generated with matching keys
+  @each $key, $var in $tokens {
+    // The token value is always expected to start with this string per our naming convention: `var(--<prefix>-<module>-<key>, <value>)`
+    $expected: 'var(--#{config.$prefix}-#{$module}-#{$key},';
+    @if string.index($var, $expected) != 1 {
+      @error 'Mismatching token key "#{$key}" found for module "#{$module}" with value "#{$var}"';
+    }
+  }
+
   @if ($includes) {
     // We are including only specific tokens
-    @each $token in $includes {
-      @if (not map.has-key($tokens, $token)) {
+    @each $token-name in $includes {
+      @if (not map.has-key($tokens, $token-name)) {
         @error 'Invalid include token "#{$token}" for module "#{$module}"';
       }
-      #{declare($module, $token)}: #{map.get($tokens, $token)};
+      #{declare($module, $token-name)}: #{map.get($tokens, $token-name)};
     }
   } @else {
     // We are including all tokens, but first we need to check if any excluded tokens were provided

package/styles/core/styles/tokens/button/_tokens.scss

@@ -17,7 +17,7 @@ $tokens: (
   // Shared
   primary-color: utils.module-val(button, primary-color, theme.variable(primary)),
   text-color: utils.module-ref(button, text-color, primary-color),
-  disabled-color: utils.module-val(button, disabled, theme.variable(surface-container)),
+  disabled-color: utils.module-val(button, disabled-color, theme.variable(surface-container)),
   padding: utils.module-val(button, padding, 8px),
   display: utils.module-val(button, display, inline-flex),
   justify: utils.module-val(button, justify, center),
@@ -58,7 +58,7 @@ $tokens: (
   // Tonal
   tonal-background: utils.module-val(button, tonal-background, theme.variable(primary-container)),
   tonal-disabled-background: utils.module-ref(button, tonal-disabled-background, disabled-color),
-  tonal-color: utils.module-val(button, flat-color, theme.variable(on-primary-container)),
+  tonal-color: utils.module-val(button, tonal-color, theme.variable(on-primary-container)),
   tonal-disabled-color: utils.module-ref(button, tonal-disabled-color, disabled-text-color),
 
   // Filled
@@ -101,8 +101,8 @@ $tokens: (
 
   // Focus indicator
   focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 4px),
-  text-focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 0px),
-  link-focus-indicator-offset: utils.module-val(button, focus-indicator-offset, 2px),
+  text-focus-indicator-offset: utils.module-val(button, text-focus-indicator-offset, 0px),
+  link-focus-indicator-offset: utils.module-val(button, link-focus-indicator-offset, 2px),
 
   // Popover icon
   popover-icon-transition-duration: utils.module-val(button, popover-icon-transition-duration, animation.variable(duration-short3)),

package/styles/core/styles/tokens/button-toggle/button-toggle/_tokens.scss

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../animation';
+@use '../../../border';
+@use '../../../shape';
+@use '../../../spacing';
+@use '../../../theme';
+@use '../../../utils';
+@use '../../button/tokens' as button;
+
+$tokens: (
+  // Base
+  display: utils.module-val(button-toggle, display, inline-flex),
+  min-width: utils.module-val(button-toggle, min-width, auto),
+  spacing: utils.module-val(button-toggle, spacing, spacing.variable(xsmall)),
+  padding-block: utils.module-val(button-toggle, padding-block, 2px),
+  padding-inline: utils.module-val(button-toggle, padding-inline, 8px),
+  icon-size: utils.module-val(button-toggle, icon-size, button.get(icon-size)),
+  
+  // Theme
+  color: utils.module-val(button-toggle, color, theme.variable(text-medium)),
+  background: utils.module-val(button-toggle, background, transparent),
+  hover-background: utils.module-ref(button-toggle, hover-background, background),
+  active-background: utils.module-ref(button-toggle, active-background, background),
+  cursor: utils.module-val(button-toggle, cursor, pointer),
+
+  // Border
+  border-width: utils.module-val(button-toggle, border-width, medium),
+  border-style: utils.module-val(button-toggle, border-style, none),
+  border-color: utils.module-val(button-toggle, border-color, theme.variable(outline-medium)),
+
+  // Shape
+  shape: utils.module-val(button-toggle, shape, shape.variable(small)),
+  shape-start-start: utils.module-ref(button-toggle, shape-start-start, shape),
+  shape-start-end: utils.module-ref(button-toggle, shape-start-end, shape),
+  shape-end-start: utils.module-ref(button-toggle, shape-end-start, shape),
+  shape-end-end: utils.module-ref(button-toggle, shape-end-end, shape),
+
+  // Selected
+  selected-background: utils.module-val(button-toggle, selected-background, theme.variable(tertiary-container)),
+  selected-color: utils.module-val(button-toggle, selected-color, theme.variable(on-tertiary-container)),
+  selected-disabled-background: utils.module-val(button-toggle, selected-disabled-background, theme.variable(surface-container)),
+
+  // Dense
+  dense-height: utils.module-val(button-toggle, dense-height, 24px),
+
+  // Disabled
+  disabled-opacity: utils.module-val(button-toggle, disabled-opacity, theme.emphasis(medium-low)),
+  disabled-cursor: utils.module-val(button-toggle, disabled-cursor, not-allowed),
+  disabled-color: utils.module-val(button-toggle, disabled-color, theme.variable(text-low)),
+  disabled-background: utils.module-val(button-toggle, disabled-background, transparent),
+
+  // Animation
+  transition-duration: utils.module-val(button-toggle, transition-duration, animation.variable(duration-short3)),
+  transition-timing: utils.module-val(button-toggle, transition-timing, animation.variable(easing-standard)),
+
+  // Focus indicator
+  focus-indicator-color: utils.module-val(button-toggle, focus-indicator-color, theme.variable(primary)),
+  focus-indicator-offset: utils.module-val(button-toggle, focus-indicator-offset, 0px) // Requires unit
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/button-toggle/button-toggle-group/_tokens.scss

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../animation';
+@use '../../../theme';
+@use '../../../border';
+@use '../../../shape';
+@use '../../../spacing';
+@use '../../../utils';
+@use '../../button/tokens' as button;
+@use '../button-toggle/tokens' as button-toggle;
+
+$tokens: (
+  // Base
+  display: utils.module-val(button-toggle-group, display, inline-flex),
+  gap: utils.module-val(button-toggle-group, gap, 4px),
+  padding: utils.module-val(button-toggle-group, padding, 4px),
+  padding-block: utils.module-ref(button-toggle-group, padding-block, padding),
+  padding-inline: utils.module-ref(button-toggle-group, padding-inline, padding),
+  height: utils.module-val(button-toggle-group, height, button.get(height)),
+
+  // Density - dense
+  dense-height: utils.module-val(button-toggle-group, dense-height, button.get(dense-height)),
+
+  // Outline
+  outline-width: utils.module-val(button-toggle-group, outline-width, border.variable(thin)),
+  outline-style: utils.module-val(button-toggle-group, outline-style, solid),
+  outline-color: utils.module-val(button-toggle-group, outline-color, theme.variable(outline-low)),
+  outline-color-active: utils.module-val(button-toggle-group, outline-color-active, theme.variable(outline-medium)),
+
+  // Shape
+  shape: utils.module-val(button-toggle-group, shape, shape.variable(medium)),
+  shape-start-start: utils.module-ref(button-toggle-group, shape-start-start, shape),
+  shape-start-end: utils.module-ref(button-toggle-group, shape-start-end, shape),
+  shape-end-start: utils.module-ref(button-toggle-group, shape-end-start, shape),
+  shape-end-end: utils.module-ref(button-toggle-group, shape-end-end, shape),
+
+  // Animation
+  transition-duration: utils.module-val(button-toggle-group, transition-duration, button-toggle.get(transition-duration)),
+  transition-timing: utils.module-val(button-toggle-group, transition-timing, button-toggle.get(transition-timing))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/checkbox/_tokens.scss

@@ -18,7 +18,7 @@ $tokens: (
   border-width: utils.module-val(checkbox, border-width, border.variable(medium)),
   icon-color: utils.module-val(checkbox, icon-color, theme.variable(on-tertiary)),
   state-layer-size: utils.module-val(checkbox, state-layer-size, 40px),
-  state-layer-dense-size: utils.module-val(checkbox, state-layer-size, 24px),
+  state-layer-dense-size: utils.module-val(checkbox, state-layer-dense-size, 24px),
 
   // Checkbox
   background-color: utils.module-val(checkbox, background-color, theme.variable(surface)),
@@ -41,14 +41,14 @@ $tokens: (
 
   // Label
   gap: utils.module-val(checkbox, gap, 0),
-  justify: utils.module-val(switch, justify, space-between),
-  direction: utils.module-val(switch, direction, initial),
+  justify: utils.module-val(checkbox, justify, space-between),
+  direction: utils.module-val(checkbox, direction, initial),
 
   // State layer
   state-layer-width: utils.module-ref(checkbox, state-layer-width, state-layer-size),
   state-layer-height: utils.module-ref(checkbox, state-layer-height, state-layer-size),
   state-layer-checked-color: utils.module-ref(checkbox, state-layer-checked-color, primary-color),
-  state-layer-unchecked-color: utils.module-ref(state-layer, state-layer-unchecked-color, color),
+  state-layer-unchecked-color: utils.module-ref(checkbox, state-layer-unchecked-color, color),
   state-layer-shape: utils.module-val(checkbox, state-layer-shape, shape.variable(full)),
 
   // Dense
@@ -60,8 +60,8 @@ $tokens: (
 
   // Animation
   animation-duration: utils.module-val(checkbox, animation-duration, animation.variable(duration-short2)),
-  background-animation-timing: utils.module-val(checkbox, animation-duration, animation.variable(easing-standard)),
-  icon-animation-timing: utils.module-val(checkbox, animation-duration, animation.variable(easing-emphasized-accelerate))
+  background-animation-timing: utils.module-val(checkbox, background-animation-timing, animation.variable(easing-standard)),
+  icon-animation-timing: utils.module-val(checkbox, icon-animation-timing, animation.variable(easing-emphasized-accelerate))
 ) !default;
 
 @function get($key) {

package/styles/core/styles/tokens/floating-action-button/_tokens.scss

@@ -14,7 +14,7 @@
 $tokens: (
   // General
   display: utils.module-val(fab, display, inline-flex),
-  gap: utils.module-val(fab, spacing, spacing.variable(xsmall)),
+  gap: utils.module-val(fab, gap, spacing.variable(xsmall)),
   background: utils.module-val(fab, background, theme.variable(secondary)),
   color: utils.module-val(fab, color, theme.variable(on-secondary)),
   size: utils.module-val(fab, size, 56px),

package/styles/core/styles/tokens/icon-button/_tokens.scss

@@ -16,7 +16,7 @@ $tokens: (
   // General
   display: utils.module-val(icon-button, display, inline-flex),
   size: utils.module-val(icon-button, size, 48px),
-  gap: utils.module-val(icon-button, spacing, 0),
+  gap: utils.module-val(icon-button, gap, 0),
   icon-color: utils.module-val(icon-button, icon-color, currentColor),
   background-color: utils.module-val(icon-button, background-color, none),
   icon-size: utils.module-val(icon-button, icon-size, typography.font-size-relative('1500')),
@@ -72,7 +72,7 @@ $tokens: (
   toggle-on-icon-color: utils.module-val(icon-button, toggle-on-icon-color, theme.variable(primary)),
 
   // Toggle (on) outlined
-  outlined-toggle-on-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container-low)),
+  outlined-toggle-on-background-color: utils.module-val(icon-button, outlined-toggle-on-background-color, theme.variable(primary-container)),
   outlined-toggle-on-icon-color: utils.module-val(icon-button, outlined-toggle-on-icon-color, theme.variable(primary)),
 
   // Toggle tonal
@@ -84,7 +84,7 @@ $tokens: (
 
   // Toggle filled
   filled-toggle-background-color: utils.module-val(icon-button, filled-toggle-background-color, theme.variable(surface-container-low)),
-  filled-toggle-icon-color: utils.module-val(icon-button, filled-toggle-background-color, theme.variable(primary)),
+  filled-toggle-icon-color: utils.module-val(icon-button, filled-toggle-icon-color, theme.variable(primary)),
 
   // Toggle (on) filled
   filled-toggle-on-background-color: utils.module-val(icon-button, filled-toggle-on-background-color, theme.variable(primary)),

package/styles/core/styles/tokens/overlay/_tokens.scss

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../elevation';
+
+$tokens: (
+  position: utils.module-val(overlay, position, fixed),
+  z-index: utils.module-val(overlay, z-index, elevation.z-index-variable(popup)),
+  height: utils.module-val(overlay, height, fit-content),
+  width: utils.module-val(overlay, width, fit-content),
+  position-inline-start: utils.module-val(overlay, position-inline-start, auto),
+  position-inline-end: utils.module-val(overlay, position-inline-end, auto),
+  position-block-start: utils.module-val(overlay, position-block-start, auto),
+  position-block-end: utils.module-val(overlay, position-block-end, auto)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/popover/_tokens.scss

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../elevation';
+@use '../../theme';
+@use '../../shape';
+@use '../../border';
+@use '../../animation';
+
+$tokens: (
+  // Base
+  background: utils.module-val(popover, background, theme.variable(surface-bright)),
+  border-radius: utils.module-val(popover, border-radius, shape.variable(medium)),
+  box-shadow: utils.module-val(popover, box-shadow, theme.variable(popup-elevation)),
+  border-width: utils.module-val(popover, border-width, 0),
+  border-style: utils.module-val(popover, border-style, solid),
+  border-color: utils.module-val(popover, border-color, theme.variable(outline)),
+
+  // Arrow
+  arrow-size: utils.module-val(popover, arrow-size, 12px),
+  arrow-height: utils.module-ref(popover, arrow-height, arrow-size),
+  arrow-width: utils.module-ref(popover, arrow-width, arrow-size),
+  arrow-background-color: utils.module-ref(popover, arrow-background-color, background),
+  arrow-top-rotation: utils.module-val(popover, arrow-top-rotation, 135deg),
+  arrow-right-rotation: utils.module-val(popover, arrow-right-rotation, 225deg),
+  arrow-bottom-rotation: utils.module-val(popover, arrow-bottom-rotation, 315deg),
+  arrow-left-rotation: utils.module-val(popover, arrow-left-rotation, 45deg),
+  arrow-border-width: utils.module-val(popover, arrow-border-width, border.variable(thin)),
+
+  // Animation
+  animation-timing: utils.module-val(popover, animation-timing, animation.variable(easing-decelerate)),
+
+  zoom-duration: utils.module-val(popover, zoom-duration, animation.variable(duration-short3)),
+  zoom-timing: utils.module-ref(popover, zoom-timing, animating-timing),
+
+  slide-duration: utils.module-val(popover, slide-duration, animation.variable(duration-short3)),
+  slide-timing: utils.module-ref(popover, slide-timing, animating-timing),
+  slide-offset: utils.module-val(popover, slide-offset, 24px),
+
+  fade-duration: utils.module-val(popover, fade-duration, animation.variable(duration-medium2)),
+  fade-timing: utils.module-ref(popover, fade-timing, animating-timing),
+
+  // No anchor
+  position-inline-start: utils.module-val(popover, position-inline-start, auto),
+  position-inline-end: utils.module-val(popover, position-inline-end, auto),
+  position-block-start: utils.module-val(popover, position-block-start, auto),
+  position-block-end: utils.module-val(popover, position-block-end, auto),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}