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

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/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,189 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/utils';
+@use '../../core/styles/tokens/tabs/tab/tokens';
+@use '../../typography';
+
+@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.typography(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: 8px;
+  max-height: calc(var(--_content-height) + 2 * $_content-padding);
+  min-height: var(--_content-height);
+  padding: $_content-padding calc(2 * $_content-padding);
+  gap: 4px;
+}
+
+@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';

package/styles/tabs/tab/tab.scss

@@ -3,28 +3,181 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../theme/theme-values';
-@use './mixins';
-@use '../../ripple/forge-ripple';
-@use '@material/tab-indicator/mdc-tab-indicator';
-
-@include mixins.core-styles;
+@use './core';
+@use './configuration';
+@use '../../core/styles/tokens/tabs/tab/tokens';
+@use '../../focus-indicator';
+@use '../../state-layer';
 
 :host {
-  @include mixins.host;
+  @include core.host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host([stretch]) {
-  @include mixins.host-stretch;
+:host(:focus) {
+  .forge-tab {
+    @include core.focus;
+  }
+}
+
+:host(:active) {
+  .forge-tab {
+    @include core.pressed;
+  }
+}
+
+:host([disabled]) {
+  @include core.host-disabled;
+
+  .forge-tab {
+    pointer-events: none;
+  }
+}
+
+:host([selected]) {
+  .forge-tab {
+    color: var(--_active-label-text-color);
+
+    ::slotted([slot=leading]),
+    ::slotted([slot=trailing]) {
+      color: var(--_active-icon-color);
+    }
+
+    &:hover {
+      color: var(--_active-hover-label-text-color);
+    }
+
+    &:hover {
+      ::slotted([slot=leading]),
+      ::slotted([slot=trailing]) {
+        color: var(--_active-hover-icon-color);
+      }
+    }
+  
+    .indicator {
+      opacity: 1;
+    }
+  }
 }
 
-@include mixins.host-theme(primary, theme-values.$mdc-property-values);
-@include mixins.host-theme(secondary, theme-values.$mdc-property-values);
-@include mixins.host-theme(warning, theme-values.$property-values);
-@include mixins.host-theme(success, theme-values.$property-values);
-@include mixins.host-theme(danger, theme-values.$property-values);
-@include mixins.host-theme(info, theme-values.$property-values);
+:host([selected]:focus) {
+  .forge-tab {
+    @include core.selected-focus;
+  }
+}
+
+:host([selected]:active) {
+  .forge-tab {
+    @include core.selected-pressed;
+  }
+}
+
+:host([stacked]) {
+  .forge-tab {
+    --_height: #{tokens.get(stacked-height)};
+
+    .content {
+      @include core.content-stacked;
+    }
+  }
+}
+
+:host([secondary]) {
+  .forge-tab {
+    @include configuration.configuration-secondary;
+  }
+
+  .content {
+    @include core.content-secondary;
+  }
+
+  .indicator {
+    @include core.indicator-secondary;
+  }
+}
+
+:host([vertical]) {
+  .forge-tab {
+    @include core.vertical;
+  
+    .content {
+      @include core.vertical-content;
+    }
+  
+    .indicator {
+      @include core.vertical-indicator;
+    }
+  }
+}
+
+:host([vertical][secondary]) {
+  .content {
+    @include core.vertical-secondary-content;
+  }
+}
+
+:host([vertical]:not([secondary])) {
+  .forge-tab {
+    @include configuration.vertical-primary-configuration;
+  }
+}
+
+:host([inverted]) {
+  .forge-tab {
+    @include configuration.configuration-inverted;
+  }
+
+  .indicator {
+    @include core.inverted-indicator;
+  }
+}
+
+:host([inverted][vertical]) {
+  .forge-tab {
+    @include configuration.configuration-vertical-inverted;
+  }
+
+  .indicator {
+    @include core.vertical-inverted-indicator;
+  }
+}
+
+/// Base styles
+.forge-tab {
+  @include configuration.configuration;
+  @include core.tab;
+
+  .content {
+    @include core.content;
+
+    .label {
+      @include core.label;
+    }
+  }
+
+  .indicator {
+    @include core.indicator;
+  }
+}
+
+host,
+::slotted(*) {
+  white-space: nowrap;
+}
+
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: var(--_active-color),
+    shape: 8px
+  ));
+}
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: var(--_inactive-color)
+  ));
+}

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

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/tabs/tab-bar/tokens';
+
+@mixin configuration {
+  --_container-justify: #{tokens.get(container-justify)};
+  --_tab-flex: #{tokens.get(tab-flex)};
+  --_divider-color: #{tokens.get(divider-color)};
+  --_divider-thickness: #{tokens.get(divider-thickness)};
+}

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

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../../core/styles/tokens/utils';
+@use '../../core/styles/tokens/tabs/tab-bar/tokens';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, tab-bar);
+}
+
+@mixin host {
+  position: relative;
+  display: block;
+}
+
+@mixin base {
+  position: relative;
+  display: flex;
+  justify-content: var(--_container-justify);
+  align-items: flex-end;
+  box-sizing: border-box;
+  overflow: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  grid-column: 2;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@mixin container {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  max-width: 100%;
+  max-height: 100%;
+  align-items: center;
+  border-bottom: var(--_divider-thickness) solid var(--_divider-color);
+}
+
+@mixin container-vertical {
+  grid-template-columns: none;
+  grid-template-rows: auto 1fr auto;
+  align-items: initial;
+  border-bottom: none;
+  border-right: var(--_divider-thickness) solid var(--_divider-color);
+  height: 100%;
+}
+
+@mixin vertical {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  grid-column: auto;
+  grid-row: 2;
+}

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

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

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

@@ -3,17 +3,78 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core';
+@use './configuration';
 @use '../../icon-button/forge-icon-button';
-@use '@material/tab-scroller/mdc-tab-scroller';
-
-@include mixins.core-styles;
 
+/// Host styles
 :host {
-  @include mixins.host;
+  @include core.host;
+}
+
+:host([vertical]) {
+  .container {
+    @include core.container-vertical;
+  }
+
+  .scroll-container {
+    @include core.vertical;
+  }
+
+  .scroll-button {
+    justify-self: center;
+  }
+}
+
+:host([inverted]:not([vertical])) {
+  .container {
+    border-bottom: none;
+    border-top: var(--_divider-thickness) solid var(--_divider-color);
+  }
+}
+
+:host([inverted][vertical]) {
+  .container {
+    border-right: none;
+    border-left: var(--_divider-thickness) solid var(--_divider-color);
+  }
+}
+
+:host([clustered]) {
+  --forge-tab-bar-justify: flex-start;
+  --forge-tab-bar-stretch: 0;
+}
+
+:host([clustered=start]) {
+  --forge-tab-bar-justify: flex-start;
+}
+
+:host([clustered=center]) {
+  --forge-tab-bar-justify: center;
+}
+
+:host([clustered=end]) {
+  --forge-tab-bar-justify: flex-end;
 }
 
 :host([hidden]) {
   display: none;
 }
 
+/// Base styles
+.container {
+  @include configuration.configuration;
+  @include core.container;
+}
+
+.scroll-container {
+  @include core.base;
+}
+
+::slotted(*) {
+  flex: var(--_tab-flex);
+}
+
+::slotted([selected]) {
+  z-index: 1;
+}

package/styles/theme/_theme-dark.scss

@@ -3,16 +3,13 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
-@use '../theme/theme-values';
+@use '../core/styles/theme' as theme;
 @use '../app-bar/mixins' as app-bar-mixins;
 @use '../app-bar/variables' as app-bar-variables;
 @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 '../linear-progress/mixins' as linear-progress-mixins;
-@use '../linear-progress/variables' as linear-progress-variables;
 @use '../tooltip/mixins' as tooltip-mixins;
 @use '../toast/mixins' as toast-mixins;
 @use '../toast/variables' as toast-variables;
@@ -29,15 +26,14 @@
 ///
 /// Provides the CSS custom property definitions for the default Forge dark theme.
 ///
-@mixin theme-properties() {
-  /// Global MDC and Forge theme properties
-  @include theme.provide-theme(theme-values.$property-values-dark);
+@mixin theme-properties {
+  /// Global Forge theme properties
+  @include theme.properties-dark;
 
   /// Component-specific Forge theme properties
   @include app-bar-mixins.provide-theme(app-bar-variables.$theme-values-dark);
   @include backdrop-mixins.provide-theme(backdrop-variables.$theme-values-dark);
   @include skeleton-mixins.provide-theme(skeleton-variables.$theme-values-dark);
-  @include linear-progress-mixins.provide-theme(linear-progress-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);