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

package/styles/{list/list/_configuration.scss → popover/index.scss}

@@ -3,8 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './token-utils' as *;
-
-@mixin configuration {
-  @include tokens;
-}
+@forward './core';

package/styles/popover/popover.scss

@@ -0,0 +1,254 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core' as *;
+@use './animations';
+@use '../core/styles/theme';
+@use '../overlay';
+
+//
+// Host
+//
+
+:host {
+  display: contents;
+
+  @include theme.provide((
+    surface: theme.variable(surface-bright)
+  ));
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+forge-overlay {
+  @include tokens;
+}
+
+.forge-popover {
+  // Custom private calculation tokens
+  #{declare(arrow-translate-x)}: 0;
+  #{declare(arrow-translate-y)}: 0;
+  #{declare(arrow-rotation)}: 0;
+  #{declare(slidein-x)}: 0;
+  #{declare(slidein-y)}: 0;
+  #{declare(zoomin-origin)}: 50% 50% 0;
+  #{declare(arrow-clip-path)}:
+    polygon(
+      calc(#{token(border-width)} * -1) calc(#{token(border-width)} * -1),
+      calc(100% + #{token(border-width)}) calc(#{token(border-width)} * -1),
+      calc(100% + #{token(border-width)}) calc(100% + #{token(border-width)})
+    );
+}
+
+.forge-popover {
+  @include base;
+}
+
+//
+// No anchor
+//
+
+:host([open][no-anchor]) {
+  forge-overlay {
+    // Alias the overlay position CSS custom properties to use popover-specific tokens
+    @include overlay.provide-theme((
+      position-inline-start: #{token(position-inline-start, custom)},
+      position-inline-end: #{token(position-inline-end, custom)},
+      position-block-start: #{token(position-block-start, custom)},
+      position-block-end: #{token(position-block-end, custom)}
+    ));
+  }
+}
+
+//
+// Arrow
+//
+
+:host([arrow]) {
+  .forge-popover {
+    @include override(border-width, arrow-border-width);
+  }
+
+  .arrow {
+    @include arrow;
+  }
+
+  forge-overlay[position-placement^=top] {
+    .arrow {
+      @include override(arrow-translate-y, calc(#{token(border-width)} * -1), value);
+      @include override(arrow-rotation, #{token(arrow-top-rotation)}, value);
+    }
+  }
+  
+  forge-overlay[position-placement^=right] {
+    .arrow {
+      @include override(arrow-translate-x, #{token(border-width)}, value);
+      @include override(arrow-rotation, #{token(arrow-right-rotation)}, value);
+    }
+  }
+  
+  forge-overlay[position-placement^=bottom] {
+    .arrow {
+      @include override(arrow-translate-y, #{token(border-width)}, value);
+      @include override(arrow-rotation, #{token(arrow-bottom-rotation)}, value);
+    }
+  }
+  
+  forge-overlay[position-placement^=left] {
+    .arrow {
+      @include override(arrow-translate-x, calc(#{token(border-width)} * -1), value);
+      @include override(arrow-rotation, #{token(arrow-left-rotation)}, value);
+    }
+  }
+}
+
+//
+// Animation
+// 
+
+//
+// Zoom (default)
+//
+
+:host(:not([animation-type])),
+:host([animation-type=zoom]) {
+  .forge-popover {
+    @include zoom-base;
+  }
+
+  forge-overlay[open] {
+    &[position-placement^=top] {
+      &:not([position-placement*='-']) {
+        .forge-popover {
+          @include override(zoomin-origin, bottom center, value);
+        }
+      }
+
+      &[position-placement$=-start] {
+        .forge-popover {
+          @include override(zoomin-origin, bottom left, value);
+        }
+      }
+
+      &[position-placement$=-end] {
+        .forge-popover {
+          @include override(zoomin-origin, bottom right, value);
+        }
+      }
+    }
+
+    &[position-placement^=right] {
+      &:not([position-placement*='-']) {
+        .forge-popover {
+          @include override(zoomin-origin, left center, value);
+        }
+      }
+
+      &[position-placement$=-start] {
+        .forge-popover {
+          @include override(zoomin-origin, left top, value);
+        }
+      }
+
+      &[position-placement$=-end] {
+        .forge-popover {
+          @include override(zoomin-origin, left bottom, value);
+        }
+      }
+    }
+
+    &[position-placement^=bottom] {
+      &:not([position-placement*='-']) {
+        .forge-popover {
+          @include override(zoomin-origin, top center, value);
+        }
+      }
+
+      &[position-placement$=-start] {
+        .forge-popover {
+          @include override(zoomin-origin, top left, value);
+        }
+      }
+
+      &[position-placement$=-end] {
+        .forge-popover {
+          @include override(zoomin-origin, top right, value);
+        }
+      }
+    }
+
+    &[position-placement^=left] {
+      &:not([position-placement*='-']) {
+        .forge-popover {
+          @include override(zoomin-origin, right center, value);
+        }
+      }
+
+      &[position-placement$=-start] {
+        .forge-popover {
+          @include override(zoomin-origin, right top, value);
+        }
+      }
+
+      &[position-placement$=-end] {
+        .forge-popover {
+          @include override(zoomin-origin, right bottom, value);
+        }
+      }
+    }
+  }
+}
+
+//
+// Slide
+//
+
+:host([animation-type=slide]) {
+  .forge-popover {
+    @include slide-base;
+  }
+
+  forge-overlay[open] {
+    &[position-placement^=top] {
+      .forge-popover {
+        @include override(slidein-y, #{token(slide-offset)}, value);
+      }
+    }
+    
+    &[position-placement^=right] {
+      .forge-popover {
+        @include override(slidein-x, calc(#{token(slide-offset)} * -1), value);
+      }
+    }
+    
+    &[position-placement^=bottom] {
+      .forge-popover {
+        @include override(slidein-y, calc(#{token(slide-offset)} * -1), value);
+      }
+    }
+    
+    &[position-placement^=left] {
+      .forge-popover {
+        @include override(slidein-x, #{token(slide-offset)}, value);
+      }
+    }
+  }
+}
+
+//
+// Fade
+//
+
+:host([animation-type=fade]) {
+  .forge-popover {
+    @include fade-base;
+  }
+}

package/styles/profile-card/_core.scss

@@ -9,6 +9,8 @@
 @use '../core/styles/spacing';
 @use '../utils/mixins-media';
 
+@forward './token-utils';
+
 @mixin host {
   display: block;
 }

package/styles/profile-card/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/profile-card/profile-card.scss

@@ -3,16 +3,14 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './token-utils' as *;
-@use './configuration' as *;
-@use './core';
+@use './core' as *;
 
 //
 // Host
 //
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -24,18 +22,18 @@
 //
 
 .forge-profile-card {
-  @include configuration;
+  @include tokens;
 }
 
 .forge-profile-card {
-  @include core.base;
+  @include base;
 
   .info-container {
-    @include core.info-container;
+    @include info-container;
   }
 
   .avatar {
-    @include core.avatar;
+    @include avatar;
 
     // TODO: Update this to use provide-theme mixin when supported in avatar
     --forge-avatar-size: #{token(avatar-size)};
@@ -45,15 +43,15 @@
   }
 
   .text {
-    @include core.text;
+    @include text;
   }
 
   .full-name {
-    @include core.full-name;
+    @include full-name;
   }
 
   .email {
-    @include core.email;
+    @include email;
   }
 }
 

package/styles/radio/radio/_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 radio {

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

@@ -3,14 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
-@use './core';
+@use './core' as *;
 @use '../../focus-indicator';
 @use '../../state-layer';
-@use './token-utils' as *;
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -22,24 +20,23 @@
 }
 
 .forge-radio {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 // Unchecked
 .forge-radio {
-  @include configuration.configuration;
-  @include core.radio;
+  @include radio;
 
   .container {
-    @include core.container;
+    @include container;
   }
 
   .background {
-    @include core.background;
+    @include background;
   }
 
   .label {
-    @include core.label;
+    @include label;
   }
 }
 
@@ -47,7 +44,7 @@
 :host([checked]) {
   .forge-radio {
     .background {
-      @include core.background-checked;
+      @include background-checked;
     }
   }
 
@@ -62,7 +59,7 @@
 :host([dense]) {
   .forge-radio {
     .container {
-      @include core.container-dense;
+      @include container-dense;
     }
   }
 }
@@ -70,10 +67,10 @@
 // Disabled
 :host([disabled]) {
   .forge-radio {
-    @include core.radio-disabled;
+    @include radio-disabled;
 
     .container {
-      @include core.container-disabled;
+      @include container-disabled;
     }
   }
 }
@@ -82,7 +79,7 @@
 :host([readonly]) {
   .forge-radio {
     .container {
-      @include core.container-readonly;
+      @include container-readonly;
     }
   }
 }

package/styles/slider/_core.scss

@@ -8,6 +8,8 @@
 @use '../core/styles/animation';
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 // 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.

package/styles/slider/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/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) {