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

package/styles/tabs/tab/tab.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.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -26,22 +24,22 @@
 //
 
 .forge-tab {
-  @include configuration.configuration;
+  @include tokens;
 }
 
 .forge-tab {
-  @include core.tab;
+  @include tab;
 
   .content {
-    @include core.content;
+    @include content;
 
     .label {
-      @include core.label;
+      @include label;
     }
   }
 
   .indicator {
-    @include core.indicator;
+    @include indicator;
   }
 }
 
@@ -68,13 +66,13 @@ forge-state-layer {
 
 :host(:focus) {
   .forge-tab {
-    @include core.focus;
+    @include focus;
   }
 }
 
 :host(:active) {
   .forge-tab {
-    @include core.pressed;
+    @include pressed;
   }
 }
 
@@ -83,10 +81,10 @@ forge-state-layer {
 //
 
 :host([disabled]) {
-  @include core.host-disabled;
+  @include host-disabled;
 
   .forge-tab {
-    @include core.disabled;
+    @include disabled;
 
     pointer-events: none;
   }
@@ -138,13 +136,13 @@ forge-state-layer {
 
 :host([selected]:focus) {
   .forge-tab {
-    @include core.selected-focus;
+    @include selected-focus;
   }
 }
 
 :host([selected]:active) {
   .forge-tab {
-    @include core.selected-pressed;
+    @include selected-pressed;
   }
 }
 
@@ -157,7 +155,7 @@ forge-state-layer {
     @include override(height, stacked-height);
 
     .content {
-      @include core.content-stacked;
+      @include content-stacked;
     }
   }
 }
@@ -168,15 +166,16 @@ forge-state-layer {
 
 :host([secondary]) {
   .forge-tab {
-    @include configuration.configuration-secondary;
+    @include override(indicator-height, secondary-indicator-height);
+    @include override(indicator-shape, secondary-indicator-shape);
   }
 
   .content {
-    @include core.content-secondary;
+    @include content-secondary;
   }
 
   .indicator {
-    @include core.indicator-secondary;
+    @include indicator-secondary;
   }
 }
 
@@ -186,14 +185,14 @@ forge-state-layer {
 
 :host([vertical]) {
   .forge-tab {
-    @include core.vertical;
+    @include vertical;
   
     .content {
-      @include core.vertical-content;
+      @include vertical-content;
     }
   
     .indicator {
-      @include core.vertical-indicator;
+      @include vertical-indicator;
     }
   }
 
@@ -206,13 +205,13 @@ forge-state-layer {
 
 :host([vertical][secondary]) {
   .content {
-    @include core.vertical-secondary-content;
+    @include vertical-secondary-content;
   }
 }
 
 :host([vertical]:not([secondary])) {
   .forge-tab {
-    @include configuration.vertical-primary-configuration;
+    @include override(indicator-shape, vertical-indicator-shape);
   }
 }
 
@@ -222,20 +221,20 @@ forge-state-layer {
 
 :host([inverted]) {
   .forge-tab {
-    @include configuration.configuration-inverted;
+    @include override(indicator-shape, inverted-indicator-shape);
   }
 
   .indicator {
-    @include core.inverted-indicator;
+    @include inverted-indicator;
   }
 }
 
 :host([inverted][vertical]) {
   .forge-tab {
-    @include configuration.configuration-vertical-inverted;
+    @include override(indicator-shape, vertical-inverted-indicator-shape);
   }
 
   .indicator {
-    @include core.vertical-inverted-indicator;
+    @include vertical-inverted-indicator;
   }
 }

package/styles/tabs/tab-bar/_core.scss

@@ -5,6 +5,8 @@
  */
 @use './token-utils' as *;
 
+@forward './token-utils';
+
 @mixin host {
   position: relative;
   display: block;

package/styles/tabs/tab-bar/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/tabs/tab-bar/tab-bar.scss

@@ -3,17 +3,15 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
+@use './core' as *;
 @use '../../icon-button';
-@use './configuration';
-@use './token-utils' as *;
 
 //
 // Host
 //
 
 :host {
-  @include core.host;
+  @include host;
 }
 
 :host([hidden]) {
@@ -24,24 +22,24 @@
 // Base styles
 //
 
-.container {
-  @include configuration.configuration;
+.forge-tab-bar {
+  @include tokens;
 }
 
-.container {
-  @include core.container;
+.forge-tab-bar {
+  @include container;
 }
 
 .scroll-container {
-  @include core.base;
+  @include base;
 }
 
 ::slotted(*) {
-  @include core.slotted-base;
+  @include slotted-base;
 }
 
 ::slotted([selected]) {
-  @include core.slotted-selected;
+  @include slotted-selected;
 }
 
 forge-icon-button {
@@ -55,16 +53,16 @@ forge-icon-button {
 //
 
 :host([vertical]) {
-  .container {
-    @include core.container-vertical;
+  .forge-tab-bar {
+    @include container-vertical;
   }
 
   .scroll-container {
-    @include core.vertical;
+    @include vertical;
   }
 
   .scroll-button {
-    @include core.vertical-scroll-button;
+    @include vertical-scroll-button;
   }
 }
 
@@ -73,14 +71,14 @@ forge-icon-button {
 // 
 
 :host([inverted]:not([vertical])) {
-  .container {
-    @include core.inverted;
+  .forge-tab-bar {
+    @include inverted;
   }
 }
 
 :host([inverted][vertical]) {
-  .container {
-    @include core.vertical-inverted;
+  .forge-tab-bar {
+    @include vertical-inverted;
   }
 }
 
@@ -89,26 +87,26 @@ forge-icon-button {
 // 
 
 :host([clustered]) {
-  .container {
+  .forge-tab-bar {
     @include override(justify, flex-start, value);
     @include override(stretch, 0, value);
   }
 }
 
 :host([clustered=start]) {
-  .container {
+  .forge-tab-bar {
     @include override(justify, flex-start, value);
   }
 }
 
 :host([clustered=center]) {
-  .container {
+  .forge-tab-bar {
     @include override(justify, center, value);
   }
 }
 
 :host([clustered=end]) {
-  .container {
+  .forge-tab-bar {
     @include override(justify, flex-end, value);
   }
 }

package/styles/theme/_theme-dark.scss

@@ -3,20 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../core/styles/theme' as theme;
+@use '../core/styles/theme';
+@use '../core/styles/border';
+
+@use '../popover';
+@use '../tooltip';
+
 @use '../backdrop/mixins' as backdrop-mixins;
 @use '../backdrop/variables' as backdrop-variables;
 @use '../skeleton/mixins' as skeleton-mixins;
 @use '../skeleton/variables' as skeleton-variables;
-@use '../tooltip/mixins' as tooltip-mixins;
 @use '../toast/mixins' as toast-mixins;
 @use '../toast/variables' as toast-variables;
 @use '../badge/mixins' as badge-mixins;
 @use '../badge/variables' as badge-variables;
 @use '../banner/mixins' as banner-mixins;
 @use '../banner/variables' as banner-variables;
-@use '../inline-message/mixins' as inline-message-mixins;
-@use '../inline-message/variables' as inline-message-variables;
 @use '../table/mixins' as table-mixins;
 @use '../table/variables' as table-variables;
 
@@ -24,15 +26,25 @@
 /// Provides the CSS custom property definitions for the default Forge dark theme.
 ///
 @mixin theme-properties {
-  /// Global Forge theme properties
+  // Global theme properties
   @include theme.properties-dark;
 
-  /// Component-specific Forge theme properties
+  // Popover
+  @include popover.provide-theme((
+    border-width: border.variable(thin) // Popovers use thin borders in dark theme to increase contrast
+  ));
+
+  // Tooltip
+  @include tooltip.provide-theme((
+    background: theme.variable(surface-bright),
+    color: theme.variable(text-high),
+    border-width: border.variable(thin) // Tooltips use thin borders in dark theme to increase contrast
+  ));
+
   @include backdrop-mixins.provide-theme(backdrop-variables.$theme-values-dark);
   @include skeleton-mixins.provide-theme(skeleton-variables.$theme-values-dark);
   @include toast-mixins.provide-theme(toast-variables.$theme-values-dark);
   @include table-mixins.provide-theme(table-variables.$theme-values-dark);
   @include badge-mixins.provide-theme(badge-variables.$theme-values-dark);
   @include banner-mixins.provide-theme(banner-variables.$theme-values-dark);
-  @include inline-message-mixins.provide-theme(inline-message-variables.$theme-values-dark);
 }

package/styles/theme/_theme-values.scss

@@ -78,6 +78,7 @@ $z-index-backdrop: 7 !default;
 $z-index-dialog: 8 !default;
 $z-index-notification: 9 !default;
 $z-index-popup: 10 !default;
+$z-index-overlay: 10 !default;
 $z-index-tooltip: 11 !default;
 
 $z-index-values: (
@@ -87,6 +88,7 @@ $z-index-values: (
   dialog: $z-index-dialog,
   notification: $z-index-notification,
   popup: $z-index-popup,
+  overlay: $z-index-overlay,
   tooltip: $z-index-tooltip
 ) !default;
 

package/styles/toolbar/_mixins.scss

@@ -17,7 +17,8 @@
   @include theme.css-custom-property(border-bottom-left-radius, --forge-toolbar-border-bottom-left-radius, 0);
   @include theme.css-custom-property(border-bottom-right-radius, --forge-toolbar-border-bottom-right-radius, 0);
   @include theme.property(border-color, border-color);
-
+  
+  background-color: var(--forge-theme-surface);
   display: grid;
   grid-template-columns: auto 1fr auto;
   box-sizing: border-box;

package/styles/tooltip/_animations.scss

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

package/styles/tooltip/_core.scss

@@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use './token-utils' as *;
+@use '../utils/mixins' as utils;
+
+@forward './token-utils';
+
+@mixin host {
+  display: contents;
+  pointer-events: none;
+}
+
+@mixin base {
+  @include typography.style(body1);
+
+  position: relative;
+
+  background: #{token(background)};
+  color: #{token(color)};
+
+  border-radius: #{token(shape)};
+  border-width: #{token(border-width)};
+  border-style: #{token(border-style)};
+  border-color: #{token(border-color)};
+  padding-block: #{token(padding-block)};
+  padding-inline: #{token(padding-inline)};
+  box-shadow: #{token(elevation)};
+
+  width: #{token(width)};
+  max-width: #{token(max-width)};
+  pointer-events: none;
+  text-align: #{token(content-align)};
+  line-height: normal;
+
+  animation-duration: #{token(animation-duration)};
+  animation-timing-function: #{token(animation-timing)};
+  animation-name: slidein;
+  animation-fill-mode: forwards;
+}
+
+@mixin arrow {
+  position: absolute;
+  contain: strict;
+
+  background-color: inherit;
+  height: #{token(arrow-height)};
+  width: #{token(arrow-width)};
+  box-shadow: inherit;
+  border: inherit;
+  border-end-start-radius: #{token(arrow-shape)};
+  
+  rotate: #{token(arrow-rotation, custom)};
+  clip-path: #{token(arrow-clip-path, custom)};
+}
+
+@mixin arrow-placement-top {
+  @include override(arrow-rotation, arrow-top-rotation);
+
+  margin-block-end: #{token(border-width)};
+}
+
+@mixin arrow-placement-right {
+  @include override(arrow-rotation, arrow-right-rotation);
+
+  margin-inline-start: #{token(border-width)};
+}
+
+@mixin arrow-placement-bottom {
+  @include override(arrow-rotation, arrow-bottom-rotation);
+
+  margin-block-start: #{token(border-width)};
+}
+
+@mixin arrow-placement-left {
+  @include override(arrow-rotation, arrow-left-rotation);
+
+  margin-inline-end: #{token(border-width)};
+}
+
+@mixin visually-hidden {
+  @include utils.visually-hidden;
+}

package/styles/tooltip/_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/tooltip/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: tooltip;
+$_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/tooltip/index.scss

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

package/styles/tooltip/tooltip.scss

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core' as *;
+@use './animations';
+
+//
+// Host
+//
+
+:host {
+  @include host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-tooltip {
+  @include tokens;
+}
+
+.forge-tooltip {
+  @include base;
+}
+
+//
+// Tooltips are visually hidden by default so that `aria-labelledby` and `aria-describedby` can be used, but
+// when they are open we remove the visually hidden styles and replace with the <forge-overlay> to visually
+// render the floating tooltip text above all content, while still allowing the tooltip to be accessible to
+// screen readers.
+//
+
+:host(:not([open])) {
+  .forge-tooltip {
+    @include visually-hidden;
+  }
+}
+
+//
+// Arrow
+//
+
+.arrow {
+  @include arrow;
+
+  #{declare(arrow-translate-x)}: 0;
+  #{declare(arrow-translate-y)}: 0;
+  #{declare(arrow-clip-path)}: polygon(0 0, 0 100%, 100% 100%);
+}
+
+//
+// Animation / Arrow placement
+//
+
+.forge-tooltip {
+  #{declare(slidein-x)}: 0;
+  #{declare(slidein-y)}: 0;
+}
+
+forge-overlay[open] {
+  &[position-placement^=top] {
+    .forge-tooltip {
+      @include override(slidein-y, #{token(animation-offset)}, value);
+    }
+
+    .arrow {
+      @include arrow-placement-top;
+    }
+  }
+  
+  &[position-placement^=right] {
+    .forge-tooltip {
+      @include override(slidein-x, calc(#{token(animation-offset)} * -1), value);
+    }
+
+    .arrow {
+      @include arrow-placement-right;
+    }
+  }
+  
+  &[position-placement^=bottom] {
+    .forge-tooltip {
+      @include override(slidein-y, calc(#{token(animation-offset)} * -1), value);
+    }
+
+    .arrow {
+      @include arrow-placement-bottom;
+    }
+  }
+  
+  &[position-placement^=left] {
+    .forge-tooltip {
+      @include override(slidein-x, #{token(animation-offset)}, value);
+    }
+
+    .arrow {
+      @include arrow-placement-left;
+    }
+  }
+}