@tylertech/forge 3.0.0-next.1 → 3.0.0-next.11

package/styles/linear-progress/_core.scss

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:list';
+@use '../core/styles/utils';
+@use '../core/styles/tokens/linear-progress/tokens';
+@use '../theme';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, linear-progress);
+}
+
+@mixin container {
+  display: block;
+  position: relative;
+  min-inline-size: 80px;
+  block-size: #{tokens.get(track-height)};
+  content-visibility: auto;
+  contain: strict;
+}
+
+@mixin progress {
+  inset: 0;
+  outline: transparent solid 1px;
+  border-radius: var(--_track-shape);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+@mixin bar {
+  animation: none;
+  inline-size: 100%;
+  block-size: var(--_active-indicator-height);
+  transform-origin: left center;
+  will-change: transform;
+  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+}
+
+@mixin secondary-bar {
+  display: none;
+}
+
+@mixin bar-inner {
+  inset: 0;
+  animation: none;
+  background: var(--_active-indicator-color);
+}
+
+@mixin buffer-bar {
+  background: var(--_track-color);
+  inset: 0;
+  will-change: transform;
+  transition: transform var(--_determinate-duration) var(--_determinate-easing);
+  transform-origin: left center;
+}
+
+@mixin track {
+  inset: 0;
+  will-change: transform;
+  animation: linear infinite var(--_determinate-duration);
+  animation-name: buffering;
+  background: var(--_track-background);
+}
+
+@mixin indeterminate-bar {
+  transition: none;
+}
+
+@mixin indeterminate-primary-bar {
+  inset-inline-start: -145.167%;
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration);
+  animation-name: primary-indeterminate-translate;
+}
+
+@mixin indeterminate-secondary-bar {
+  inset-inline-start: -54.8889%;
+  display: block;
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration);
+  animation-name: secondary-indeterminate-translate;
+}
+
+@mixin indeterminate-track {
+  display: none;
+}
+
+@mixin indeterminate-primary-bar-inner {
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration) primary-indeterminate-scale;
+}
+
+@mixin indeterminate-secondary-bar-inner {
+  will-change: transform;
+  animation: linear infinite var(--_indeterminate-duration) secondary-indeterminate-scale;
+}

package/styles/linear-progress/index.scss

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './animations';
+@forward './configuration';
+@forward './core';

package/styles/linear-progress/linear-progress.scss

@@ -3,38 +3,121 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/linear-progress/mdc-linear-progress';
-@use '@material/linear-progress/mixins' as mdc-linear-progress-mixins;
-@use '../theme';
-@use './variables';
+@use './animations';
+@use './configuration';
+@use './core';
 
+/// Host styles
 :host {
-  display: block;
+  @include core.container;
 }
 
 :host([hidden]) {
   display: none;
 }
 
