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

package/styles/floating-action-button/_core.scss

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use '../core/styles/shape';
+@use './token-utils' as *;
+
+@mixin host {
+  display: #{token(display)};
+  position: relative;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@mixin base {
+  @include typography.style(button);
+
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: #{token(gap)};
+  z-index: 0;
+  
+  background: #{token(background)};
+  color: #{token(color)};
+  cursor: pointer;
+  box-shadow: #{token(shadow)};
+  
+  box-sizing: border-box;
+  height: #{token(density-medium-size)};
+  min-width: #{token(density-medium-size)};
+  padding-inline: #{token(padding)};
+  border-width: medium;
+  border-style: none;
+  border-color: currentColor;
+  border-top-left-radius: #{token(shape-start-start)};
+  border-top-right-radius: #{token(shape-start-end)};
+  border-bottom-left-radius: #{token(shape-end-start)};
+  border-bottom-right-radius: #{token(shape-end-end)};
+  
+  user-select: none;
+  white-space: nowrap;
+
+  transition-property: box-shadow, background, color;
+  transition-duration: #{token(transition-duration)};
+  transition-timing-function: #{token(transition-timing)};
+
+  &:hover {
+    @include override(shadow, hover-shadow);
+  }
+
+  &:active {
+    @include override(shadow, active-shadow);
+  }
+}
+
+@mixin extended {
+  padding-inline: #{token(extended-padding)};
+  min-width: #{token(extended-min-width)};
+}
+
+@mixin lowered {
+  @include override(shadow, lowered-shadow);
+
+  &:hover {
+    @include override(shadow, lowered-hover-shadow);
+  }
+
+  &:active {
+    @include override(shadow, lowered-active-shadow);
+  }
+}
+
+@mixin anchor-base {
+  position: absolute;
+  inset: 0;
+  text-decoration: none;
+}
+
+@mixin density-small {
+  @include override(size, density-small-size);
+}
+
+@mixin density-large {
+  @include override(size, density-large-size);
+  @include override(shape, shape.variable(extra-large), value);
+}
+
+@mixin host-disabled {
+  cursor: #{token(disabled-cursor)};
+}
+
+@mixin disabled {
+  @include override(background, disabled-background);
+  @include override(color, disabled-color);
+
+  pointer-events: none;
+  opacity: #{token(disabled-opacity)};
+}
+

package/styles/floating-action-button/_token-utils.scss

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

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './configuration' as *;
+@use './core';
+@use '../core/styles/theme';
+@use '../state-layer' as state-layer;
+@use '../focus-indicator' as focus-indicator;
+@use './token-utils' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host-configuration;
+}
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-fab {
+  @include configuration;
+}
+
+.forge-fab {
+  @include core.base;
+
+  &--extended {
+    @include core.extended;
+  }
+}
+
+a {
+  @include core.anchor-base;
+}
+
+//
+// Focus indicator
+//
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    color: #{token(background)},
+    shape-start-start: #{token(shape-start-start)},
+    shape-start-end: #{token(shape-start-end)},
+    shape-end-start: #{token(shape-end-start)},
+    shape-end-end: #{token(shape-end-end)}
+  ));
+}
+
+//
+// State layer 
+//
+
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: #{token(color)}
+  ));
+}
+
+//
+// Density (only when not "extended")
+//
+
+:host(:is([dense],[density=small])) {
+  .forge-fab {
+    @include core.density-small;
+  }
+}
+
+:host([density=large]) {
+  .forge-fab {
+    @include core.density-large;
+  }
+}
+
+//
+// Elevation
+//
+
+:host([elevation=lowered]) {
+  .forge-fab {
+    @include core.lowered;
+  }
+}
+
+//
+// Disabled
+//
+
+:host([disabled]) {
+  @include core.host-disabled;
+
+  .forge-fab {
+    @include core.disabled;
+  }
+}
+
+//
+// Theme
+//
+
+@mixin theme($theme) {
+  :host([theme=#{$theme}]:not([disabled])) {
+    .forge-fab {
+      @include override(background, theme.variable($theme), value);
+      @include override(color, theme.variable(on-#{$theme}), value);
+    }
+  }
+}
+
+@include theme(primary);
+@include theme(tertiary);
+@include theme(success);
+@include theme(error);
+@include theme(warning);
+@include theme(info);

package/styles/floating-action-button/index.scss

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './configuration';
+@forward './core';
+@forward './token-utils' show provide-theme;

package/styles/focus-indicator/focus-indicator.scss

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 @use './animations';
-@use './configuration';
+@use './configuration' as *;
 @use './core';
 
 //
@@ -12,52 +12,35 @@
 //
 
 :host {
-  display: contents;
+  @include configuration;
 }
 
-:host([hidden]) {
-  display: none;
-}
-
-//
-// Base
-//
-
-.forge-focus-indicator {
-  @include configuration.configuration;
-}
-
-.forge-focus-indicator {
+:host {
   @include core.base;
 }
 
+:host([hidden]) {
+  display: none;
+}
 
 //
 // States
 //
 
 :host([active]) {
-  .forge-focus-indicator {
-    @include core.active;
-  }
+  @include core.active;
 }
 
 :host(:not([inward])) {
-  .forge-focus-indicator {
-    @include core.outward;
-  }
+  @include core.outward;
 }
 
 :host([inward]) {
-  .forge-focus-indicator {
-    @include core.inward;
-  }
+  @include core.inward;
 }
 
 :host([circular]) {
-  .forge-focus-indicator {
-    @include core.circular;
-  }
+  @include core.circular;
 }
 
 //
@@ -71,7 +54,7 @@
 //
 
 @media (prefers-reduced-motion) {
-  .forge-focus-indicator {
+  :host {
     animation: none;
   }
 }

package/styles/forge.scss

@@ -10,7 +10,6 @@
 @use './typography/forge-typography';
 
 // Required global component styles
-@use './floating-action-button/forge-floating-action-button';
 @use './table/forge-table';
 @use './tooltip/forge-tooltip';
 @use './ripple/forge-ripple';

package/styles/icon-button/_core.scss

@@ -116,10 +116,6 @@
   @include override(icon-color, toggle-on-icon-color);
 }
 
-@mixin toggle-outlined {
-  // @include override(icon-color, outlined-toggle-icon-color);
-}
-
 @mixin toggle-on-outlined {
   @include override(background-color, outlined-toggle-on-background-color);
   @include override(icon-color, outlined-toggle-on-icon-color);

package/styles/icon-button/icon-button.scss

@@ -3,11 +3,12 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './configuration';
+@use './configuration' as *;
 @use './core';
 @use '../core/styles/theme';
-@use '../state-layer' as state-layer;
-@use '../focus-indicator' as focus-indicator;
+@use '../state-layer';
+@use '../focus-indicator';
+@use '../circular-progress';
 @use './token-utils' as *;
 
 //
@@ -15,7 +16,7 @@
 //
 
 :host {
-  @include configuration.host-configuration;
+  @include host-configuration;
 }
 
 :host {
@@ -31,7 +32,7 @@
 //
 
 .forge-icon-button {
-  @include configuration.configuration;
+  @include configuration;
 }
 
 .forge-icon-button {
@@ -136,12 +137,6 @@ forge-state-layer {
   }
 }
 
-:host([toggle]:not([on])[variant=outlined]) {
-  .forge-icon-button {
-    @include core.toggle-outlined;
-  }
-}
-
 :host([toggle][on][variant=outlined]) {
   .forge-icon-button {
     @include core.toggle-on-outlined;
@@ -172,6 +167,45 @@ forge-state-layer {
   }
 }
 
+//
+// Badge
+//
+
+::slotted([slot=badge]) {
+  position: absolute;
+  top: 0;
+  left: 60%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+::slotted(forge-badge[slot=badge][dot]) {
+  top: 8px;
+}
+
+:host(:is([dense],[density=small],[density=medium])) {
+  ::slotted(forge-badge[slot=badge]:not([dot])) {
+    top: -25%;
+  }
+
+  ::slotted(forge-badge[slot=badge][dot]) {
+    top: 0;
+  }
+}
+
+
+//
+// Circular progress
+//
+
+::slotted(forge-circular-progress) {
+  @include circular-progress.provide-theme((
+    indicator-color: #{token(icon-color)},
+    track-color: transparent,
+    size: 1em
+  ));
+}
+
 //
 // Density
 //

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

@@ -207,6 +207,8 @@ slot[name=tertiary-title] {
 }
 
 forge-focus-indicator {
+  z-index: 1; // Fixes an animation artifact in Safari
+
   @include focus-indicator.provide-theme((
     shape: shape.variable(medium) // TODO: use list-item token?
   ));

package/styles/profile-card/_configuration.scss

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@mixin configuration {
+  @include tokens;
+}

package/styles/profile-card/_core.scss

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+@use '../core/styles/typography';
+@use '../core/styles/theme';
+@use '../core/styles/spacing';
+@use '../utils/mixins-media';
+
+@mixin host {
+  display: block;
+}
+
+@mixin base {
+  min-width: #{token(min-width)};
+  border-radius: #{token(shape)};
+
+  @include mixins-media.phone-small-only {
+    width: 100vw;
+    min-width: unset;
+    overflow: auto;
+  }
+}
+
+
+@mixin info-container {
+  display: flex;
+  align-items: center;
+
+  padding-block: #{spacing.variable(xsmall)};
+  padding-inline: #{spacing.variable(medium)};
+}
+
+@mixin avatar {
+  display: flex;
+  align-items: center;
+
+  padding: #{spacing.variable(xsmall)};
+  margin-inline-end: #{spacing.variable(medium)};
+}
+
+@mixin text {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin full-name {
+  @include typography.style(heading2);
+}
+
+@mixin email {
+  @include typography.style(subheading1);
+  
+  color: #{theme.variable(text-medium)};
+}
+

package/styles/profile-card/_token-utils.scss

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * 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,19 +3,68 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
-@use '../ripple/forge-ripple';
+@use './token-utils' as *;
+@use './configuration' as *;
+@use './core';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  display: inline;
+  @include core.host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-forge-toolbar {
-  --mdc-theme-surface: var(--forge-theme-elevated-surface);
+//
+// Base
+//
+
+.forge-profile-card {
+  @include configuration;
+}
+
+.forge-profile-card {
+  @include core.base;
+
+  .info-container {
+    @include core.info-container;
+  }
+
+  .avatar {
+    @include core.avatar;
+
+    // TODO: Update this to use provide-theme mixin when supported in avatar
+    --forge-avatar-size: #{token(avatar-size)};
+    // @include avatar.provide-theme((
+    //   size: #{token(avatar-size)}
+    // ));
+  }
+
+  .text {
+    @include core.text;
+  }
+
+  .full-name {
+    @include core.full-name;
+  }
+
+  .email {
+    @include core.email;
+  }
+}
+
+#action-toolbar {
+  // TODO: Update this to use provide-theme mixin when supported in toolbar
+  --forge-toolbar-padding: 8px;
+  // @include toolbar.provide-theme((
+  //   padding: 8px
+  // ));
+
+  forge-button:not(:last-of-type) {
+    margin-inline-end: 8px;
+  }
 }

package/styles/theme/_theme-dark.scss

@@ -4,8 +4,6 @@
  * License: Apache-2.0
  */
 @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;
@@ -30,7 +28,6 @@
   @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 toast-mixins.provide-theme(toast-variables.$theme-values-dark);

package/styles/toolbar/_mixins.scss

@@ -8,7 +8,6 @@
 @use './variables';
 
 @mixin base() {
-  @include mdc-theme.property(background-color, surface);
   @include theme.css-custom-property(min-height, --forge-toolbar-min-height, variables.$min-height);
   @include theme.css-custom-property(height, --forge-toolbar-height, variables.$height);
   @include theme.css-custom-property(padding-inline, --forge-toolbar-padding, variables.$padding);

package/dist/esm/chunks/chunk.36F2GVWS.js

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import{a as s}from"./chunk.JAWV5Y5T.js";import{h as n}from"./chunk.J2M2MXP2.js";var p="forge-",E=500,f="tyler-icons",_="https://cdn.forge.tylertech.com/",C=Symbol("ElementInternals"),x=Symbol("isFocusable");var r="_customElementName",a="_customElementDependencies";function b({name:t,dependencies:e,define:o=!0}){return i=>{c(i),t&&(i[r]=t),e&&e.length&&(i[a]=e),window.__forgeFlags__autoDefine!==!1&&o&&s(i)}}function c(t){let e=t.prototype.connectedCallback;t.prototype.connectedCallback=function(){this.isConnected&&(this._isInitialized||(l(this),n(this.initializedCallback)&&this.initializedCallback.apply(this),this._isInitialized=!0),n(e)&&e.apply(this))}}function l(t){let e=Object.getOwnPropertyNames(t).filter(o=>!o.startsWith("_"));for(let o of e){let i=t[o];delete t[o],t[o]=i}}export{b as a,p as b,E as c,f as d,_ as e,C as f,x as g};
-//# sourceMappingURL=chunk.36F2GVWS.js.map