@tylertech/forge 3.0.0-next.1 → 3.0.0-next.11

package/styles/slider/index.scss

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

package/styles/slider/slider.scss

@@ -3,31 +3,203 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/slider/styles';
-@use '@material/theme/theme' as mdc-theme;
+@use './core';
+@use './configuration';
+@use '../focus-indicator';
+@use '../state-layer';
 
 :host {
-  display: block;
+  @include core.container;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-///
-/// Override default MDC disabled styles
-///
-.mdc-slider.mdc-slider--disabled {
-  cursor: not-allowed;
+.forge-slider {
+  @include configuration.configuration;
+  @include core.slider;
+
+  &.range {
+    @include core.range;
+  }
 }
 
-///
-/// Override default MDC value indicator styles (to support theming)
-///
-.mdc-slider .mdc-slider__value-indicator {
-  background-color: var(--mdc-theme-on-surface);
+.track {
+  @include core.track;
+
+  &::before,
+  &::after {
+    content: '';
+    
+    @include core.track-dimensions;
+  }
 
   &::before {
-    border-top-color: var(--mdc-theme-on-surface);
+    @include core.track-inactive;
+  }
+
+  &::after {
+    @include core.track-active;
+  }
+
+  &.tickmarks {
+    &::before {
+      @include core.tickmarks-inactive;
+    }
+
+    &::after {
+      @include core.tickmarks-active;
+    }
   }
 }
+
+.handle-container-padded,
+.handle-container-block {
+  @include core.handle-container-dimensions;
+}
+
+.handle-container-padded {
+  @include core.handle-container-padded;
+}
+
+.handle-container {
+  @include core.handle-container;
+}
+
+.handle {
+  @include core.handle;
+
+  &.start {
+    @include core.handle-start;
+  }
+
+  &.end {
+    @include core.handle-end;
+  }
+
+  &-thumb {
+    @include core.handle-thumb;
+  }
+
+  &-label {
+    @include core.handle-label;
+
+    &::before,
+    &::after {
+      content: '';
+      @include core.handle-label-base;
+    }
+
+    &::before {
+      @include core.handle-label-bottom;
+    }
+
+    &::after {
+      @include core.handle-label-top;
+    }
+
+    &-content {
+      @include core.handle-label-content;
+    }
+  }
+}
+
+.handle-container.hover .handle-thumb {
+  @include core.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;
+  }
+}
+
+:host([disabled]) {
+  .handle-thumb {
+    @include core.handle-thumb-disabled;
+  }
+  
+  .handle-label {
+    @include core.handle-label-disabled;
+  }
+
+  .track {
+    &::before {
+      @include core.track-inactive-disabled;
+    }
+
+    &::after {
+      @include core.track-active-disabled;
+    }
+
+    &.tickmarks {
+      &::before {
+        @include core.tickmarks-active-disabled;
+      }
+
+      &::after {
+        @include core.tickmarks-inactive-disabled;
+      }
+    }
+  }
+
+  input[type=range] {
+    @include core.input-disabled;
+  }
+}
+
+// rtl for active track clipping
+@each $_rtl-selectors in core.get-rtl-selectors('.track', '::after') {
+  #{$_rtl-selectors} {
+    @include core.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;
+}
+
+.on-top.overlapping {
+  .handle-thumb,
+  .handle-label,
+  .handle-label::before {
+    @include core.handles-overlapping;
+  }
+}
+
+:host(:focus-within) .handle-label,
+.handle-container.hover .handle-label,
+:where(:has(input:active)) .handle-label {
+  @include core.handle-label-visible;
+}
+
+input[type=range] {
+  @include core.input;
+}
+
+.on-top {
+  @include core.on-top;
+}
+
+@media (prefers-reduced-motion) {
+  .handle-label {
+    transition-duration: 0;
+  }
+}
+
+forge-focus-indicator {
+  /* stylelint-disable length-zero-no-unit */
+  @include focus-indicator.provide-theme((
+    shape: 50%,
+    outward-offset: 0px
+  ));
+}
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: var(--_handle-color)
+  ));
+}

package/styles/state-layer/_configuration.scss

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens/state-layer/tokens';
+
+@mixin configuration {
+  --_color: #{tokens.get(color)};
+  --_hover-color: #{tokens.get(hover-color)};
+  --_hover-opacity: #{tokens.get(hover-opacity)};
+  --_pressed-color: #{tokens.get(pressed-color)};
+  --_pressed-opacity: #{tokens.get(pressed-opacity)};
+  --_hover-duration: #{tokens.get(hover-duration)};
+  --_pressed-duration: #{tokens.get(pressed-duration)};
+  --_animation-duration: #{tokens.get(animation-duration)};
+}

package/styles/state-layer/_core.scss

