@tylertech/forge 3.0.0-next.10 → 3.0.0-next.12

package/esm/time-picker/time-picker-adapter.js

@@ -106,7 +106,8 @@ export class TimePickerAdapter extends BaseAdapter {
         return this._inputElement.disabled;
     }
     isInputFocused() {
-        return getActiveElement() === this._inputElement;
+        const activeElement = getActiveElement(this._component.ownerDocument);
+        return activeElement === this._inputElement;
     }
     setInputValue(value, emitEvents) {
         if (this._inputElement.value === value) {

package/esm/time-picker/time-picker-foundation.js

@@ -220,12 +220,12 @@ export class TimePickerFoundation {
         }
     }
     _onInputFocus(evt) {
-        if (this._allowInput) {
-            this._adapter.selectInputText();
-        }
         if (this.masked && this._showMaskFormat) {
             this._applyMask();
         }
+        if (this._allowInput) {
+            this._adapter.selectInputText();
+        }
     }
     _onInputBlur(evt) {
         if (this.masked && this._showMaskFormat) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.10",
+  "version": "3.0.0-next.12",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -30,16 +30,11 @@
     "@material/rtl": "^14.0.0",
     "@material/select": "^14.0.0",
     "@material/shape": "^14.0.0",
-    "@material/slider": "^14.0.0",
-    "@material/switch": "^14.0.0",
-    "@material/tab-indicator": "^14.0.0",
-    "@material/tab-scroller": "^14.0.0",
     "@material/theme": "^14.0.0",
-    "@material/tokens": "^14.0.0",
     "@material/top-app-bar": "^14.0.0",
     "@material/touch-target": "^14.0.0",
     "@material/typography": "^14.0.0",
-    "@tylertech/forge-core": "^2.1.0",
+    "@tylertech/forge-core": "^2.3.0",
     "@tylertech/tyler-icons": "^1.12.0",
     "imask": "^6.6.1",
     "tslib": "^2.3.1"

package/styles/button-area/_mixins.scss

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '@material/ripple/ripple' as mdc-ripple;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../utils/mixins' as utils;
+@use '../ripple/forge-ripple';
+
+@mixin core-styles() {
+  .forge-button-area {
+    @include base;
+
+    &:not(.forge-button-area--disabled) {
+      &.forge-button-area {
+        @include enabled;
+      }
+    }
+
+    &__button {
+      @include button;
+    }
+  }
+}
+
+@mixin host() {
+  display: block;
+}
+
+@mixin base() {
+  overflow: hidden;
+}
+
+@mixin enabled() {
+  @include mdc-ripple.surface;
+  @include mdc-ripple.radius-bounded;
+  @include mdc-ripple-theme.states(primary);
+  @include mdc-ripple-theme.states-activated(primary);
+  @include mdc-ripple-theme.states-selected(primary);
+
+  cursor: pointer;
+}
+
+@mixin button() {
+  @include utils.visually-hidden;
+}

package/styles/button-area/button-area.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './mixins';
+
+@include mixins.core-styles;
+
+:host {
+  @include mixins.host;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/styles/calendar/calendar-menu/_mixins.scss

@@ -5,10 +5,10 @@
  */
 @use '@material/ripple/ripple' as mdc-ripple;
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/theme/theme' as mdc-theme;
 @use '@material/typography/typography' as mdc-typography;
 @use '../../theme';
 @use '../../theme/theme-values';
-@use '../../list/list-item/mixins' as list-item;
 @use './variables';
 
 @mixin core-styles() {
@@ -230,7 +230,7 @@
 }
 
 @mixin list-item() {
-  @include list-item.interactable;
+  @include _deprecated-interactable;
 
   display: flex;
   align-items: center;
@@ -417,3 +417,49 @@
     }
   }
 }
+
+@mixin _deprecated-interactable() {
+  @include mdc-ripple.surface;
+  @include mdc-ripple.radius-bounded;
+  @include mdc-ripple-theme.states(on-surface);
+  @include mdc-ripple-theme.states-activated(primary);
+  @include mdc-ripple-theme.states-selected(primary);
+
+  &--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before {
+    opacity: mdc-ripple-theme.states-opacity(primary, activated) + mdc-ripple-theme.states-opacity(primary, focus) +
+      mdc-ripple-theme.states-opacity(primary, hover);
+  }
+
+  &:focus,
+  &--active {
+    &:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation) {
+      &::before {
+        opacity: mdc-ripple-theme.states-opacity(primary, focus);
+      }
+      &:hover {
+        &::before {
+          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover);
+        }
+      }
+
+      &::before,
+      &::after {
+        @include mdc-theme.property(background-color, on-surface);
+      }
+    }
+  }
+
+  &--active:focus {
+    &.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation) {
+      &::before {
+        opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, activated);
+      }
+      &:hover {
+        &::before {
+          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover) +
+            mdc-ripple-theme.states-opacity(primary, activated);
+        }
+      }
+    }
+  }
+}

