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

package/styles/field/_core.scss

@@ -3,59 +3,209 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use 'sass:list';
-@use './selector';
+@use '../core/styles/typography';
+@use './token-utils' as *;
+@forward './core.layout';
+@forward './core.shape';
+@forward './core.slotted';
+@forward './core.state';
+@forward './core.variant';
 
-@mixin core-styles($component-name, $exclude: ()) {
+@mixin configuration {
+  @include tokens;
+}
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  @include override('input-color', #{token(text-color)}, value);
+  @include override('main-content-padding-start', #{token(container-padding-inline-start)}, value);
+  @include override('main-content-padding-end', #{token(container-padding-inline-end)}, value);
+
+  display: grid;
+  position: relative;
+}
+
+@mixin field-disabled {
+  cursor: not-allowed;
+}
+
+@mixin field-part-disabled {
+  opacity: #{token(disabled-opacity)};
+}
+
+@mixin container-background-disabled {
+  background: #{token(disabled-surface-color)};
+}
+
+@mixin outline {
+  position: relative;
+}
+
+@mixin container {
+  @include typography.style(body2);
+
+  box-sizing: border-box;
+
+  grid-area: container;
+  align-items: center;
+
+  border-radius: #{token(shape)};
+
+  inline-size: 100%;
+  block-size: #{token(height, custom)};
+}
+
+@mixin container-background {
+  position: absolute;
+
+  transition-duration: #{token(container-animation-duration)};
+  transition-property: background, outline-color;
+  transition-timing-function: #{token(container-animation-timing)};
+
+  border-radius: inherit;
+  
+  pointer-events: none;
+
+  inline-size: 100%;
+  block-size: 100%;
+
+  content: '';
+}
+
+@mixin input {
+  display: flex;
+  grid-area: center;
+
+  block-size: 100%;
+  inline-size: 100%;
+
+  color: #{token(input-color, value)};
+}
+
+@mixin label {
+  @include typography.style(label2);
+
+  display: inline-flex;
+  position: relative;
+
+  gap: #{token(label-gap)};
+  grid-area: label;
+
+  block-size: fit-content;
+
+  color: #{token(label-color)};
+}
 
-  @if list.index($exclude, field) == null {
-    .#{$component-name} {
-      @include selector.field($component-name);
-    }
+@mixin label-before {
+  color: #{token(required-color)};
+  content: #{token(required-content)};
+}
+
+@mixin label-after {
+  color: #{token(optional-color)};
+  content: #{token(optional-content)};
+}
+
+@mixin popover-icon {
+  isolation: isolate;
+  align-items: center;
+
+  display: flex;
+  grid-area: popover-icon;
+
+  block-size: 100%;
+  padding-inline-end: #{token(popover-icon-padding-inline-end)};
+
+  & > * {
+    transition: rotate #{token(popover-icon-transition-duration)} #{token(popover-icon-transition-timing)};
   }
+}
+
+@mixin popover-icon-arrow {
+  fill: inherit;
+}
+
+@mixin popover-target {
+  position: absolute;
+  inset: calc(#{token(focus-indicator-width)} * -1);
+  pointer-events: none;
+}
+
+@mixin start {
+  display: flex;
+  grid-area: start;
+  align-items: center;
+
+  padding-inline-start: #{token(container-padding-inline-start)};
+}
+
+@mixin end {
+  display: flex;
+  grid-area: end;
+  align-items: center;
+
+  padding-inline-end: #{token(end-padding-inline-end)};
+}
 
-  .forge-field {
-    @if list.index($exclude, outline) == null {
-      @include selector.outline($component-name);
-    }
-    @if list.index($exclude, label-input-container) == null {
-      @include selector.label-input-container;
-    }
-    @if list.index($exclude, label) == null {
-      @include selector.label;
-    }
-    @if list.index($exclude, floating-label) == null {
-      @include selector.floating-label;
-    }
-    @if list.index($exclude, floating-label-float-above) == null {
-      @include selector.floating-label-float-above;
-    }
-    @if list.index($exclude, floating-label-float-above-end-keyframe) == null {
-      @include selector.floating-label-float-above-end-keyframe;
-    }
-    @if list.index($exclude, floating-label-unfloat-above-start-keyframe) == null {
-      @include selector.floating-label-unfloat-above-start-keyframe;
-    }
-    @if list.index($exclude, input) == null {
-      @include selector.input;
-    }
-    @if list.index($exclude, helper-text) == null {
-      @include selector.helper-text;
-    }
-    @if list.index($exclude, leading) == null {
-      @include selector.leading;
-    }
-    @if list.index($exclude, leading-font-icon) == null {
-      @include selector.leading-font-icon;
-    }
-    @if list.index($exclude, trailing) == null {
-      @include selector.trailing;
-    }
-    @if list.index($exclude, trailing-font-icon) == null {
-      @include selector.trailing-font-icon;
-    }
-    @if list.index($exclude, addon-end) == null {
-      @include selector.addon-end;
-    }
+@mixin accessory {
+  position: relative;
+  align-items: center;
+  
+  display: flex;
+  grid-area: accessory;
+
+  block-size: 100%;
+  padding-inline-end: #{token(accessory-padding-inline-end)};
+
+  &::before {
+    transition-duration: #{token(container-animation-duration)};
+    transition-property: border-color;
+    transition-timing-function: #{token(container-animation-timing)};
+    
+    border-inline-start-style: #{token(border-style)};
+    border-inline-start-width: #{token(border-width)};
+    border-inline-start-color: #{token(inner-border-color, value)};
+
+    padding-inline-end: #{token(accessory-padding-inline-start)};
+    
+    block-size: 100%;
+
+    content: '';
   }
 }
+
+@mixin support-text {
+  @include typography.style(label1);
+
+  justify-content: space-between;
+
+  display: grid;
+  grid-template-areas: 'start end';
+  grid-template-columns: 1fr auto;
+  grid-area: support-text;
+
+  margin-block-start: #{token(support-text-margin-block)};
+
+  line-height: normal;
+}
+
+@mixin support-text-both {
+  gap: #{token(support-text-gap)};
+}
+
+@mixin support-text-start {
+  display: inline-block;
+  grid-area: start;
+}
+
+@mixin support-text-end {
+  display: inline-block;
+  grid-area: end;
+}
+
+@mixin reduced-motion {
+  @include override('floating-animation-duration', '0s', value);
+}

package/styles/{field-next → field}/_core.shape.scss

@@ -11,6 +11,11 @@
     @include override('height', #{token(inset-height-#{$density}, custom)}, value);
   } @else {
     @include override('height', #{token(height-#{$density}, custom)}, value);
+
+    @if $density == 'extra-small' {
+      @include override('container-padding-inline-start', #{token(container-extra-small-padding-inline-start)}, value);
+      @include override('container-padding-inline-end', #{token(container-extra-small-padding-inline-end)}, value);
+    }
   }
 }
 

package/styles/{field-next → field}/_core.variant.scss

@@ -107,6 +107,7 @@
 @mixin container-background-outlined($theme: default) {
   outline-style: #{token(border-style)};
   outline-width: #{token(border-width)};
+  outline-offset: calc(#{token(border-width)} * -1);
 
   @if $theme == default {
     outline-color: #{token(border-color)};

package/styles/{field-next → field}/field.scss

@@ -74,6 +74,10 @@ $variants: (
   .forge-field {
     @include core.base;
   
+    .outline {
+      @include core.outline;
+    }
+
     .container {
       @include core.container;
       @include core.container-layout;
@@ -330,7 +334,7 @@ $variants: (
   // Floating label
   //
   
-  :host(#{map.get($label-positions, inset)}[float-label]) {
+  :host(#{map.get($label-positions, inset)}[float-label]:not(:is([dense], [density=extra-small]))) {
     .forge-field--has-label {
       .label {
         @include core.floating-label;
@@ -352,11 +356,7 @@ $variants: (
 
       &:not(.forge-field--floating-in) {
         .input {
-          ::slotted(input) {
-            @include core.slotted-floating-input;
-          }
-
-          ::slotted([data-forge-multi-input-separator]) {
+          ::slotted(:is(input, [data-forge-field-input], [data-forge-multi-input-separator])) {
             @include core.slotted-floating-input;
           }
         }
@@ -432,15 +432,30 @@ $variants: (
 //
 
 @each $density, $selector in $densities {
+  // Non-inset density selectors
   :host(#{$selector}) {
     .forge-field {
       @include core.density($density);
     }
   }
 
-  :host(#{map.get($label-positions, inset)}#{$selector}) {
-    .forge-field {
-      @include core.density($density, true);
+  // Inset density selectors
+  @if $density == 'extra-small' {
+    // We always force the inset density to be same height as non-dense
+    :host(#{map.get($label-positions, inset)}#{$selector}) {
+      .forge-field {
+        @include core.density($density);
+      }
+
+      .label {
+        @include utils.visually-hidden;
+      }
+    }
+  } @else {
+    :host(#{map.get($label-positions, inset)}#{$selector}) {
+      .forge-field {
+        @include core.density($density, true);
+      }
     }
   }
 }
@@ -492,7 +507,7 @@ $variants: (
       @include core.resize-container-inset-label-slot;
     }
 
-    &::before {
+    &::after {
       @include core.resize-container-inset-label-background;
     }
   }
@@ -644,6 +659,16 @@ $variants: (
 
 .forge-field {
   .input {
+    ::slotted(input:-webkit-autofill) {
+      border-radius: #{token(shape)};
+
+      // TODO: remove when outline moves from pseudo-element to container
+      height: calc(100% - (#{token(border-width)} * 2));
+      width: calc(100% - (#{token(border-width)} * 2));
+      margin-block-start: #{token(border-width)};
+      margin-inline-start: #{token(border-width)};
+    }
+
     ::slotted(*) {
       @include core.default-slot-content;
     }
@@ -652,11 +677,13 @@ $variants: (
       @include core.default-slot-textarea;
     }
 
-    ::slotted(*:first-of-type:is(input, textarea)) {
+    ::slotted([data-forge-field-input]),
+    ::slotted(*:first-of-type:is(input, textarea, [data-forge-field-input])) {
       @include core.first-default-slot-content;
     }
 
-    ::slotted(*:last-of-type:is(input, textarea)) {
+    ::slotted([data-forge-field-input]),
+    ::slotted(*:last-of-type:is(input, textarea, [data-forge-field-input])) {
       @include core.last-default-slot-content;
     }
 

package/styles/forge-core.scss

@@ -3,12 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './utils/mixins-core';
-
-body, html {
-  @include mixins-core.root-reset;
-}
+@use './utils/mixins-core' as *;
 
 body {
-  @include mixins-core.body-base;
+  @include body-base;
 }

package/styles/forge.scss

@@ -11,11 +11,7 @@
 
 // Required global component styles
 @use './table/forge-table';
-@use './ripple/forge-ripple';
 @use './quantity-field/forge-quantity-field';
 
 // Supplemental global component styles
-@use './popup/forge-popup';
 @use './busy-indicator/forge-busy-indicator';
-@use './dialog/forge-dialog';
-@use './dialog/forge-dialog-utils';

package/styles/icon/_core.scss

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline-block;
+  box-sizing: content-box;
+  contain: content;
+
+  font-size: #{token(font-size)};
+}
+
+@mixin svg() {
+  display: block;
+
+  width: #{token(width)};
+  height: #{token(height)};
+
+  fill: #{token(color)};
+  stroke: #{token(color)};
+  stroke-width: 0;
+}

package/styles/icon/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/icon/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: icon;
+$_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/icon/icon.scss

@@ -3,24 +3,39 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../core/styles/theme';
+
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include tokens;
+}
 
-  > svg {
-    @include mixins.svg;
-  }
+:host {
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-@include mixins.theme('primary');
-@include mixins.theme('secondary');
-@include mixins.theme('warning');
-@include mixins.theme('danger');
-@include mixins.theme('success');
-@include mixins.theme('info');
-@include mixins.theme('tertiary');
+//
+// Base
+//
+
+svg {
+  @include svg;
+}
+
+//
+// Theme
+//
+
+@each $theme in [primary secondary tertiary success error warning text-medium text-low] {
+  :host([theme=#{$theme}]) {
+    @include override(color, theme.variable($theme), value);
+  }
+}

package/styles/icon/index.scss

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

package/styles/label-value/_core.scss

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+@use '../core/styles/typography';
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline-block;
+  min-width: 0;
+}
+
+@mixin base {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    'icon label'
+    'icon value';
+}
+  
+@mixin container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+@mixin icon {
+  display: inline-flex;
+  grid-area: icon;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin label {
+  @include typography.style(label2);
+  
+  grid-area: label;
+  justify-self: #{token(align)};
+  margin-block-start: #{token(label-block-start-spacing)};
+  margin-block-end: #{token(label-block-end-spacing)};
+  
+  line-height: normal;
+  text-align: #{token(align)};
+
+  color: #{token(label-color)};
+}
+
+@mixin value {
+  @include typography.style(body2);
+
+  grid-area: value;
+  display: grid;
+  align-items: center;
+  justify-self: #{token(align)};
+  
+  line-height: normal;
+  text-align: #{token(align)};
+}
+
+@mixin value-empty {
+  color: #{token(empty-color)};
+  font-style: #{token(empty-style)};
+}
+
+@mixin slotted-icon {
+  margin-inline-end: #{token(icon-spacing)};
+}
+
+@mixin inline {
+  display: flex;
+  align-items: center;
+
+}
+
+@mixin inline-label {
+  margin-block: 0;
+  margin-inline-end: #{token(inline-label-spacing)};
+}

package/styles/label-value/_token-utils.scss

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/label-value/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: label-value;
+$_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/label-value/index.scss

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