@tylertech/forge 3.0.0-next.21 → 3.0.0-next.23

package/styles/card/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/card/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: card;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/styles/card/card.scss

@@ -3,14 +3,48 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+.forge-card {
+  @include tokens;
+}
+
+.forge-card {
+  @include base;
+}
+
+//
+// Raised
+//
+
+:host([raised]) {
+  .forge-card {
+    @include raised;
+  }
+}
+
+//
+// Padding
+//
+
+:host([no-padding]) {
+  .forge-card {
+    @include override(padding, 0, value);
+  }
+}

package/{esm/radio/radio-group/radio-group-component-delegate.d.ts → styles/card/index.scss}

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

package/styles/checkbox/_core.scss

@@ -10,6 +10,7 @@
 
 @mixin host {
   display: inline-block;
+  outline: none;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -24,6 +25,10 @@
   display: flex;
 }
 
+@mixin dense {
+  @include override(gap, dense-gap);
+}
+
 @mixin checkbox-disabled {
   opacity: #{token(disabled-opacity)};
 }
@@ -51,20 +56,6 @@
   cursor: not-allowed;
 }
 
-@mixin input {
-  position: absolute;
-  z-index: 1;
-
-  appearance: none;
-
-  outline: none;
-  margin: 0;
-  inline-size: 100%;
-  block-size: 100%;
-
-  cursor: unset;
-}
-
 @mixin background {
   position: relative;
   align-items: center;
@@ -72,7 +63,7 @@
 
   display: flex;
 
-  transition-property: background-color, border-width, border-color;
+  transition-property: background, border-width, border-color;
   transition-duration: #{token(animation-duration)};
   transition-timing-function: #{token(background-animation-timing)};
 
@@ -85,7 +76,7 @@
   block-size: #{token(height)};
   inline-size: #{token(width)};
 
-  background-color: #{token(background-color)};
+  background: #{token(background)};
 }
 
 @mixin background-checked {
@@ -93,7 +84,7 @@
   border-width: #{token(checked-border-width)};
   border-color: #{token(checked-border-color)};
 
-  background-color: #{token(checked-background-color)};
+  background: #{token(checked-background)};
 }
 
 @mixin icon {
@@ -154,7 +145,5 @@
 @mixin label {
   @include typography.style(label1);
 
-  &:empty {
-    display: none;
-  }
+  cursor: default;
 }

package/styles/checkbox/checkbox.scss

@@ -27,10 +27,6 @@
     @include container;
   }
 
-  .input {
-    @include input;
-  }
-
   .background {
     @include background;
   }
@@ -52,10 +48,6 @@
   .label {
     @include label;
   }
-
-  ::slotted([slot=input]) {
-    @include input;
-  }
 }
 
 // Checked
