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

package/styles/button-toggle/button-toggle-group/button-toggle-group.scss

@@ -3,14 +3,134 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../../core/styles/theme';
+@use '../button-toggle';
 
-@include mixins.core-styles;
+//
+// Host
+//
+
+$_host-tokens: [display];
 
 :host {
-  @include mixins.host;
+  @include tokens($includes: $_host-tokens);
+}
+
+:host {
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+.forge-button-toggle-group {
+  @include tokens($excludes: $_host-tokens);
+}
+
+.forge-button-toggle-group {
+  @include base;
+}
+
+:host(:not([disabled]):not([no-outline])) {
+  .forge-button-toggle-group {
+    &:hover,
+    &:focus-within {
+      @include active;
+    }
+  }
+}
+
+//
+// No outline
+//
+
+:host([no-outline]) {
+  .forge-button-toggle-group {
+    @include no-outline;
+  }
+}
+
+//
+// Density - Dense
+//
+
+:host(:is([dense],[density=dense])) {
+  .forge-button-toggle-group {
+    @include dense;
+  }
+}
+
+//
+// Vertical
+//
+
+:host([vertical]) {
+  .forge-button-toggle-group {
+    @include vertical;
+  }
+
+  ::slotted(forge-button-toggle) {
+    height: #{token(height)};
+    width: 100%;
+  }
+
+  ::slotted(forge-divider:not([vertical])) {
+    margin-inline: 4px;
+    width: 100%;
+  }
+}
+
+//
+// Slotted - Divider
+//
+
+::slotted(forge-divider[vertical]) {
+  margin-block: 4px;
+}
+
+//
+// Stretch
+//
+
+:host([stretch]) {
+  @include host-stretch;
+
+  .forge-button-toggle-group {
+    @include stretch;
+  }
+}
+
+:host(:not([vertical])[stretch]) {
+  ::slotted(forge-button-toggle) {
+    flex: 1;
+  }
+}
+
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  :host([theme=#{$theme}]) {
+    ::slotted(forge-button-toggle) {
+      @include button-toggle.provide-theme((
+        selected-background: #{theme.variable(#{$theme}-container)},
+        selected-color: #{theme.variable(on-#{$theme}-container)},
+        focus-indicator-color: #{theme.variable($theme)}
+      ));
+    }
+  }
+}
+
+@include theme(primary);
+@include theme(secondary);
+@include theme(success);
+@include theme(error);
+@include theme(warning);
+@include theme(info);

package/styles/button-toggle/button-toggle-group/index.scss

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

package/styles/checkbox/_core.scss

@@ -6,8 +6,11 @@
 @use '../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: inline-block;
+  -webkit-tap-highlight-color: transparent;
 }
 
 @mixin checkbox {

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/app-bar/search/_tokens.scss

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../../utils';
+@use '../../../theme';
+@use '../../../shape';
+@use '../../../animation';
+
+$tokens: (
+  color: utils.module-val(app-bar-search, color, currentColor),
+  height: utils.module-val(app-bar-search, height, 36px),
+  padding: utils.module-val(app-bar-search, padding, 8px),
+  shape: utils.module-val(app-bar-search, shape, shape.variable(small)),
+  gap: utils.module-val(app-bar-search, gap, 4px),
+
+  input-placeholder-color: utils.module-ref(app-bar-search, input-placeholder-color, color),
+  input-placeholder-opacity: utils.module-val(app-bar-search, input-placeholder-opacity, theme.emphasis(medium-low)),
+  
+  background-color: utils.module-ref(app-bar-search, background-color, color),
+  background-color-opacity: utils.module-val(app-bar-search, background-color-opacity, theme.emphasis(lowest)),
+
+  border-color: utils.module-ref(app-bar-search, border-color, color),
+  border-opacity: utils.module-val(app-bar-search, border-opacity, theme.emphasis(medium)),
+  border-hover-opacity: utils.module-val(app-bar-search, border-hover-opacity, theme.emphasis(highest)),
+
+  transition-duration: utils.module-val(app-bar-search, transition-duration, animation.variable(duration-short3)),
+  transition-timing-function: utils.module-val(app-bar-search, transition-timing-function, animation.variable(easing-standard)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

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);
+}