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

package/styles/list/list-item/list-item.scss

@@ -3,105 +3,120 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
-@use './core';
+@use './core' as *;
 @use '../../focus-indicator';
 @use '../../state-layer';
 @use '../../core/styles/shape';
-@use './token-utils' as *;
 
+//
 // Host
+//
+
+$_host-tokens: [indent dense-indent];
+
 :host {
-  @include configuration.host;
+  @include tokens($includes: $_host-tokens);
 }
 
 :host {
-  @include core.container;
+  @include container;
 }
 
 :host([hidden]) {
   display: none;
 }
 
+//
+// Base
+//
+
+.forge-list-item {
+  @include tokens($excludes: $_host-tokens);
+}
+
+.forge-list-item {
+  @include base;
+}
+
 // Non-interactive
 :host([non-interactive]) {
   .forge-list-item {
-    @include core.non-interactive;
+    @include non-interactive;
   }
 }
 
 // Disabled
 :host([disabled]) {
   .forge-list-item {
-    @include core.disabled;
+    @include disabled;
   }
 }
 
 // Two-line
 :host([two-line]) {
   .forge-list-item {
-    @include core.two-line;
+    @include two-line;
   }
 }
 
 // Three-line
 :host([three-line]) {
   .forge-list-item {
-    @include core.three-line;
+    @include three-line;
   }
 }
 
 // Dense
 :host([dense]) {
   .forge-list-item {
-    @include core.dense;
+    @include dense;
   }
 
   .text-container {
-    @include core.dense-text;
+    @include dense-text;
   }
 }
 
 // Dense indented
 :host([dense][indented]) {
-  @include core.dense-indented;
+  @include dense-indented;
 }
 
 // Dense two-line
 :host([dense][two-line]) {
   .forge-list-item {
-    @include core.dense-two-line;
+    @include dense-two-line;
   }
 }
 
 // Dense three-line
 :host([dense][three-line]) {
   .forge-list-item {
-    @include core.dense-three-line;
+    @include dense-three-line;
   }
 }
 
 // Dense leading/trailing
 :host([selected]) {
   .forge-list-item {
-    @include core.selected;
+    @include selected;
 
     ::slotted([slot=leading]),
     ::slotted([slot=trailing]) {
-      @include core.leading-trailing-selected;
+      @include leading-trailing-selected;
     }
 
     ::slotted([slot=leading]) {
-      @include core.leading-selected;
+      @include leading-selected;
     }
 
     ::slotted([slot=trailing]) {
-      @include core.trailing-selected;
+      @include trailing-selected;
     }
   }
 
   .text-container {
-    @include core.text-container-selected;
+    @include text-container-selected;
   }
 
   forge-state-layer {
@@ -113,26 +128,17 @@
 
 // Indented
 :host([indented]) {
-  @include core.indented;
-}
-
-// Base
-.forge-list-item {
-  @include configuration.configuration;
-}
-
-.forge-list-item {
-  @include core.base;
+  @include indented;
 }
 
 // Anchor base
 a.forge-list-item {
-  @include core.anchor-link;
+  @include anchor-link;
 }
 
 // Text container base
 .text-container {
-  @include core.text-container;
+  @include text-container;
 }
 
 // Supporting text slotted elements
@@ -141,59 +147,59 @@ slot[name=subtitle],
 slot[name=tertiary-text],
 slot[name=tertiary-title] {
   &::slotted(*) {
-    @include core.supporting-text;
+    @include supporting-text;
   }
 
   :host([selected]) &::slotted(*) {
-    @include core.supporting-text-selected;
+    @include supporting-text-selected;
   }
 }
 
 // Avatar slotted elements
 ::slotted([slot=avatar]) {
-  @include core.avatar;
+  @include avatar;
 }
 
 // Leading/trailing slotted elements
 ::slotted([slot=leading]),
 ::slotted([slot=trailing]) {
-  @include core.leading-trailing-base;
+  @include leading-trailing-base;
 }
 
 // Leading slotted elements
 ::slotted([slot=leading]) {
-  @include core.leading;
+  @include leading;
 
   :host([selected]) & {
-    @include core.leading-selected;
+    @include leading-selected;
   }
 
   :host([dense]) & {
-    @include core.leading-dense;
+    @include leading-dense;
   }
 }
 
 // Trailing slotted elements
 ::slotted([slot=trailing]) {
-  @include core.trailing;
+  @include trailing;
 
   :host([selected]) & {
-    @include core.trailing-selected;
+    @include trailing-selected;
   }
 
   :host([dense]) & {
-    @include core.trailing-dense;
+    @include trailing-dense;
   }
 }
 
 // Wrap styles
 :host([wrap]) {
   .forge-list-item {
-    @include core.wrap;
+    @include wrap;
   }
 
   .text-container {
-    @include core.text-container-wrap;
+    @include text-container-wrap;
   }
 
   slot[name=secondary-text],
@@ -201,7 +207,7 @@ slot[name=tertiary-title] {
   slot[name=tertiary-text],
   slot[name=tertiary-title] {
     &::slotted(*) {
-      @include core.supporting-text-wrap;
+      @include supporting-text-wrap;
     }
   }
 }

package/styles/overlay/_core.scss

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin base {
+  display: none;
+  box-sizing: border-box;
+  height: #{token(height)};
+  width: #{token(width)};
+  border-radius: inherit;
+
+  position: #{token(position)};
+  top: 0;
+  left: 0;
+  z-index: #{token(z-index)};
+  
+  background: inherit;
+  color: inherit;
+}
+
+@mixin absolute {
+  @include override(position, absolute, value);
+}
+
+@mixin open {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: none;
+  overflow: visible;
+  inset: unset;
+}
+
+@mixin no-anchor {
+  inset: 0;
+  margin: auto;
+  margin-inline-start: #{token(position-inline-start)};
+  margin-inline-end: #{token(position-inline-end)};
+  margin-block-start: #{token(position-block-start)};
+  margin-block-end: #{token(position-block-end)};
+}

package/styles/overlay/_token-utils.scss

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

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

package/styles/overlay/overlay.scss

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core' as *;
+
+//
+// Host
+//
+
+:host {
+  display: contents;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-overlay {
+  @include tokens;
+}
+
+.forge-overlay {
+  @include base;
+}
+
+//
+// Position strategy - absolute
+//
+
+:host([position-strategy=absolute]) {
+  .forge-overlay {
+    @include absolute;
+  }
+}
+
+//
+// Open
+//
+
+:host([open][inline]) {
+  .forge-overlay {
+    @include open;
+  }
+}
+
+:host([open]) {
+  .forge-overlay:popover-open {
+    @include open;
+  }
+}
+
+//
+// No anchor
+//
+
+:host([open][no-anchor]) {
+  .forge-overlay:popover-open {
+    @include no-anchor;
+  }
+}

package/styles/popover/_animations.scss

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@keyframes zoomin {
+  from {
+    transform: scale(0.8);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes slidein {
+  from {
+    transform: translateX(#{token(slidein-x, custom)}) translateY(#{token(slidein-y, custom)});
+  }
+
+  to {
+    transform: translateX(0) translateY(0);
+  }
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/styles/popover/_core.scss

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin base {
+  position: relative;
+
+  background: #{token(background)};
+
+  border-radius: #{token(border-radius)};
+  box-shadow: #{token(box-shadow)};
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+}
+
+@mixin arrow {
+  position: absolute;
+
+  background-color: #{token(arrow-background-color)};
+
+  height: #{token(arrow-height)};
+  width: #{token(arrow-width)};
+  box-shadow: #{token(box-shadow)};
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+  
+  transform: translate(#{token(arrow-translate-x, custom)}, #{token(arrow-translate-y, custom)})
+             rotate(#{token(arrow-rotation, custom)});
+  clip-path: #{token(arrow-clip-path, custom)};
+}
+
+@mixin zoom-base {
+  animation-duration: #{token(zoom-duration)};
+  animation-timing-function: #{token(zoom-timing)};
+  animation-name: fadein, zoomin;
+  transform-origin: #{token(zoomin-origin, custom)};
+}
+
+@mixin slide-base {
+  animation-duration: #{token(slide-duration)};
+  animation-timing-function: #{token(slide-timing)};
+  animation-name: fadein, slidein;
+}
+
+@mixin fade-base {
+  animation-duration: #{token(fade-duration)};
+  animation-timing-function: #{token(fade-timing)};
+  animation-name: fadein;
+}

package/styles/popover/_token-utils.scss

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

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