package/styles/chip-field/_base.scss

@@ -225,6 +225,7 @@
 @mixin leading-core {
   @include _grid-leading;
   align-self: flex-start;
+  display: flex;
 }
 
 // Trailing

package/styles/chip-field/_selector.scss

@@ -165,7 +165,7 @@
 
 @mixin leading {
   // Core
-  ::slotted([slot='leading']) {
+  &--leading .forge-field__leading-container {
     @include base.leading-core;
   }
   // Margin
@@ -176,7 +176,7 @@
 
 @mixin trailing {
   // Core
-  ::slotted([slot='trailing']) {
+  &--trailing .forge-field__trailing-container {
     @include base.trailing-core;
   }
   // Margin

package/styles/chips/chip/_mixins.scss

@@ -38,6 +38,7 @@
 
     &__content {
       flex-grow: 1;
+      text-align: center;
 
       &:focus {
         outline: none;

package/styles/circular-progress/{_animations.scss → _animation.scss}

@@ -8,6 +8,12 @@
 /// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/circularprogress/lib/_circular-progress.scss)
 ///
 
+$indeterminate-animation: linear infinite linear-rotate !default;
+$indeterminate-circle-animation: expand-arc !default;
+$determinate-animation: infinite both rotate-arc !default;
+$indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$determinate-easing: cubic-bezier(0, 0, 0.2, 1) !default;
+
 @mixin keyframes {
   // Indeterminate mode is 3 animations composed together:
   // 1. expand-arc: an arc is expanded/contracted between 10deg and 270deg.

package/styles/circular-progress/_configuration.scss

@@ -5,13 +5,6 @@
  */
 @use '../core/styles/tokens/circular-progress/tokens';
 
-/// Configurable module-level variables
-$indeterminate-animation: linear infinite linear-rotate !default;
-$indeterminate-circle-animation: expand-arc !default;
-$determinate-animation: infinite both rotate-arc !default;
-$indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$determinate-easing: cubic-bezier(0, 0, 0.2, 1) !default;
-
 ///
 /// Initializes private configuration state CSS variables
 /// 

package/styles/circular-progress/_core.scss

@@ -4,8 +4,8 @@
  * License: Apache-2.0
  */
 @use 'sass:list';
-@use './configuration';
-@use '../core/styles/tokens/utils';
+@use './animation';
+@use '../core/styles/utils';
 @use '../core/styles/tokens/circular-progress/tokens';
 
 @mixin provide-theme($theme) {
@@ -35,7 +35,7 @@
 
 @mixin indeterminate {
   will-change: transform;
-  animation: #{configuration.$indeterminate-animation};
+  animation: #{animation.$indeterminate-animation};
   animation-duration: var(--_linear-duration);
 }
 
@@ -60,11 +60,11 @@
   border: solid calc(var(--_size) * var(--_track-width) / 100);
   border-color: var(--_track-color) var(--_track-color) transparent transparent;
   will-change: transform;
-  animation: #{configuration.$indeterminate-circle-animation};
+  animation: #{animation.$indeterminate-circle-animation};
   animation-iteration-count: infinite;
   animation-fill-mode: both;
   animation-duration: var(--_arc-duration), var(--_cycle-duration);
-  animation-timing-function: #{configuration.$indeterminate-easing};
+  animation-timing-function: #{animation.$indeterminate-easing};
 }
 
 @mixin indeterminate-right-circle {
@@ -89,7 +89,7 @@
 }
 
 @mixin determinate-progress {
-  transition: stroke-dashoffset 500ms #{configuration.$determinate-easing};
+  transition: stroke-dashoffset 500ms #{animation.$determinate-easing};
   stroke: var(--_track-color);
 }
 
@@ -103,9 +103,9 @@
 
 @mixin determinate-spinner {
   will-change: transform;
-  animation: #{configuration.$determinate-animation};
+  animation: #{animation.$determinate-animation};
   animation-duration: var(--_cycle-duration);
-  animation-timing-function: #{configuration.$indeterminate-easing};
+  animation-timing-function: #{animation.$indeterminate-easing};
 }
 
 @mixin positioned {

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

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 @use './core';
-@use './animations';
+@use './animation';
 @use './configuration';
 
 /// Host styles
@@ -95,4 +95,4 @@ svg {
   }
 }
 
-@include animations.keyframes;
+@include animation.keyframes;

package/styles/circular-progress/index.scss

@@ -3,6 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './animations';
+@forward './animation';
 @forward './configuration';
 @forward './core';

package/styles/core/styles/_utils.scss

@@ -0,0 +1,137 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use 'sass:math';
+@use './core/config';
+
+///
+/// Gets a CSS custom property declaration for a specific theme variable, with its token value as the fallback value
+/// 
+@function variable($module, $tokens, $key, $prefix: config.$prefix) {
+  $value: map.get($tokens, $key);
+  @if not $value {
+    @error 'Invalid #{$module} token: #{$key}';
+  }
+  @return create-var($module, $key, $value, $prefix);
+}
+
+///
+/// Creates a CSS custom property reference for a token in the provided module
+/// referencing an existing module token variable as the fallback.
+/// 
+/// To provide a module reference variable with a different fallback value, set the
+/// $type parameter to `value` and `$value` will be used verbatim.
+/// 
+/// Example:
+/// ```scss
+/// $my-token: module-ref(comp, color, primary-color); // => var(--forge-comp-color, var(--_primary-color));
+/// ```
+/// 
+@function module-ref($module, $token, $value, $type: ref, $prefix: config.$prefix) {
+  $fallback: if($type == ref, module-var($value), $value);
+  @return create-var($module, $token, $fallback, $prefix);
+}
+
+///
+/// Gets a module token CSS variable.
+/// 
+@function module-var($token, $prefix: config.$prefix) {
+  @return var(--_#{$token});
+}
+
+///
+/// Creates a CSS custom property reference for a module token using the
+/// provided value as the variable fallback.
+/// 
+/// Example:
+/// ```scss
+/// $my-token: module-val(comp, color, red); // => var(--forge-comp-color, red);
+/// $my-other-token: module-val(comp, color, theme.variable(primary)); // => var(--forge-comp-color, var(--forge-theme-primary));
+/// ```
+/// 
+@function module-val($module, $token, $value, $prefix: config.$prefix) {
+  @return create-var($module, $token, $value, $prefix);
+}
+
+///
+/// Creates a CSS custom property variable reference for a token in the provided module.
+/// 
+/// Example:
+/// ```scss
+/// $my-var: variable-ref(theme, color); // => var(--forge-theme-color);
+/// ```
+///
+@function variable-ref($module, $token, $value: null, $prefix: config.$prefix) {
+  @return create-var($module, $token, $value, $prefix);
+}
+
+///
+/// Creates a CSS custom property variable reference for a token in the provided module.
+/// 
+/// Example:
+/// ```scss
+/// $my-var: variable-ref(theme, color); // => var(--forge-theme-color);
+/// ```
+///
+@function variable-ref($module, $token, $value: null, $prefix: config.$prefix) {
+  @return create-var($module, $token, $value, $prefix);
+}
+
+///
+/// Emits CSS custom property declarations for tokens on a per-module basis,
+/// using the provided token map.
+/// 
+@mixin provide($module-tokens, $tokens, $module, $prefix: config.$prefix) {
+  @each $token-name, $token-value in $tokens {
+    @if not map.get($module-tokens, $token-name) {
+      @error 'Invalid token "#{$token-name}" for module "#{$module}"';
+    }
+    @include declare-var($module, $token-name, $token-value, $prefix);
+  }
+}
+
+///
+/// Creates a new map by inheriting from a base map and overriding/adding values.
+///
+@function inherit-map($base, $overrides) {
+  @return map.merge($base, $overrides);
+}
+
+///
+/// Creates a CSS custom property reference for a module token, using the provided fallback value.
+/// 
+@function create-var($module, $token, $value: null, $prefix: config.$prefix) {
+  @if $value == null {
+    @return var(--#{$prefix}-#{$module}-#{$token});
+  }
+  @return var(--#{$prefix}-#{$module}-#{$token}, $value);
+}
+
+///
+/// Rounds a number to the specified number of decimal places.
+///
+@function round($value, $fractionDigits: 0) {
+  $power: math.pow(10, $fractionDigits);
+  @return math.div(math.round($power * $value), $power);
+}
+
+///
+/// Creates a CSS custom property declaration for a module token. 
+///
+@mixin declare-var($module, $name, $value, $prefix: config.$prefix) {
+  --#{$prefix}-#{$module}-#{$name}: #{$value};
+}
+
+///
+/// Flattens multiple maps into a single map. 
+///
+@function flatten($maps...) {
+  $merged: ();
+  @each $map in $maps {
+    $merged: map.merge($merged, $map);
+  }
+  @return $merged;
+}

package/styles/core/styles/animation/index.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/config';
+@use '../utils';
+@use '../tokens/animation/tokens';
+
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(animation, tokens.$tokens, $key, $prefix);
+}
+
+@function provide($tokens, $prefix: config.$prefix) {
+  @return utils.provide(tokens.$tokens, $tokens, animation, $prefix);
+}

package/styles/core/styles/border/index.scss

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../core/config';
+@use '../tokens/border/tokens';
+@use '../theme';
+@use '../utils';
+
+///
+/// Gets a CSS custom property declaration for a specific border token with its token value as the fallback value.
+/// 
+/// Example:
+/// ```scss
+/// .my-class {
+///   @include border.style(standard); // => border: var(--forge-border-standard, 1px solid var(--forge-theme-border-color));
+/// }
+/// ```
+/// 
+@mixin style($type, $style: solid, $prefix: config.$prefix) {
+  border: value($type, $style, $prefix);
+}
+
+///
+/// Gets a CSS custom property declaration for a specific border token with its token value as the fallback value.
+/// 
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(border, tokens.$tokens, $key, $prefix);
+}
+
+///
+/// Generates CSS custom property declarations for the provided spacing tokens.
+/// 
+@mixin provide($tokens, $prefix: config.$prefix) {
+  @include utils.provide(tokens.$tokens, $tokens, border, $prefix);
+}

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

@@ -7,7 +7,7 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use '../core/config';
-@use '../tokens/theme/elevation';
+@use '../tokens/elevation/tokens';
 
 ///
 /// Generates a `box-shadow` style value for the provided elevation z-value.
@@ -21,13 +21,13 @@
     @error "$z-value must be between 0 and 24, but received '#{$z-value}'";
   }
 
-  $umbra-z-value: map.get(elevation.$umbra-map, $z-value);
-  $penumbra-z-value: map.get(elevation.$penumbra-map, $z-value);
-  $ambient-z-value: map.get(elevation.$ambient-map, $z-value);
+  $umbra-z-value: map.get(tokens.$umbra-map, $z-value);
+  $penumbra-z-value: map.get(tokens.$penumbra-map, $z-value);
+  $ambient-z-value: map.get(tokens.$ambient-map, $z-value);
 
-  $umbra-color: rgba($color, elevation.$umbra-opacity + $opacity-boost);
-  $penumbra-color: rgba($color, elevation.$penumbra-opacity + $opacity-boost);
-  $ambient-color: rgba($color, elevation.$ambient-opacity + $opacity-boost);
+  $umbra-color: rgba($color, tokens.$umbra-opacity + $opacity-boost);
+  $penumbra-color: rgba($color, tokens.$penumbra-opacity + $opacity-boost);
+  $ambient-color: rgba($color, tokens.$ambient-opacity + $opacity-boost);
 
   @return (
     #{'#{$umbra-z-value} #{$umbra-color}'},
@@ -39,14 +39,14 @@
 ///
 /// Returns a an elevation value specified by the provided elevation z-value.
 /// 
-@function value($z-value, $color: elevation.$baseline-color, $opacity-boost: 0) {
+@function value($z-value, $color: tokens.$baseline-color, $opacity-boost: 0) {
   @return _calc-box-shadow($z-value, $color, $opacity-boost);
 }
 
 ///
 /// Sets a `box-shadow` style specified by the provided elevation z-value.
 /// 
-@mixin box-shadow($z-value, $color: elevation.$baseline-color, $opacity-boost: 0) {
+@mixin box-shadow($z-value, $color: tokens.$baseline-color, $opacity-boost: 0) {
   box-shadow: #{_calc-box-shadow($z-value, $color, $opacity-boost)};
 }
 
@@ -56,6 +56,6 @@
 /// All z-index values are set as CSS custom properties, so they can be overridden globally.
 /// 
 @mixin z-index($level) {
-  $value: map.get(elevation.$z-index-map, $level);
+  $value: map.get(tokens.$z-index-map, $level);
   z-index: var(--#{config.$prefix}-z-index-#{$level}, #{$value});
 }

package/styles/core/styles/scrollbar/index.scss

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../tokens/scrollbar/tokens';
+
+///
+/// Provides scrollbar styles.
+///
+@mixin base {
+  &::-webkit-scrollbar {
+    height: #{tokens.get(height)};
+    width: #{tokens.get(width)};
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: #{tokens.get(track-container)};
+    
+    &:hover {
+      background-color: #{tokens.get(track-container-hover)};
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: #{tokens.get(track-container)};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: #{tokens.get(thumb-min-height)};
+    width: #{tokens.get(thumb-min-width)};
+    
+    border-radius: #{tokens.get(border-radius)};
+    border-width: #{tokens.get(border-width)};
+    border-style: solid;
+    border-color: transparent;
+    
+    background-color: #{tokens.get(thumb-container)};
+    background-clip: content-box;
+
+    &:hover {
+      background-color: #{tokens.get(thumb-container-hover)};
+    }
+  }
+}

package/styles/core/styles/shape/index.scss

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../core/config';
+@use '../tokens/shape/tokens';
+@use '../utils';
+
+///
+/// Creates a `border-radius` style using the provided radius token.
+/// 
+@mixin radius($radius) {
+  border-radius: variable($radius);
+}
+
+///
+/// Gets a CSS custom property declaration for a specific shape token, with its token value as the fallback value.
+/// 
+@function variable($key, $prefix: config.$prefix) {
+  @return utils.variable(shape, tokens.$tokens, $key, $prefix);
+}
+
+///
+/// Generates CSS custom property declarations for the provided shape tokens.
+/// 
+@mixin provide($tokens, $prefix: config.$prefix) {
+  @include utils.provide(tokens.$tokens, $tokens, shape, $prefix);
+}
+