@@ -0,0 +1,124 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/utils';
+@use '../core/styles/tokens/state-layer/tokens';
+@use './configuration';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, state-layer);
+}
+
+@mixin host {
+  @include container;
+  
+  display: flex;
+  margin: auto;
+  pointer-events: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin surface {
+  &::before,
+  &::after {
+    content: '';
+
+    @include layer-base;
+  }
+
+  &::before {
+    @include hover-base;
+  }
+
+  &::after {
+    @include ripple-base;
+  }
+}
+
+@mixin container {
+  border-radius: inherit;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+@mixin disabled {
+  display: none;
+}
+
+@mixin hovered {
+  background-color: var(--_hover-color);
+  opacity: var(--_hover-opacity);
+}
+
+@mixin pressed {
+  opacity: var(--_pressed-opacity);
+  transition-duration: var(--_pressed-duration);
+}
+
+@mixin layer-base {
+  opacity: 0;
+  position: absolute;
+}
+
+@mixin hover-base {
+  background-color: var(--_hover-color);
+  inset: 0;
+  transition: opacity var(--_hover-duration) linear,
+              background-color var(--_hover-duration) linear;
+}
+
+@mixin ripple-base {
+  background: radial-gradient(
+    closest-side,
+    var(--_pressed-color) max(calc(100% - 70px), 65%),
+    transparent 100%
+  );
+  transform-origin: center center;
+  transition: opacity var(--_animation-duration) linear;
+}
+
+///
+/// Creates the styles for a visual-only state layer without the use of JavaScript.
+/// 
+/// This adds hover and pressed states to the element it is applied to, but does not
+/// provide any "ripple" styles because that requires the use of JavaScript.
+/// 
+@mixin states {
+  @include states-target;
+  
+  .forge-state-layer {
+    @include configuration.configuration;
+
+    pointer-events: none;
+
+    &::before {
+      content: '';
+
+      @include layer-base;
+    }
+
+    &::before {
+      @include hover-base;
+    }
+  }
+
+  &:hover {
+    .forge-state-layer::before {
+      @include hovered;
+    }
+  }
+
+  &:active {
+    .forge-state-layer::before {
+      opacity: var(--_pressed-opacity);
+    }
+  }
+}
+
+@mixin states-target {
+  position: relative;
+  overflow: hidden;
+}

package/styles/state-layer/index.scss

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

package/styles/state-layer/state-layer.scss

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './core';
+@use './configuration';
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([disabled]) {
+  @include core.disabled;
+}
+
+.forge-state-layer {
+  @include configuration.configuration;
+  @include core.surface;
+
+  &--hovered::before {
+    @include core.hovered;
+  }
+
+  &--pressed::after {
+    @include core.pressed;
+  }
+}
+
+@media screen and (forced-colors: active) {
+  :host {
+    display: none;
+  }
+}

package/styles/table/_mixins.scss

@@ -394,7 +394,7 @@
 @mixin head-cell-text-sorted() {
   @include mdc-theme.property(color, text-primary-on-background);
 
-  font-weight: 600 !important;
+  font-weight: 700 !important;
 }
 
 /// Creates styles for the sort icon within the table head cells.
@@ -407,7 +407,7 @@
   margin-left: 5px;
   transition: transform 250ms;
   display: none !important;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 /// The active sort icon styles.

package/styles/tabs/tab/_configuration.scss

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/tabs/tab/tokens' as tab-tokens;
+
+@mixin configuration {
+  // Shared
+  --_active-color: #{tab-tokens.get(active-color)};
+  --_inactive-color: #{tab-tokens.get(inactive-color)};
+  --_height: #{tab-tokens.get(height)};
+
+  // Indicator
+  --_active-indicator-color: #{tab-tokens.get(indicator-color)};
+  --_active-indicator-height: #{tab-tokens.get(indicator-height)};
+  --_active-indicator-shape: #{tab-tokens.get(indicator-shape)};
+
+  // Container
+  --_container-color: #{tab-tokens.get(container-color)};
+  --_container-height: #{tab-tokens.get(container-height)};
+  --_container-shape: #{tab-tokens.get(container-shape)};
+  
+  // Content
+  --_content-height: #{tab-tokens.get(content-height)};
+
+  // Icon
+  --_active-focus-icon-color: #{tab-tokens.get(active-focus-icon-color)};
+  --_active-hover-icon-color: #{tab-tokens.get(active-hover-icon-color)};
+  --_active-icon-color: #{tab-tokens.get(active-icon-color)};
+  --_active-pressed-icon-color: #{tab-tokens.get(active-pressed-icon-color)};
+  --_icon-size: #{tab-tokens.get(icon-size)};
+  --_focus-icon-color: #{tab-tokens.get(focus-icon-color)};
+  --_hover-icon-color: #{tab-tokens.get(hover-icon-color)};
+  --_icon-color: #{tab-tokens.get(icon-color)};
+  --_pressed-icon-color: #{tab-tokens.get(pressed-icon-color)};
+
+  // Label
+  --_active-focus-label-text-color: #{tab-tokens.get(active-focus-label-text-color)};
+  --_active-hover-label-text-color: #{tab-tokens.get(active-hover-label-text-color)};
+  --_active-label-text-color: #{tab-tokens.get(active-label-text-color)};
+  --_active-pressed-label-text-color: #{tab-tokens.get(active-pressed-label-text-color)};
+  --_focus-label-text-color: #{tab-tokens.get(focus-label-text-color)};
+  --_hover-label-text-color: #{tab-tokens.get(hover-label-text-color)};
+  --_label-text-color: #{tab-tokens.get(label-text-color)};
+  --_pressed-label-text-color: #{tab-tokens.get(pressed-label-text-color)};
+}
+
+@mixin vertical-primary-configuration {
+  --_active-indicator-shape: #{tab-tokens.get(vertical-indicator-shape)};
+}
+
+@mixin configuration-secondary {
+  --_active-indicator-height: #{tab-tokens.get(secondary-indicator-height)};
+  --_active-indicator-shape: #{tab-tokens.get(secondary-indicator-shape)};
+}
+
+@mixin configuration-inverted {
+  --_active-indicator-shape: #{tab-tokens.get(inverted-indicator-shape)};
+}
+
+@mixin configuration-vertical-inverted {
+  --_active-indicator-shape: #{tab-tokens.get(vertical-inverted-indicator-shape)};
+}

package/styles/tabs/tab/_core.scss

@@ -0,0 +1,190 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/utils';
+@use '../../core/styles/tokens/tabs/tab/tokens';
+@use '../../core/styles/typography';
+@use '../../core/styles/spacing';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, tab);
+}
+
+@mixin host {
+  display: inline-flex;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  vertical-align: middle;
+}
+
+@mixin host-disabled {
+  cursor: not-allowed;
+  opacity: #{tokens.get(disabled-opacity)};
+}
+
+@mixin tab {
+  @include typography.style(button);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  user-select: none;
+  -webkit-appearance: none;
+  vertical-align: middle;
+  background: transparent;
+  text-decoration: none;
+  width: 100%;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  z-index: 0; // Ensure this is a stacking context so the indicator displays
+  background-color: var(--_container-color);
+  color: var(--_label-text-color);
+  min-height: var(--_container-height);
+
+  &::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+  }
+
+  ::slotted([slot=leading]),
+  ::slotted([slot=trailing]) {
+    display: inline-flex;
+    position: relative;
+    writing-mode: horizontal-tb;
+    fill: currentColor;
+    color: var(--_icon-color);
+    font-size: var(--_icon-size);
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+  }
+
+  &:hover {
+    color: var(--_hover-label-text-color);
+    cursor: pointer;
+  }
+
+  &:hover {
+    ::slotted([slot=leading]),
+    ::slotted([slot=trailing]) {
+      color: var(--_hover-icon-color);
+    }
+  }
+}
+
+@mixin focus {
+  color: var(--_focus-label-text-color);
+
+  ::slotted([slot=leading]),
+  ::slotted([slot=trailing]) {
+    color: var(--_focus-icon-color);
+  }
+}
+
+@mixin selected-focus {
+  color: var(--_active-focus-label-text-color);
+
+  ::slotted([slot=leading]),
+  ::slotted([slot=trailing]) {
+    color: var(--_active-focus-icon-color);
+  }
+}
+
+@mixin pressed {
+  color: var(--_pressed-label-text-color);
+  outline: none;
+
+  ::slotted([slot=leading]),
+  ::slotted([slot=trailing]) {
+    color: var(--_pressed-icon-color);
+  }
+}
+
+@mixin selected-pressed {
+  color: var(--_active-pressed-label-text-color);
+
+  ::slotted([slot=leading]),
+  ::slotted([slot=trailing]) {
+    color: var(--_active-pressed-icon-color);
+  }
+}
+
+@mixin content {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  transition: 150ms color linear;
+
+  $_content-padding: spacing.variable('100');
+  max-height: calc(var(--_content-height) + 2 * $_content-padding);
+  min-height: var(--_content-height);
+  padding: $_content-padding calc(2 * $_content-padding);
+  gap: spacing.variable('050');
+}
+
+@mixin label {
+  display: inline-block;
+  line-height: 1;
+}
+
+@mixin indicator {
+  position: absolute;
+  box-sizing: border-box;
+  z-index: -1;
+  transform-origin: bottom left;
+  background: var(--_active-indicator-color);
+  border-radius: var(--_active-indicator-shape);
+  height: var(--_active-indicator-height);
+  inset: auto 0 0;
+  opacity: 0;
+}
+
+@mixin content-secondary {
+  width: 100%;
+}
+
+@mixin indicator-secondary {
+  min-width: 100%;
+}
+
+@mixin vertical {
+  width: 100%;
+  flex-direction: row;
+  border-bottom: none;
+}
+
+@mixin vertical-content {
+  width: 100%;
+}
+
+@mixin vertical-secondary-content {
+  min-height: 100%;
+}
+
+@mixin vertical-indicator {
+  height: 100%;
+  min-width: var(--_active-indicator-height);
+  inset: 0 0 0 auto;
+}
+
+@mixin vertical-inverted-indicator {
+  inset: 0 auto 0 0;
+}
+
+@mixin content-stacked {
+  flex-direction: column;
+}
+
+@mixin inverted-indicator {
+  inset: 0 0 auto;
+  transform-origin: top left;
+}

package/styles/tabs/tab/index.scss

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