@@ -107,6 +99,8 @@
 // Dense
 :host([dense]) {
   .forge-checkbox {
+    @include dense;
+
     .container {
       @include container-dense;
     }

package/styles/chip-field/_core.scss

@@ -3,23 +3,27 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './selector';
-@use '../field/selector' as field-selector;
+@use './token-utils' as *;
 
-@mixin core-styles {
-  .forge-chip-field {
-    @include field-selector.field(forge-chip-field, $exclude: (height));
-    @include selector.field;
-  }
+@forward './token-utils';
 
-  .forge-field {
-    @include selector.label-input-container;
-    @include selector.input-container;
-    @include selector.member;
-    @include selector.input;
-    @include selector.leading;
-    @include selector.trailing;
-    @include selector.addon-end;
-    @include selector.icon-button;
-  }
+@mixin host {
+  display: block;
+}
+
+@mixin container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: #{token(member-spacing)};
+  block-size: auto;
+}
+
+@mixin has-members {
+  margin-block: #{token(content-spacing)};
+}
+
+@mixin input {
+  flex-grow: 1;
+  cursor: inherit;
 }

package/styles/chip-field/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/chip-field/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: chip-field;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

package/styles/chip-field/chip-field.scss

@@ -3,14 +3,79 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../field';
+@use '../chips/chip';
+@use '../core/styles/theme';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+forge-field {
+  @include tokens;
+}
+
+.container {
+  @include container;
+  
+  &.has-members {
+    @include has-members;
+
+    ::slotted(input) {
+      block-size: auto;
+      inline-size: auto;
+    }
+  }
+}
+
+::slotted(input) {
+  @include input;
+  @include field.default-slot-content;
+}
+
+//
+// Field
+//
+
+forge-field {
+  display: contents;
+
+  @include field.provide-theme((
+    multiline-resize: none
+  ));
+
+  &::part(label) {
+    &::after {
+      content: none; // Hiding the field's multiline box shadow on the label
+    }
+  }
+}
+
+//
+// Theme
+//
+
+$themes: (primary, secondary, tertiary, success, warning, error, info);
+@each $theme in $themes {
+  :host([theme=#{$theme}]) {
+    ::slotted([slot=member]) {
+      @include chip.provide-theme((
+        field-background: theme.variable($theme),
+        field-color: theme.variable(on-#{$theme})
+      ));
+    }
+  }
+}

package/{dist/popup/forge-popup.css → styles/chip-field/index.scss}

@@ -3,4 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-.forge-popup-host{position:relative}
+@forward './core';

package/styles/chips/chip/_core.scss

@@ -9,7 +9,7 @@
 @forward './token-utils';
 
 @mixin host {
-  display: inline-block;
+  display: inline-flex;
 }
 
 @mixin base {

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../animation';
+@use '../../shape';
+@use '../../elevation';
+@use '../../spacing';
+@use '../../utils';
+
+$tokens: (
+  // Base
+  background: utils.module-val(backdrop, background, #000),
+  opacity: utils.module-val(backdrop, opacity, theme.emphasis(medium)),
+  z-index: utils.module-val(backdrop, z-index, elevation.z-index-variable(backdrop)),
+
+  // Animation
+  enter-animation-duration: utils.module-val(backdrop, enter-animation-duration, animation.variable(duration-short4)),
+  enter-animation-easing: utils.module-val(backdrop, enter-animation-easing, animation.variable(easing-standard)),
+  exit-animation-duration: utils.module-val(backdrop, exit-animation-duration, animation.variable(duration-short1)),
+  exit-animation-easing: utils.module-val(backdrop, exit-animation-easing, animation.variable(easing-emphasized-accelerate)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../theme';
+@use '../../border';
+@use '../../spacing';
+@use '../../shape';
+@use '../../elevation';
+@use '../../utils';
+
+$tokens: (
+  // Base
+  background: utils.module-val(card, background, theme.variable(surface)),
+  height: utils.module-val(card, height, 100%),
+  width: utils.module-val(card, width, 100%),
+  outline-color: utils.module-val(card, outline-color, theme.variable(outline)),
+  outline-width: utils.module-val(card, outline-width, border.variable(thin)),
+  outline-style: utils.module-val(card, outline-style, solid),
+  elevation: utils.module-val(card, elevation, none),
+  padding: utils.module-val(card, padding, spacing.variable(medium)),
+  shape: utils.module-val(card, shape, shape.variable(medium)),
+  overflow: utils.module-val(card, overflow, hidden),
+
+  // Raised
+  raised-elevation: utils.module-val(card, raised-elevation, elevation.value(1)),
+  raised-outline-width: utils.module-val(card, raised-outline-width, 0)
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -21,7 +21,7 @@ $tokens: (
   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)),
+  background: utils.module-val(checkbox, background, theme.variable(surface)),
   width: utils.module-ref(checkbox, width, size),
   height: utils.module-ref(checkbox, height, size),
   unchecked-border-width: utils.module-ref(checkbox, unchecked-border-width, border-width),
@@ -30,9 +30,9 @@ $tokens: (
   elevation: utils.module-val(checkbox, elevation, elevation.value(0)),
   
   // Checkbox checked
-  checked-background-color: utils.module-ref(checkbox, checked-background-color, primary-color),
+  checked-background: utils.module-ref(checkbox, checked-background, primary-color),
   checked-border-width: utils.module-ref(checkbox, checked-border-width, border-width),
-  checked-border-color: utils.module-ref(checkbox, checked-border-color, checked-background-color),
+  checked-border-color: utils.module-ref(checkbox, checked-border-color, checked-background),
 
   // Icon
   icon-checked-color: utils.module-ref(checkbox, icon-checked-color, icon-color),
@@ -41,7 +41,7 @@ $tokens: (
 
   // Label
   gap: utils.module-val(checkbox, gap, 0),
-  justify: utils.module-val(checkbox, justify, space-between),
+  justify: utils.module-val(checkbox, justify, start),
   direction: utils.module-val(checkbox, direction, initial),
 
   // State layer
@@ -52,6 +52,7 @@ $tokens: (
   state-layer-shape: utils.module-val(checkbox, state-layer-shape, shape.variable(full)),
 
   // Dense
+  dense-gap: utils.module-val(checkbox, dense-gap, 8px),
   state-layer-dense-width: utils.module-ref(checkbox, state-layer-dense-width, state-layer-dense-size),
   state-layer-dense-height: utils.module-ref(checkbox, state-layer-dense-height, state-layer-dense-size),
 

package/styles/core/styles/tokens/chip-field/_tokens.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../spacing';
+@use '../../utils';
+
+$tokens: (
+  member-spacing: utils.module-val(chip-field, member-spacing, spacing.variable(xsmall)),
+  content-spacing: utils.module-val(chip-field, content-spacing, spacing.variable(xxsmall))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../theme';
+@use '../../animation';
+@use '../../shape';
+@use '../../elevation';
+@use '../../spacing';
+@use '../backdrop/tokens' as backdrop;
+
+$tokens: (
+  // Base
+  background: utils.module-val(dialog, background, theme.variable(surface-bright)),
+  shape: utils.module-val(dialog, shape, shape.variable(medium)),
+  elevation: utils.module-val(dialog, elevation, elevation.value(24)),
+  spacing: utils.module-val(dialog, spacing, auto),
+  block-start-spacing: utils.module-ref(dialog, block-start-spacing, spacing),
+  block-end-spacing: utils.module-ref(dialog, block-end-spacing, spacing),
+  inline-start-spacing: utils.module-ref(dialog, inline-start-spacing, spacing),
+  inline-end-spacing: utils.module-ref(dialog, inline-end-spacing, spacing),
+  padding: utils.module-val(dialog, padding, 0),
+  width: utils.module-val(dialog, width, fit-content),
+  height: utils.module-val(dialog, height, fit-content),
+  min-width: utils.module-val(dialog, min-width, 0),
+  max-width: utils.module-val(dialog, max-width, calc(100% - #{spacing.variable(xxlarge)})),
+  min-height: utils.module-val(dialog, min-height, 0),
+  max-height: utils.module-val(dialog, max-height, calc(100% - #{spacing.variable(xxlarge)})),
+  z-index: utils.module-val(dialog, z-index, elevation.z-index-variable(dialog)),
+
+  // Move handle
+  move-handle-color: utils.module-val(dialog, move-handle-color, currentColor),
+  move-handle-size: utils.module-val(dialog, move-handle-size, 24px),
+  move-handle-hover-cursor: utils.module-val(dialog, move-handle-hover-cursor, grab),
+  move-handle-active-cursor: utils.module-val(dialog, move-handle-active-cursor, grabbing),
+  move-handle-spacing: utils.module-val(dialog, move-handle-spacing, calc(spacing.variable(xxsmall) * -1) 0 0),
+  move-transition-duration: utils.module-val(dialog, move-transition-duration, animation.variable(duration-short4)),
+  move-transition-easing: utils.module-val(dialog, move-transition-easing, animation.variable(easing-standard)),
+  moving-opacity: utils.module-val(dialog, moving-opacity, theme.emphasis(medium)),
+
+  // Animation
+  enter-animation-duration: utils.module-val(dialog, enter-animation-duration, animation.variable(duration-medium1)),
+  enter-animation-easing: utils.module-val(dialog, enter-animation-easing, animation.variable(easing-standard)),
+  exit-animation-duration: utils.module-val(dialog, exit-animation-duration, animation.variable(duration-short2)),
+  exit-animation-easing: utils.module-val(dialog, exit-animation-easing, animation.variable(easing-emphasized-accelerate)),
+
+  // Zoom animation
+  zoom-opacity: utils.module-val(dialog, zoom-opacity, 0),
+  zoom-scale: utils.module-val(dialog, zoom-scale, 0.8),
+
+  // Fade animation
+  fade-opacity: utils.module-val(dialog, fade-opacity, 0),
+
+  // Slide animation
+  slide-opacity: utils.module-val(dialog, slide-opacity, 0),
+  slide-translate: utils.module-val(dialog, slide-translate, 0 -30%),
+
+  // Backdrop
+  backdrop-opacity: utils.module-val(dialog, backdrop-opacity, backdrop.get(opacity)),
+
+  // Non modal
+  nonmodal-elevation: utils.module-val(dialog, nonmodal-elevation, elevation.value(4)),
+
+  // Fullscreen
+  fullscreen-enter-animation-duration: utils.module-val(dialog, fullscreen-enter-animation-duration, animation.variable(duration-medium1)),
+  fullscreen-exit-animation-duration: utils.module-val(dialog, fullscreen-exit-animation-duration, animation.variable(duration-short2)),
+
+  // Custom position
+  position-x: utils.module-val(dialog, position-x, 0),
+  position-y: utils.module-val(dialog, position-y, 0),
+
+  // Preset
+  preset-sheet-enter-animation-duration: utils.module-val(dialog, preset-sheet-enter-animation-duration, animation.variable(duration-medium1)),
+  preset-sheet-exit-animation-duration: utils.module-val(dialog, preset-sheet-exit-animation-duration, animation.variable(duration-short3)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -24,6 +24,8 @@ $tokens: (
   container-padding-inline: utils.module-val(field, container-padding-inline, 12px),
   container-padding-inline-start: utils.module-ref(field, container-padding-inline-start, container-padding-inline),
   container-padding-inline-end: utils.module-ref(field, container-padding-inline-end, container-padding-inline),
+  container-extra-small-padding-inline-start: utils.module-val(field, container-extra-small-padding-inline-start, 8px),
+  container-extra-small-padding-inline-end: utils.module-val(field, container-extra-small-padding-inline-end, 4px),
   container-gap: utils.module-val(field, container-gap, 8px),
   start-padding-inline-end: utils.module-ref(field, start-padding-inline-end, container-gap),
   end-padding-inline-start: utils.module-ref(field, end-padding-inline-start, container-gap),
@@ -123,7 +125,7 @@ $tokens: (
   multiline-resize: utils.module-val(field, multiline-resize, vertical),
   multiline-min-inline-size: utils.module-val(field, multiline-min-inline-size, initial),
   multiline-max-inline-size: utils.module-val(field, multiline-max-inline-size, initial),
-  multiline-min-block-size: utils.module-val(field, multiline-min-block-size, initial),
+  multiline-min-block-size: utils.module-ref(field, multiline-min-block-size, height),
   multiline-max-block-size: utils.module-val(field, multiline-max-block-size, initial),
 
   // Disabled

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../typography';
+@use '../../utils';
+
+$tokens: (
+  color: utils.module-val(icon, color, currentColor),
+  size: utils.module-val(icon, size, 1em),
+  width: utils.module-ref(icon, width, size),
+  height: utils.module-ref(icon, height, size),
+  font-size: utils.module-val(icon, font-size, typography.font-size-relative('1500'))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/label-value/_tokens.scss

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../theme';
+@use '../../spacing';
+@use '../../utils';
+
+$tokens: (
+  // Base
+  align: utils.module-val(label-value, align, start),
+
+  // Label
+  label-spacing: utils.module-val(label-value, label-spacing, spacing.variable(xxsmall)),
+  label-block-start-spacing: utils.module-ref(label-value, label-block-start-spacing, label-spacing),
+  label-block-end-spacing: utils.module-ref(label-value, label-block-end-spacing, label-spacing),
+  label-color: utils.module-val(label-value, label-color, theme.variable(text-medium)),
+
+  // Icon
+  icon-spacing: utils.module-val(label-value, icon-spacing, spacing.variable(xxsmall)),
+
+  // Inline label
+  inline-label-spacing: utils.module-val(label-value, inline-label-spacing, spacing.variable(xsmall)),
+
+  // Empty
+  empty-color: utils.module-val(label-value, empty-color, theme.variable(text-medium)),
+  empty-style: utils.module-val(label-value, empty-style, italic),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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

@@ -6,9 +6,8 @@
 @use '../../../utils';
 
 $tokens: (
-  container-color: utils.module-val(list, container-color, transparent),
-  block-padding: utils.module-val(list, block-padding, 8px),
-  inline-padding: utils.module-val(list, inline-padding, 0),
+  spacing: utils.module-val(list, spacing, 0),
+  container-color: utils.module-val(list, container-color, transparent)
 ) !default;
 
 @function get($key) {