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

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/index.scss

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

package/styles/radio/radio/_core.scss

@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/typography';
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: inline-block;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin radio {
+  position: relative;
+  flex-direction: #{token(direction)};
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: #{token(justify)};
+  gap: #{token(gap)};
+
+  display: flex;
+}
+
+@mixin radio-disabled {
+  opacity: #{token(disabled-opacity)};
+}
+
+@mixin container {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  display: flex;
+
+  border-radius: #{token(shape)};
+  inline-size: #{token(state-layer-width)};
+  block-size: #{token(state-layer-height)};
+
+  cursor: pointer;
+}
+
+@mixin container-dense {
+  inline-size: #{token(state-layer-dense-width)};
+  block-size: #{token(state-layer-dense-height)};
+}
+
+@mixin container-disabled {
+  cursor: not-allowed;
+}
+
+@mixin container-readonly {
+  cursor: not-allowed;
+}
+
+@mixin background {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  
+  display: flex;
+
+  overflow: hidden;
+
+  transition-duration: #{token(animation-duration)};
+  transition-delay: #{token(animation-delay)};
+  transition-timing-function: #{token(animation-timing-function)};
+  transition-property: border-color;
+  
+  box-sizing: border-box;
+  border-radius: #{token(shape)};
+  border-width: #{token(border-width)};
+  border-style: solid;
+  border-color: #{token(unchecked-border-color)};
+  inline-size: #{token(width)};
+  block-size: #{token(height)};
+
+  background: #{token(background)};
+
+  &::after {
+    content: '';
+
+    position: absolute;
+
+    // Using containment here should mitigate the hit to performance from animating the size
+    contain: strict;
+    
+    transition-duration: #{token(animation-duration)};
+    transition-delay: #{token(animation-delay)};
+    transition-timing-function: #{token(animation-timing-function)};
+    transition-property: inline-size, block-size, border-color;
+    
+    border-radius: #{token(shape)};
+    border-width: calc(#{token(mark-height)} / 2) calc(#{token(mark-width)} / 2);
+    border-color: #{token(mark-unchecked-color)};
+    border-style: solid;
+    inline-size: calc(#{token(width)} - 2 * #{token(border-width)});
+    block-size: calc(#{token(height)} - 2 * #{token(border-width)});
+
+    background: #{token(mark-unchecked-background)};
+  }
+}
+
+@mixin background-checked {
+  border-color: #{token(checked-border-color)};
+
+  &::after {
+    border-color: #{token(mark-checked-color)};
+    inline-size: 0px;
+    block-size: 0px;
+
+    background: #{token(mark-checked-background)};
+  }
+}
+
+@mixin label {
+  @include typography.style(label);
+
+  cursor: default;
+
+  &:empty {
+    display: none;
+  }
+}

package/styles/radio/radio/_token-utils.scss

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

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

package/styles/radio/radio/radio.scss

@@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core' as *;
+@use '../../focus-indicator';
+@use '../../state-layer';
+
+:host {
+  @include host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+.forge-radio {
+  @include tokens;
+}
+
+// Unchecked
+.forge-radio {
+  @include radio;
+
+  .container {
+    @include container;
+  }
+
+  .background {
+    @include background;
+  }
+
+  .label {
+    @include label;
+  }
+}
+
+// Checked
+:host([checked]) {
+  .forge-radio {
+    .background {
+      @include background-checked;
+    }
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: #{token(state-layer-checked-color)}
+    ));
+  }
+}
+
+// Dense
+:host([dense]) {
+  .forge-radio {
+    .container {
+      @include container-dense;
+    }
+  }
+}
+
+// Disabled
+:host([disabled]) {
+  .forge-radio {
+    @include radio-disabled;
+
+    .container {
+      @include container-disabled;
+    }
+  }
+}
+
+// Readonly
+:host([readonly]) {
+  .forge-radio {
+    .container {
+      @include container-readonly;
+    }
+  }
+}
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: #{token(primary-color)},
+    outward-offset: 0px,
+    shape: #{token(state-layer-shape)}
+  ));
+}
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: #{token(state-layer-unchecked-color)}
+  ));
+}

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;