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

package/styles/popover/popover.scss

@@ -8,247 +8,304 @@
 @use '../core/styles/theme';
 @use '../overlay';
 
-//
-// Host
-//
+@layer base, animation, preset, reduced-motion;
 
-:host {
-  display: contents;
+@layer base {
 
-  @include theme.provide((
-    surface: theme.variable(surface-bright)
-  ));
-}
-
-:host([hidden]) {
-  display: none;
-}
+  //
+  // Host
+  //
 
-//
-// Base
-//
+  :host {
+    display: contents;
 
-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)})
-    );
-}
+    @include theme.provide((
+      surface: theme.variable(surface-bright)
+    ));
+  }
 
-.forge-popover {
-  @include base;
-}
+  :host([hidden]) {
+    display: none;
+  }
 
-//
-// No anchor
-//
+  //
+  // Base
+  //
 
-: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)}
-    ));
+    @include tokens;
   }
-}
 
-//
-// Arrow
-//
-
-:host([arrow]) {
   .forge-popover {
-    @include override(border-width, arrow-border-width);
+    // 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)})
+      );
   }
 
-  .arrow {
-    @include arrow;
+  .forge-popover {
+    @include base;
   }
 
-  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);
+  //
+  // 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)}
+      ));
     }
   }
-  
-  forge-overlay[position-placement^=right] {
+
+  //
+  // Arrow
+  //
+
+  :host([arrow]) {
+    .forge-popover {
+      @include override(border-width, arrow-border-width);
+    }
+
     .arrow {
-      @include override(arrow-translate-x, #{token(border-width)}, value);
-      @include override(arrow-rotation, #{token(arrow-right-rotation)}, value);
+      @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);
+      }
     }
   }
-  
-  forge-overlay[position-placement^=bottom] {
-    .arrow {
-      @include override(arrow-translate-y, #{token(border-width)}, value);
-      @include override(arrow-rotation, #{token(arrow-bottom-rotation)}, value);
+}
+
+@layer preset {
+  //
+  // Preset - Dropdown
+  //
+
+  :host([preset=dropdown]) {
+    .forge-popover {
+      @include preset-dropdown;
     }
   }
-  
-  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);
+
+  //
+  // Constrain viewport width
+  //
+  :host([constrain-viewport-width]) {
+    .forge-popover {
+      @include override(max-width, 100vw, value);
     }
   }
 }
 
-//
-// Animation
-// 
+@layer animation {
 
-//
-// Zoom (default)
-//
+  //
+  // Animation
+  // 
 
-:host(:not([animation-type])),
-:host([animation-type=zoom]) {
-  .forge-popover {
-    @include zoom-base;
-  }
+  //
+  // Zoom (default)
+  //
 
-  forge-overlay[open] {
-    &[position-placement^=top] {
-      &:not([position-placement*='-']) {
-        .forge-popover {
-          @include override(zoomin-origin, bottom center, value);
+  :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$=-start] {
+          .forge-popover {
+            @include override(zoomin-origin, bottom left, value);
+          }
         }
-      }
 
-      &[position-placement$=-end] {
-        .forge-popover {
-          @include override(zoomin-origin, bottom right, 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^=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$=-start] {
+          .forge-popover {
+            @include override(zoomin-origin, left top, value);
+          }
         }
-      }
 
-      &[position-placement$=-end] {
-        .forge-popover {
-          @include override(zoomin-origin, left bottom, 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^=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$=-start] {
+          .forge-popover {
+            @include override(zoomin-origin, top left, value);
+          }
+        }
+
+        &[position-placement$=-end] {
+          .forge-popover {
+            @include override(zoomin-origin, top right, 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);
+          }
         }
       }
+
+      .forge-popover.exiting {
+        @include zoom-exit;
+      }
+    }
+  }
+
+  //
+  // Slide
+  //
+
+  :host([animation-type=slide]) {
+    .forge-popover {
+      @include slide-base;
     }
 
-    &[position-placement^=left] {
-      &:not([position-placement*='-']) {
+    forge-overlay[open] {
+      &[position-placement^=top] {
         .forge-popover {
-          @include override(zoomin-origin, right center, value);
+          @include override(slidein-y, #{token(slide-offset)}, value);
         }
       }
-
-      &[position-placement$=-start] {
+      
+      &[position-placement^=right] {
         .forge-popover {
-          @include override(zoomin-origin, right top, value);
+          @include override(slidein-x, calc(#{token(slide-offset)} * -1), value);
         }
       }
-
-      &[position-placement$=-end] {
+      
+      &[position-placement^=bottom] {
+        .forge-popover {
+          @include override(slidein-y, calc(#{token(slide-offset)} * -1), value);
+        }
+      }
+      
+      &[position-placement^=left] {
         .forge-popover {
-          @include override(zoomin-origin, right bottom, value);
+          @include override(slidein-x, #{token(slide-offset)}, value);
         }
       }
+
+      .forge-popover.exiting {
+        @include slide-exit;
+      }
     }
   }
-}
 
-//
-// Slide
-//
+  //
+  // Fade
+  //
 
-:host([animation-type=slide]) {
-  .forge-popover {
-    @include slide-base;
-  }
+  :host([animation-type=fade]) {
+    .forge-popover {
+      @include fade-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);
+      &.exiting {
+        @include fade-exit;
       }
     }
   }
 }
 
-//
-// Fade
-//
+@layer reduced-motion {
+  //
+  // Prefers reduced motion
+  //
 
-:host([animation-type=fade]) {
-  .forge-popover {
-    @include fade-base;
+  @media (prefers-reduced-motion: reduce) {
+    .forge-popover {
+      animation: none;
+
+      &.exiting {
+        animation: none;
+      }
+    }
   }
 }

package/styles/scaffold/_core.scss

@@ -0,0 +1,98 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: block;
+  
+  width: #{token(width)};
+  height: #{token(height)};
+}
+
+@mixin base {
+  position: relative;
+
+  display: grid;
+  grid-template-areas:
+    'left header right'
+    'left body right'
+    'left footer right';
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+
+  height: #{token(height)};
+  width: #{token(width)};
+
+  overflow: #{token(overflow)};
+}
+
+@mixin header {
+  grid-area: header;
+  min-width: 0;
+  min-height: 0;
+}
+
+@mixin body {
+  position: #{token(body-position)};
+
+  display: grid;
+  grid-area: body;
+  grid-template-areas:
+    'body-left body-header body-right'
+    'body-left body-inner body-right'
+    'body-left body-footer body-right';
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+  
+  width: #{token(width)};
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+@mixin footer {
+  grid-area: footer;
+}
+
+@mixin body-header {
+  grid-area: body-header;
+}
+
+@mixin body-inner {
+  overflow: auto;
+  grid-area: body-inner;
+}
+
+@mixin body-footer {
+  grid-area: body-footer;
+}
+
+@mixin scrollable {
+  overflow: auto;
+}
+
+@mixin body-left {
+  grid-area: body-left;
+}
+
+@mixin body-right {
+  grid-area: body-right;
+}
+
+@mixin left {
+  grid-area: left;
+}
+
+@mixin right {
+  grid-area: right;
+}
+
+@mixin slotted-base {
+  min-width: 0;
+  min-height: 0;
+}

package/styles/scaffold/_token-utils.scss

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

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