+/// Base styles
+.forge-linear-progress {
+  @include configuration.configuration;
+  @include core.progress;
+}
+
+.forge-linear-progress,
+.track,
+.buffer-bar,
+.bar,
+.bar-inner {
+  position: absolute;
+}
+
+.bar {
+  @include core.bar;
+}
+
+.secondary-bar {
+  @include core.secondary-bar;
+}
+
+.bar-inner {
+  @include core.bar-inner;
+}
+
+.buffer-bar {
+  @include core.buffer-bar;
+}
+
+.track {
+  @include core.track;
+}
+
+/// Indeterminate styles
+.forge-linear-progress--indeterminate {
+  .bar {
+    @include core.indeterminate-bar;
+  }
 
-///
-/// Custom Tyler theming below
-///
+  .primary-bar {
+    @include core.indeterminate-primary-bar;
+  }
 
-@include mdc-linear-progress-mixins.buffer-color(variables.$buffer-color);
+  .secondary-bar {
+    @include core.indeterminate-secondary-bar;
+  }
 
-.mdc-linear-progress {
-  @include theme.css-custom-property(border-radius, --forge-linear-progress-border-radius, inherit);
-  
-  &__bar-inner {
-    @include theme.property(border-color, tertiary);
+  .track {
+    @include core.indeterminate-track;
   }
 
-  &__buffer-bar {
-    @include theme.css-custom-property(background-color, --forge-linear-progress-theme-buffer, variables.$buffer-color);
+  .primary-bar > .bar-inner {
+    @include core.indeterminate-primary-bar-inner;
   }
 
-  &__buffer-dots {
-    @include theme.css-custom-property(filter, --forge-linear-progress-theme-buffer-dots, variables.$buffer-dots-color);
+  .secondary-bar > .bar-inner {
+    @include core.indeterminate-secondary-bar-inner;
   }
 }
+
+/// RTL styles
+$rtl-selectors: (
+  ':host-context([dir="rtl"]) .forge-linear-progress',
+  ':host([dir="rtl"]) .forge-linear-progress',
+  '.forge-linear-progress:dir(rtl)'
+);
+
+@each $selector in $rtl-selectors {
+  #{$selector} {
+    .bar {
+      transform-origin: right center;
+    }
+
+    .buffer-bar {
+      transform-origin: right center;
+    }
+
+    .track {
+      animation-name: buffering-rtl;
+    }
+
+    &.forge-linear-progress--indeterminate .primary-bar {
+      animation-name: primary-indeterminate-translate-rtl;
+    }
+
+    &.forge-linear-progress--indeterminate .secondary-bar {
+      animation-name: secondary-indeterminate-translate-rtl;
+    }
+  }
+}
+
+@media screen and (forced-colors: active) {
+  .forge-linear-progress {
+    --_active-indicator-color: canvastext;
+    --_track-color: graytext;
+    border: 1px solid canvastext;
+
+    &.forge-linear-progress--indeterminate {
+      --_track-color: canvas;
+    }
+  }
+}
+
+@include animations.keyframes;

package/styles/list/list-item/_mixins.scss

@@ -77,10 +77,17 @@
       ::slotted(.forge-list-item__title) {
         @include mdc-typography.typography(body2);
       }
+
+      &.forge-list-item--two-line {
+        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-two-line-height);
+      }
+
+      &.forge-list-item--three-line {
+        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-three-line-height);
+      }
     }
   
     &--wrap {
-      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$single-line-height);
       @include theme.css-custom-property(height, --forge-list-item-height, auto);
 
       ::slotted([slot=title]),
@@ -348,14 +355,17 @@
 }
 
 @mixin two-line() {
+  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$two-line-height);
   @include theme.css-custom-property(height, --forge-list-item-height, variables.$two-line-height);
 }
 
 @mixin three-line() {
+  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$three-line-height);
   @include theme.css-custom-property(height, --forge-list-item-height, variables.$three-line-height);
 }
 
 @mixin dense() {
+  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-single-line-height);
   @include theme.css-custom-property(height, --forge-list-item-height, variables.$dense-height);
 }
 

package/styles/list/list-item/_variables.scss

@@ -12,6 +12,15 @@ $drawer-inline-padding: #{math.div($inline-padding, 2)};
 /// The default height for a single line list item.
 $single-line-height: #{48px - $block-padding * 2} !default;
 
+/// The default height for a single line list item.
+$dense-single-line-height: #{32px - $block-padding * 2} !default;
+
+/// The default height for a two line list item.
+$dense-two-line-height: #{56px - $block-padding * 2} !default;
+
+/// The default height for a three line list item.
+$dense-three-line-height: #{72px - $block-padding * 2} !default;
+
 /// The default min-height for a single line list item in a drawer context.
 $drawer-single-line-height: 40px !default;
 

