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

package/styles/slider/slider.scss

@@ -3,18 +3,16 @@
  * 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
 //
 
 :host {
-  @include core.container;
+  @include container;
 }
 
 :host([hidden]) {
@@ -26,14 +24,20 @@
 //
 
 .forge-slider {
-  @include configuration.configuration;
+  // Internal state variables
+  #{declare(start-fraction)}: 0;
+  #{declare(end-fraction)}: 0;
+  #{declare(tick-count)}: 100;
+
+  // External state variables
+  @include tokens;
 }
 
 .forge-slider {
-  @include core.slider;
+  @include slider;
 
   &.range {
-    @include core.range;
+    @include range;
   }
 }
 
@@ -42,30 +46,30 @@
 //
 
 .track {
-  @include core.track;
+  @include track;
 
   &::before,
   &::after {
     content: '';
     
-    @include core.track-dimensions;
+    @include track-dimensions;
   }
 
   &::before {
-    @include core.track-inactive;
+    @include track-inactive;
   }
 
   &::after {
-    @include core.track-active;
+    @include track-active;
   }
 
   &.tickmarks {
     &::before {
-      @include core.tickmarks-inactive;
+      @include tickmarks-inactive;
     }
 
     &::after {
-      @include core.tickmarks-active;
+      @include tickmarks-active;
     }
   }
 }
@@ -76,63 +80,63 @@
 
 .handle-container-padded,
 .handle-container-block {
-  @include core.handle-container-dimensions;
+  @include handle-container-dimensions;
 }
 
 .handle-container-padded {
-  @include core.handle-container-padded;
+  @include handle-container-padded;
 }
 
 .handle-container {
-  @include core.handle-container;
+  @include handle-container;
 }
 
 .handle {
-  @include core.handle;
+  @include handle;
 
   &.start {
-    @include core.handle-start;
+    @include handle-start;
   }
 
   &.end {
-    @include core.handle-end;
+    @include handle-end;
   }
 
   &-thumb {
-    @include core.handle-thumb;
+    @include handle-thumb;
   }
 
   &-label {
-    @include core.handle-label;
+    @include handle-label;
 
     &::before,
     &::after {
       content: '';
-      @include core.handle-label-base;
+      @include handle-label-base;
     }
 
     &::before {
-      @include core.handle-label-bottom;
+      @include handle-label-bottom;
     }
 
     &::after {
-      @include core.handle-label-top;
+      @include handle-label-top;
     }
 
     &-content {
-      @include core.handle-label-content;
+      @include handle-label-content;
     }
   }
 }
 
 .handle-container.hover .handle-thumb {
-  @include core.handle-thumb-hover;
+  @include handle-thumb-hover;
 }
 
 :host(:not([disabled])) {
   input.end:active ~ .handle-container-padded .handle.end > .handle-thumb,
   input.start:active ~ .handle-container-padded .handle.start > .handle-thumb {
-    @include core.handle-thumb-pressed;
+    @include handle-thumb-pressed;
   }
 }
 
@@ -142,70 +146,70 @@
 
 :host([disabled]) {
   .handle-thumb {
-    @include core.handle-thumb-disabled;
+    @include handle-thumb-disabled;
   }
   
   .handle-label {
-    @include core.handle-label-disabled;
+    @include handle-label-disabled;
   }
 
   .track {
     &::before {
-      @include core.track-inactive-disabled;
+      @include track-inactive-disabled;
     }
 
     &::after {
-      @include core.track-active-disabled;
+      @include track-active-disabled;
     }
 
     &.tickmarks {
       &::before {
-        @include core.tickmarks-inactive-disabled;
+        @include tickmarks-inactive-disabled;
       }
 
       &::after {
-        @include core.tickmarks-active-disabled;
+        @include tickmarks-active-disabled;
       }
     }
   }
 
   input[type=range] {
-    @include core.input-disabled;
+    @include input-disabled;
   }
 }
 
 // rtl for active track clipping
-@each $_rtl-selectors in core.get-rtl-selectors('.track', '::after') {
+@each $_rtl-selectors in get-rtl-selectors('.track', '::after') {
   #{$_rtl-selectors} {
-    @include core.rtl-track-clipping;
+    @include rtl-track-clipping;
   }
 }
 
 input.end:focus ~ .handle-container-padded .handle.end > .handle-thumb,
 input.start:focus ~ .handle-container-padded .handle.start > .handle-thumb {
-  @include core.handle-thumb-focused;
+  @include handle-thumb-focused;
 }
 
 .on-top.overlapping {
   .handle-thumb,
   .handle-label,
   .handle-label::before {
-    @include core.handles-overlapping;
+    @include handles-overlapping;
   }
 }
 
 :host(:focus-within) .handle-label,
 .handle-container.hover .handle-label,
 :where(:has(input:active)) .handle-label {
-  @include core.handle-label-visible;
+  @include handle-label-visible;
 }
 
 input[type=range] {
-  @include core.input;
+  @include input;
 }
 
 .on-top {
-  @include core.on-top;
+  @include on-top;
 }
 
 @media (prefers-reduced-motion) {

package/styles/split-button/index.scss

@@ -3,5 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@forward './configuration';
 @forward './token-utils' show provide-theme;

package/styles/split-button/split-button.scss

@@ -3,7 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
 @use './token-utils' as *;
 @use '../button';
 @use '../icon-button';
@@ -14,7 +13,9 @@
 //
 
 :host {
-  @include configuration.configuration;
+  @include tokens;
+
+  #{declare(focus-indicator-offset-adjusted)}: calc(#{token(focus-indicator-offset)} + #{token(focus-indicator-divider-offset)} * 2);
 }
 
 :host {

package/styles/state-layer/_core.scss

@@ -3,9 +3,10 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   @include container;
   
@@ -85,7 +86,7 @@
   @include states-target;
   
   .forge-state-layer {
-    @include configuration.configuration;
+    @include tokens;
 
     pointer-events: none;
 

package/styles/state-layer/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/state-layer/state-layer.scss

@@ -3,15 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
-@use './configuration';
+@use './core' as *;
 
 //
 // Host
 //
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -19,22 +18,22 @@
 }
 
 :host([disabled]) {
-  @include core.disabled;
+  @include disabled;
 }
 
 .forge-state-layer {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 .forge-state-layer {
-  @include core.surface;
+  @include surface;
 
   &--hovered::before {
-    @include core.hovered;
+    @include hovered;
   }
 
   &--pressed::after {
-    @include core.pressed;
+    @include pressed;
   }
 }
 

package/styles/switch/_core.scss

@@ -6,6 +6,8 @@
 @use '../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 // The tallest element may be absolutely positioned so the container needs to
 // be manually sized to match.
 $_container-block-size: max(#{token(handle-height)}, #{token(track-height)}, #{token(current-state-layer-height, custom)});
@@ -25,6 +27,7 @@ $_handle-on-translate: calc(#{token(track-width)} - #{$_track-border-radius} * 2
 
 @mixin host {
   display: inline-block;
+  -webkit-tap-highlight-color: transparent;
 }
 
 @mixin switch {
@@ -184,6 +187,12 @@ $_handle-on-translate: calc(#{token(track-width)} - #{$_track-border-radius} * 2
   }
 }
 
+@mixin handle-disabled {
+  &::before {
+    box-shadow: none;
+  }
+}
+
 @mixin icon {
   position: absolute;
   align-items: center;

package/styles/switch/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/switch/switch.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]) {
@@ -18,34 +16,34 @@
 }
 
 .forge-switch {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 // Off
 .forge-switch {
-  @include core.switch;
+  @include switch;
 
   #{declare(current-state-layer-width)}: #{token(state-layer-width)};
   #{declare(current-state-layer-height)}: #{token(state-layer-height)};
 
   .container {
-    @include core.container;
+    @include container;
   }
 
   .input {
-    @include core.input;
+    @include input;
   }
 
   .track {
-    @include core.track;
+    @include track;
   }
 
   .handle {
-    @include core.handle;
+    @include handle;
   }
 
   .icon {
-    @include core.icon;
+    @include icon;
 
     // TODO: Use when icon supports tokens
     // @include icon.provide-theme((
@@ -60,17 +58,17 @@
       // ));
       --forge-icon-font-size: #{token(icon-on-size)};
 
-      @include core.icon-on;
-      @include core.icon-hidden;
+      @include icon-on;
+      @include icon-hidden;
     }
 
     &__off {
-      @include core.icon-off-shown;
+      @include icon-off-shown;
     }
   }
 
   .label {
-    @include core.label;
+    @include label;
   }
 
   .hidden {
@@ -78,26 +76,26 @@
   }
 
   ::slotted([slot=input]) {
-    @include core.input;
+    @include input;
   }
 }
 
 // On
 :host([on]) {
   .track {
-    @include core.track-on;
+    @include track-on;
   }
 
   .handle {
-    @include core.handle-on;
+    @include handle-on;
 
     .icon {
       &__on {
-        @include core.icon-on-shown;
+        @include icon-on-shown;
       }
 
       &__off {
-        @include core.icon-hidden;
+        @include icon-hidden;
       }
 
     }
@@ -115,14 +113,14 @@
   .forge-switch {
     .container:active {
       .track {
-        @include core.track-active;
+        @include track-active;
       }
   
       .handle {
-        @include core.handle-active;
+        @include handle-active;
   
         .icon {
-          @include core.icon-active;
+          @include icon-active;
         }
       }
     }
@@ -132,14 +130,14 @@
   .forge-switch {
     .container:active {
       .track {
-        @include core.track-active-on;
+        @include track-active-on;
       }
   
       .handle {
-        @include core.handle-active-on;
+        @include handle-active-on;
   
         .icon {
-          @include core.icon-active-on;
+          @include icon-active-on;
         }
       }
     }
@@ -158,14 +156,14 @@
 // Disabled
 :host([disabled]) {
   .forge-switch {
-    @include core.switch-disabled;
+    @include switch-disabled;
 
     .container {
-      @include core.container-disabled;
+      @include container-disabled;
     }
 
     .handle {
-      @include core.handle-disabled;
+      @include handle-disabled;
     }
   }
 }
@@ -174,7 +172,7 @@
 :host([readonly]) {
   .forge-switch {
     .container {
-      @include core.container-disabled;
+      @include container-disabled;
     }
   }
 }

package/styles/tabs/tab/_core.scss

@@ -6,6 +6,8 @@
 @use '../../core/styles/typography';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   display: inline-flex;
   outline: none;

package/styles/tabs/tab/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;