package/styles/slider/_configuration.scss

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/slider/tokens';
+
+// The max clip is reduced by 1 full tick display which is 2x the container
+// size to account for always showing the active track on the outside
+// edge of the last tick.
+$_active-track-max-clip: calc(100% - var(--_with-tick-marks-container-size) * 2);
+
+// When the start fraction is !0, add clipping by the tick container size
+$_start-fraction-not-zero: min(var(--_start-fraction) * 1e9, 1);
+$_active-track-start-offset: calc(var(--_with-tick-marks-container-size) * $_start-fraction-not-zero);
+$_active-track-start-clip: calc($_active-track-start-offset + $_active-track-max-clip * var(--_start-fraction));
+
+// When the end fraction is !1, add clipping by the tick container size
+$_end-fraction-not-one: min((1 - var(--_end-fraction)) * 1e9, 1);
+$_active-track-end-offset: calc(var(--_with-tick-marks-container-size) * $_end-fraction-not-one);
+$_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-clip * (1 - var(--_end-fraction)));
+
+@mixin configuration {
+  // Internal state variables
+  --_start-fraction: 0;
+  --_end-fraction: 0;
+  --_tick-count: 100;
+
+  // External state variables
+  --_track-height: #{tokens.get(track-height)};
+  --_active-track-color: #{tokens.get(active-track-color)};
+  --_active-track-height: #{tokens.get(active-track-height)};
+  --_active-track-shape: #{tokens.get(active-track-shape)};
+  --_disabled-active-track-color: #{tokens.get(disabled-active-track-color)};
+  --_disabled-active-track-opacity: #{tokens.get(disabled-active-track-opacity)};
+  --_disabled-handle-color: #{tokens.get(disabled-handle-color)};
+  --_disabled-inactive-track-color: #{tokens.get(disabled-inactive-track-color)};
+  --_disabled-inactive-track-opacity: #{tokens.get(disabled-inactive-track-opacity)};
+  --_focus-handle-color: #{tokens.get(focus-handle-color)};
+  --_handle-color: #{tokens.get(handle-color)};
+  --_handle-height: #{tokens.get(handle-height)};
+  --_handle-shape: #{tokens.get(handle-shape)};
+  --_handle-width: #{tokens.get(handle-width)};
+  --_hover-handle-color: #{tokens.get(hover-handle-color)};
+  --_inactive-track-color: #{tokens.get(inactive-track-color)};
+  --_inactive-track-height: #{tokens.get(inactive-track-height)};
+  --_inactive-track-shape: #{tokens.get(inactive-track-shape)};
+  --_label-container-shape: #{tokens.get(label-container-shape)};
+  --_label-container-color: #{tokens.get(label-container-color)};
+  --_label-container-height: #{tokens.get(label-container-height)};
+  --_label-text-color: #{tokens.get(label-text-color)};
+  --_pressed-handle-color: #{tokens.get(pressed-handle-color)};
+  --_state-layer-size: #{tokens.get(state-layer-size)};
+  --_with-overlap-handle-outline-color: #{tokens.get(with-overlap-handle-outline-color)};
+  --_with-overlap-handle-outline-width: #{tokens.get(with-overlap-handle-outline-width)};
+  --_with-tick-marks-active-container-color: #{tokens.get(with-tick-marks-active-container-color)};
+  --_with-tick-marks-container-size: #{tokens.get(with-tick-marks-container-size)};
+  --_with-tick-marks-disabled-active-container-color: #{tokens.get(with-tick-marks-disabled-active-container-color)};
+  --_with-tick-marks-disabled-inactive-container-color: #{tokens.get(with-tick-marks-disabled-inactive-container-color)};
+  --_with-tick-marks-inactive-container-color: #{tokens.get(with-tick-marks-inactive-container-color)};
+}

package/styles/slider/_core.scss

@@ -0,0 +1,344 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/utils';
+@use '../core/styles/tokens/slider/tokens';
+@use '../core/styles/elevation';
+@use '../core/styles/typography';
+@use '../core/styles/animation';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, slider);
+}
+
+// The max clip is reduced by 1 full tick display which is 2x the container
+// size to account for always showing the active track on the outside
+// edge of the last tick.
+$_active-track-max-clip: calc(100% - var(--_with-tick-marks-container-size) * 2);
+
+// When the start fraction is !0, add clipping by the tick container size
+$_start-fraction-not-zero: min(var(--_start-fraction) * 1e9, 1);
+$_active-track-start-offset: calc(var(--_with-tick-marks-container-size) * $_start-fraction-not-zero);
+$_active-track-start-clip: calc($_active-track-start-offset + $_active-track-max-clip * var(--_start-fraction));
+
+// When the end fraction is !1, add clipping by the tick container size
+$_end-fraction-not-one: min((1 - var(--_end-fraction)) * 1e9, 1);
+$_active-track-end-offset: calc(var(--_with-tick-marks-container-size) * $_end-fraction-not-one);
+$_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-clip * (1 - var(--_end-fraction)));
+
+@mixin container {
+  display: inline-flex;
+  vertical-align: middle;
+  min-inline-size: 100%;
+}
+
+@mixin slider {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  position: relative;
+  block-size: var(--_state-layer-size);
+  pointer-events: none;
+  touch-action: none;
+}
+
+@mixin range {
+  // Clip the inputs to the space left/right of the center point between the
+  // values so the right input gets pointer events.
+  $_clip-to-start: calc(
+    var(--_state-layer-size) / 2 + (100% - var(--_state-layer-size)) *
+    (var(--_start-fraction) + ((var(--_end-fraction) - var(--_start-fraction)) / 2))
+  );
+
+  $_clip-to-end: calc(100% - $_clip-to-start);
+
+  // in 'rtl', clip right side of "lesser" input
+  @each $_rtl-selector in get-rtl-selectors('input.start') {
+    #{$_rtl-selector} {
+      clip-path: inset(0 0 0 $_clip-to-end);
+    }
+  }
+
+  input.start {
+    clip-path: inset(0 $_clip-to-end 0 0);
+  }
+
+  input.end {
+    clip-path: inset(0 0 0 $_clip-to-start);
+  }
+
+  // in 'rtl', clip left side of "greater" input
+  @each $_rtl-selector in get-rtl-selectors('input.end') {
+    #{$_rtl-selector} {
+      clip-path: inset(0 $_clip-to-start 0 0);
+    }
+  }
+}
+
+@mixin track {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+}
+
+@mixin track-dimensions {
+  $_track-padding: calc((var(--_state-layer-size) / 2) - var(--_with-tick-marks-container-size));
+
+  position: absolute;
+  inset-inline-start: $_track-padding;
+  inset-inline-end: $_track-padding;
+  background-size: calc((100% - var(--_with-tick-marks-container-size) * 2) / var(--_tick-count)) 100%;
+}
+
+@mixin track-active {
+  block-size: var(--_active-track-height);
+  border-radius: var(--_active-track-shape);
+  clip-path: inset(0 $_active-track-end-clip 0 $_active-track-start-clip);
+  background-color: var(--_active-track-color);
+}
+
+@mixin track-inactive {
+  block-size: var(--_inactive-track-height);
+  border-radius: var(--_inactive-track-shape);
+
+  // TODO: remove this and the @supports check below when we're confident that color-mix is more widely supported
+  background-color: var(--_inactive-track-color-fallback);
+
+  @supports (background-color: color-mix(in srgb, red 50%, transparent)) {
+    background-color: var(--_inactive-track-color);
+  }
+}
+
+@mixin track-active-disabled {
+  background-color: var(--_disabled-active-track-color);
+}
+
+@mixin track-inactive-disabled {
+  opacity: calc((1 / var(--_disabled-active-track-opacity)) * var(--_disabled-inactive-track-opacity));
+  background-color: var(--_disabled-inactive-track-color);
+}
+
+@mixin rtl-track-clipping {
+  clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
+}
+
+@mixin tickmarks-inactive {
+  background-image: get-tick-image('var(--_with-tick-marks-inactive-container-color)');
+}
+
+@mixin tickmarks-active {
+  background-image: get-tick-image('var(--_with-tick-marks-active-container-color)');
+}
+
+@mixin tickmarks-active-disabled {
+  background-image: get-tick-image('var(--_with-tick-marks-disabled-active-container-color)');
+}
+
+@mixin tickmarks-inactive-disabled {
+  background-image: get-tick-image('var(--_with-tick-marks-disabled-inactive-container-color)');
+}
+
+@mixin handle-container-dimensions {
+  position: relative;
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+@mixin handle-container-padded {
+  padding-inline: calc(var(--_state-layer-size) / 2);
+}
+
+@mixin handle-container {
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: calc(100% * var(--_start-fraction));
+  inline-size: calc(100% * (var(--_end-fraction) - var(--_start-fraction)));
+}
+
+@mixin handle {
+  position: absolute;
+  block-size: var(--_state-layer-size);
+  inline-size: var(--_state-layer-size);
+  border-radius: var(--_handle-shape);
+  display: grid;
+  place-items: center;
+}
+
+@mixin handle-start {
+  inset-inline-start: calc(0px - var(--_state-layer-size) / 2);
+}
+
+@mixin handle-end {
+  inset-inline-end: calc(0px - var(--_state-layer-size) / 2);
+}
+
+@mixin handle-thumb {
+  @include elevation.box-shadow(1);
+
+  position: absolute;
+  height: var(--_handle-height);
+  width: var(--_handle-width);
+  border-radius: var(--_handle-shape);
+  background: var(--_handle-color);
+}
+
+@mixin handle-thumb-hover {
+  background: var(--_hover-handle-color);
+}
+
+@mixin handle-thumb-pressed {
+  background: var(--_pressed-handle-color);
+}
+
+@mixin handle-thumb-focused {
+  background: var(--_focus-handle-color);
+}
+
+@mixin handle-thumb-disabled {
+  @include elevation.box-shadow(0);
+
+  background: var(--_disabled-handle-color);
+}
+
+@mixin handle-label {
+  @include typography.style(label, [color font-weight]);
+
+  position: absolute;
+  box-sizing: border-box;
+  display: grid;
+  padding: 4px;
+  place-items: center;
+  border-radius: var(--_label-container-shape);
+  color: var(--_label-text-color);
+  font-weight: 500;
+  white-space: nowrap;
+  inset-block-end: 100%;
+  min-inline-size: var(--_label-container-height);
+  min-block-size: var(--_label-container-height);
+  background: var(--_label-container-color);
+  transition: transform animation.variable(duration-short2) animation.variable(easing-standard);
+  transform-origin: center bottom;
+  transform: scale(0);
+}
+
+@mixin handle-label-disabled {
+  background: var(--_disabled-handle-color);
+}
+
+@mixin handle-label-content {
+  z-index: 1;
+}
+
+@mixin handle-label-base {
+  position: absolute;
+  display: block;
+  background: inherit;
+}
+
+@mixin handle-label-top {
+  inset: 0;
+  border-radius: inherit;
+}
+
+@mixin handle-label-bottom {
+  $_triangle-size: calc(var(--_label-container-height) / 2);
+  inline-size: $_triangle-size;
+  block-size: $_triangle-size;
+  bottom: calc(var(--_label-container-height) / -10);
+  transform: rotate(45deg);
+}
+
+@mixin handle-label-visible {
+  transform: scale(1);
+}
+
+@mixin input-disabled {
+  cursor: not-allowed;
+}
+
+@mixin handles-overlapping {
+  border: var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width);
+}
+
+@mixin on-top {
+  z-index: 1;
+}
+
+@mixin input {
+  opacity: 0;
+  -webkit-tap-highlight-color: transparent;
+  position: absolute;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  pointer-events: auto;
+  appearance: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+  }
+
+  &::-moz-range-track {
+    appearance: none;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    block-size: var(--_state-layer-size);
+    inline-size: var(--_state-layer-size);
+    transform: scaleX(0);
+    opacity: 0;
+    z-index: 2;
+  }
+
+  &::-moz-range-thumb {
+    appearance: none;
+    block-size: var(--_state-layer-size);
+    inline-size: var(--_state-layer-size);
+    transform: scaleX(0);
+    opacity: 0;
+    z-index: 2;
+  }
+}
+
+///
+/// Adapted and influenced from [Material Web](https://github.com/material-components/material-web).
+/// The original source code can be found at [GitHub](https://github.com/material-components/material-web/blob/main/slider/lib/_slider.scss)
+///
+
+// Returns a background-image with sized circular ticks of the given color.
+@function get-tick-image($color) {
+  @return radial-gradient(
+    circle at var(--_with-tick-marks-container-size) center,
+    #{$color} 0,
+    #{$color} calc(var(--_with-tick-marks-container-size) / 2),
+    transparent calc(var(--_with-tick-marks-container-size) / 2)
+  );
+}
+
+// Returns a list of rtl selectors to construct distinct rulesets. Separating
+// rulesets ensure they are not dropped on browsers where one is not supported;
+// note, `:where` cannot be used to create compound selectors that contain
+// pseudo elements
+// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`),
+@function get-rtl-selectors($selector: '', $suffix: '') {
+  @return (
+    // TODO: remove selectors other than `:dir` when browser support improves.
+    ':host-context([dir="rtl"]) #{$selector}#{$suffix}',
+    ':host([dir="rtl"]) #{$selector}#{$suffix}',
+    '#{$selector}:dir(rtl)#{$suffix}'
+  );
+}
+