@tylertech/forge 3.0.0-next.23 → 3.0.0-next.24

package/esm/tooltip/tooltip.js

@@ -15,7 +15,7 @@ import { WithDefaultAria } from '../core/mixins/internals/with-default-aria';
 import { WithElementInternals } from '../core/mixins/internals/with-element-internals';
 import { tryDismiss } from '../core/utils/dismissible-stack';
 const template = '<template><div class=\"forge-tooltip\" part=\"surface\"><slot></slot><div class=\"arrow\" part=\"arrow\"></div></div></template>';
-const styles = '@-webkit-keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, var(--forge-shape-medium, 4px));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-popup-elevation, var(--forge-theme-surface-bright-shadow)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, var(--forge-shape-small, 2px));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);-webkit-box-shadow:var(--_tooltip-elevation);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;-webkit-animation-duration:var(--_tooltip-animation-duration);animation-duration:var(--_tooltip-animation-duration);-webkit-animation-timing-function:var(--_tooltip-animation-timing);animation-timing-function:var(--_tooltip-animation-timing);-webkit-animation-name:slidein;animation-name:slidein;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);-webkit-box-shadow:inherit;box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);-webkit-clip-path:var(--_tooltip-arrow-clip-path);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);-webkit-margin-after:var(--_tooltip-border-width);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);-webkit-margin-start:var(--_tooltip-border-width);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);-webkit-margin-before:var(--_tooltip-border-width);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);-webkit-margin-end:var(--_tooltip-border-width);margin-inline-end:var(--_tooltip-border-width)}';
+const styles = '@-webkit-keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}@keyframes slidein{from{opacity:0;-webkit-transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y));transform:translateX(var(--_tooltip-slidein-x)) translateY(var(--_tooltip-slidein-y))}to{opacity:1;-webkit-transform:translateX(0) translateY(0);transform:translateX(0) translateY(0)}}:host{display:contents;pointer-events:none}:host([hidden]){display:none}.forge-tooltip{--_tooltip-background:var(--forge-tooltip-background, var(--forge-theme-surface-inverse, #333333));--_tooltip-color:var(--forge-tooltip-color, var(--forge-theme-on-surface-inverse, #ffffff));--_tooltip-shape:var(--forge-tooltip-shape, var(--forge-shape-medium, 4px));--_tooltip-padding:var(--forge-tooltip-padding, var(--forge-spacing-xsmall, 8px));--_tooltip-padding-block:var(--forge-tooltip-padding-block, var(--_tooltip-padding));--_tooltip-padding-inline:var(--forge-tooltip-padding-inline, var(--_tooltip-padding));--_tooltip-width:var(--forge-tooltip-width, max-content);--_tooltip-max-width:var(--forge-tooltip-max-width, 320px);--_tooltip-elevation:var(--forge-tooltip-elevation, var(--forge-theme-surface-bright-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)));--_tooltip-content-align:var(--forge-tooltip-content-align, center);--_tooltip-border-width:var(--forge-tooltip-border-width, 0);--_tooltip-border-style:var(--forge-tooltip-border-style, solid);--_tooltip-border-color:var(--forge-tooltip-border-color, var(--forge-theme-outline, #e0e0e0));--_tooltip-animation-timing:var(--forge-tooltip-animation-timing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)));--_tooltip-animation-duration:var(--forge-tooltip-animation-duration, var(--forge-animation-duration-short3, 150ms));--_tooltip-animation-offset:var(--forge-tooltip-animation-offset, 24px);--_tooltip-arrow-size:var(--forge-tooltip-arrow-size, 8px);--_tooltip-arrow-height:var(--forge-tooltip-arrow-height, var(--_tooltip-arrow-size));--_tooltip-arrow-width:var(--forge-tooltip-arrow-width, var(--_tooltip-arrow-size));--_tooltip-arrow-shape:var(--forge-tooltip-arrow-shape, var(--forge-shape-small, 2px));--_tooltip-arrow-rotation:var(--forge-tooltip-arrow-rotation, 0deg);--_tooltip-arrow-top-rotation:var(--forge-tooltip-arrow-top-rotation, 315deg);--_tooltip-arrow-right-rotation:var(--forge-tooltip-arrow-right-rotation, 45deg);--_tooltip-arrow-bottom-rotation:var(--forge-tooltip-arrow-bottom-rotation, 135deg);--_tooltip-arrow-left-rotation:var(--forge-tooltip-arrow-left-rotation, 225deg)}.forge-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-body1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, .875)));font-weight:var(--forge-typography-body1-font-weight,400);line-height:var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));letter-spacing:var(--forge-typography-body1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-body1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-body1-text-decoration,inherit);text-decoration:var(--forge-typography-body1-text-decoration,inherit);position:relative;background:var(--_tooltip-background);color:var(--_tooltip-color);border-radius:var(--_tooltip-shape);border-width:var(--_tooltip-border-width);border-style:var(--_tooltip-border-style);border-color:var(--_tooltip-border-color);padding-block:var(--_tooltip-padding-block);padding-inline:var(--_tooltip-padding-inline);-webkit-box-shadow:var(--_tooltip-elevation);box-shadow:var(--_tooltip-elevation);width:var(--_tooltip-width);max-width:var(--_tooltip-max-width);pointer-events:none;text-align:var(--_tooltip-content-align);line-height:normal;white-space:normal;-webkit-animation-duration:var(--_tooltip-animation-duration);animation-duration:var(--_tooltip-animation-duration);-webkit-animation-timing-function:var(--_tooltip-animation-timing);animation-timing-function:var(--_tooltip-animation-timing);-webkit-animation-name:slidein;animation-name:slidein;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}:host(:not([open])) .forge-tooltip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}.arrow{position:absolute;contain:strict;background-color:inherit;height:var(--_tooltip-arrow-height);width:var(--_tooltip-arrow-width);-webkit-box-shadow:inherit;box-shadow:inherit;border:inherit;border-end-start-radius:var(--_tooltip-arrow-shape);rotate:var(--_tooltip-arrow-rotation);-webkit-clip-path:var(--_tooltip-arrow-clip-path);clip-path:var(--_tooltip-arrow-clip-path);--_tooltip-arrow-translate-x:0;--_tooltip-arrow-translate-y:0;--_tooltip-arrow-clip-path:polygon(0 0, 0 100%, 100% 100%)}.forge-tooltip{--_tooltip-slidein-x:0;--_tooltip-slidein-y:0}forge-overlay[open][position-placement^=top] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=top] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-top-rotation);-webkit-margin-after:var(--_tooltip-border-width);margin-block-end:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=right] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=right] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-right-rotation);-webkit-margin-start:var(--_tooltip-border-width);margin-inline-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=bottom] .forge-tooltip{--_tooltip-slidein-y:var(--forge-tooltip-slidein-y, calc(var(--_tooltip-animation-offset) * -1))}forge-overlay[open][position-placement^=bottom] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-bottom-rotation);-webkit-margin-before:var(--_tooltip-border-width);margin-block-start:var(--_tooltip-border-width)}forge-overlay[open][position-placement^=left] .forge-tooltip{--_tooltip-slidein-x:var(--forge-tooltip-slidein-x, var(--_tooltip-animation-offset))}forge-overlay[open][position-placement^=left] .arrow{--_tooltip-arrow-rotation:var(--_tooltip-arrow-left-rotation);-webkit-margin-end:var(--_tooltip-border-width);margin-inline-end:var(--_tooltip-border-width)}';
 const BaseClass = WithDefaultAria(WithElementInternals(BaseComponent));
 /**
  * @tag forge-tooltip

package/esm/utils/color-utils.d.ts

@@ -8,7 +8,3 @@
  * @returns {string} The CSS-compatible hex color string.
  */
 export declare function randomHexColor(): string;
-/**
- * Gets the color for the provided letter.
- */
-export declare function getTextColor(text?: string): string;

package/esm/utils/color-utils.js

@@ -3,7 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { COLOR_CONSTANTS } from '../theme';
 /**
  * Gets a random hex color.
  * @returns {string} The CSS-compatible hex color string.
@@ -16,21 +15,3 @@ export function randomHexColor() {
     }
     return color;
 }
-/**
- * Gets the color for the provided letter.
- */
-export function getTextColor(text) {
-    if (!text || typeof text !== 'string') {
-        text = '';
-    }
-    text = text.toUpperCase();
-    let color;
-    if (text.charCodeAt(0) < 65) {
-        color = randomHexColor();
-    }
-    else {
-        const colorIndex = Math.floor((text.charCodeAt(0) - 65) % COLOR_CONSTANTS.letterColors.length);
-        color = COLOR_CONSTANTS.letterColors[colorIndex];
-    }
-    return color;
-}

package/esm/view-switcher/view-switcher.js

@@ -11,7 +11,7 @@ import { VIEW_SWITCHER_CONSTANTS } from './view-switcher-constants';
 import { ViewComponent } from './view/view';
 import { BaseComponent } from '../core/base/base-component';
 const template = '<template><div class=\"forge-view-switcher\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-view-switcher{height:auto;height:var(--forge-view-switcher-height,auto);width:auto;width:var(--forge-view-switcher-width,auto);position:relative;overflow:hidden;-webkit-transition:height var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:height var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host{height:auto;height:var(--forge-view-switcher-height,auto);width:auto;width:var(--forge-view-switcher-width,auto);display:block}:host([hidden]){display:none}:host(.forge-view-switcher--slide) ::slotted(forge-view){-webkit-transition:-webkit-transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:-webkit-transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1),-webkit-transform var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);will-change:transform}:host(.forge-view-switcher--fade) ::slotted(forge-view){-webkit-transition:opacity var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);transition:opacity var(--forge-view-switcher-animation-duration, 500ms) cubic-bezier(.35, 0, .25, 1);will-change:opacity}:host(.forge-view-switcher--fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
+const styles = '.forge-view-switcher{height:var(--forge-view-switcher-height,auto);width:var(--forge-view-switcher-width,auto);position:relative;overflow:hidden;-webkit-transition:height var(--forge-animation-duration-medium2, 300ms) cubic-bezier(.35, 0, .25, 1);transition:height var(--forge-animation-duration-medium2, 300ms) cubic-bezier(.35, 0, .25, 1)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host{height:var(--forge-view-switcher-height,auto);width:var(--forge-view-switcher-width,auto);display:block}:host([hidden]){display:none}:host(.forge-view-switcher--slide) ::slotted(forge-view){-webkit-transition:-webkit-transform var(--forge-animation-duration-medium2, 300ms) cubic-bezier(.35, 0, .25, 1);transition:-webkit-transform var(--forge-animation-duration-medium2, 300ms) cubic-bezier(.35, 0, .25, 1);transition:transform var(--forge-animation-duration-medium2, 300ms) cubic-bezier(.35, 0, .25, 1);transition:transform var(--forge-animation-duration-medium2, 300ms) cubic-bezier(.35, 0, .25, 1),-webkit-transform var(--forge-animation-duration-medium2, 300ms) cubic-bezier(.35, 0, .25, 1);will-change:transform}:host(.forge-view-switcher--fade) ::slotted(forge-view){-webkit-transition:opacity var(--forge-animation-duration-medium2, 300ms) cubic-bezier(.35, 0, .25, 1);transition:opacity var(--forge-animation-duration-medium2, 300ms) cubic-bezier(.35, 0, .25, 1);will-change:opacity}:host(.forge-view-switcher--fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
 /**
  * The web component class behind the `<forge-view-switcher>` custom element.
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.0.0-next.23",
+  "version": "3.0.0-next.24",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,6 @@
   "sideEffects": false,
   "dependencies": {
     "@floating-ui/dom": "~1.5.3",
-    "@material/animation": "^14.0.0",
-    "@material/button": "^14.0.0",
-    "@material/drawer": "^14.0.0",
-    "@material/elevation": "^14.0.0",
-    "@material/feature-targeting": "^14.0.0",
-    "@material/menu-surface": "^14.0.0",
-    "@material/ripple": "^14.0.0",
-    "@material/rtl": "^14.0.0",
-    "@material/shape": "^14.0.0",
-    "@material/theme": "^14.0.0",
-    "@material/typography": "^14.0.0",
     "@tylertech/forge-core": "^2.3.1",
     "@tylertech/tyler-icons": "^1.12.0",
     "imask": "^6.6.1",

package/styles/bottom-sheet/_core.scss

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/* stylelint-disable unit-allowed-list */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: contents;
+}
+
+@mixin surface {
+  width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+}

package/styles/bottom-sheet/_token-utils.scss

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

@@ -3,14 +3,70 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
+@use '../dialog';
+@use '../utils/mixins-media';
 
-@include mixins.core-styles;
+//
+// Host
+//
 
 :host {
-  @include mixins.host;
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+//
+// Base
+//
+
+.dialog {
+  @include tokens;
+}
+
+.surface {
+  @include surface;
+}
+
+.dialog.dragging {
+  &::part(surface) {
+    transition: none;
+  }
+}
+
+:host([open]) {
+  forge-dialog.fullscreen {
+    @include dialog.provide-theme((
+      max-height: 100%
+    ));
+
+    // Override the internals of the dialog to add a height transition
+    &::part(surface) {
+      transition: max-height #{token(animation-duration)} #{token(animation-timing)};
+    }
+  }
+}
+
+forge-dialog {
+  @include dialog.provide-theme((
+    width: #{token(desktop-max-width)},
+    max-height: #{token(desktop-max-height)},
+  ));
+}
+
+//
+// Responsive
+//
+
+@include mixins-media.tablet-portrait-down {
+  forge-dialog {
+    @include dialog.provide-theme((
+      shape: 0,
+      max-width: 100vw,
+      width: 100vw
+    ));
+  }
+}

package/styles/{color-picker/_variables.scss → bottom-sheet/index.scss}

@@ -3,4 +3,4 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$width: 272px !default;
+@forward './core';

package/styles/calendar/_mixins.scss

@@ -3,16 +3,11 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '@material/typography/typography' as mdc-typography;
-@use '../theme';
+@use '../core/styles/typography';
+@use '../core/styles/theme';
 @use '../utils/mixins' as utils;
 @use './variables';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(calendar, $theme, variables.$theme-values);
-}
+@use '../focus-indicator';
 
 @mixin core-styles() {
   .forge-calendar {
@@ -49,6 +44,10 @@
     &__date {
       @include date;
 
+      forge-focus-indicator {
+        @include focus-indicator.provide-theme(( shape: 50% ));
+      }
+
       &__inner {
         @include date-inner;
       }
@@ -155,25 +154,23 @@
 }
 
 @mixin popup-context-styles() {
-  @include theme.property(--forge-calendar-event-stroke-color, elevated-surface);
+  --forge-calendar-event-stroke-color: #{theme.variable(surface-bright)};
 }
 
 @mixin host() {
-  @include theme.property(--forge-calendar-event-stroke-color, surface);
+  --forge-calendar-event-stroke-color: #{theme.variable(surface)};
 
   display: inline-block;
 }
 
 @mixin base() {
-  @include theme.css-custom-property(width, --forge-calendar-width, variables.$width);
-
+  width: var(--forge-calendar-width, variables.$width);
   height: fit-content;
   position: relative;
 }
 
 @mixin header() {
-  @include theme.css-custom-property(padding, --forge-calendar-controls-padding, 0);
-
+  padding: var(--forge-calendar-controls-padding, 0);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -192,8 +189,7 @@
 }
 
 @mixin footer() {
-  @include theme.css-custom-property(padding, --forge-calendar-controls-padding, 0);
-
+  padding: var(--forge-calendar-controls-padding, 0);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -221,7 +217,7 @@
 }
 
 @mixin day() {
-  @include mdc-typography.typography(caption);
+  @include typography.style(label2);
   @include square-aspect-ratio;
 
   display: flex;
@@ -244,20 +240,10 @@
   outline: none;
   cursor: default;
   user-select: none;
-
-  .mdc-ripple-surface {
-    border-radius: inherit;
-
-    &::before, &::after {
-      @include date-inner-gap($force: true);
-
-      border-radius: inherit !important; // Override ripple value to match the parent
-    }
-  }
 }
 
 @mixin date-inner() {
-  @include mdc-typography.typography(body2);
+  @include typography.style(body1);
   @include date-inner-gap;
 
   display: flex;
@@ -269,8 +255,8 @@
 
 @mixin date-today() {
   &:not([disabled]) {
-    @include theme.property(color, primary);
-    @include theme.property(border-color, primary);
+    color: #{theme.variable(primary)};
+    border-color: #{theme.variable(primary)};
   }
 
   .forge-calendar__date__inner {
@@ -282,42 +268,34 @@
 
   // Override the color when also selected
   &.forge-calendar__date--selected {
-    @include theme.property(color, on-primary);
+    color: #{theme.variable(on-primary)};
   }
 }
 
 @mixin date-selectable() {
-  @include mdc-ripple.surface($ripple-target: '.mdc-ripple-surface', $include-will-change: false);
-  @include mdc-ripple.radius-unbounded($ripple-target: '.mdc-ripple-surface');
-  @include mdc-ripple-theme.states($color: on-surface, $ripple-target: '.mdc-ripple-surface');
-
   cursor: pointer;
 }
 
 @mixin date-selected() {
   &:not([disabled]) .forge-calendar__date__inner {
-    @include theme.property(background-color, primary);
-    @include theme.property(color, on-primary);
+    background-color: #{theme.variable(primary)};
+    color: #{theme.variable(on-primary)};
   }
 
   &[disabled] .forge-calendar__date__inner {
-    @include theme.property(background-color, form-field-disabled-on-background);
-    @include theme.property(color, text-disabled-on-background);
+    background-color: #{theme.variable(primary-container-minimum)};
+    color: #{theme.variable(text-low)};
   }
   
-  .forge-calendar:not(.forge-calendar--readonly) &:hover .forge-calendar__date__inner {
-    opacity: 0.87;
-  }
-
-  &:focus, &.mdc-ripple-upgraded--background-focused {
-    .forge-calendar__date__inner {
-      opacity: 0.54;
-    }
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      color: var(--forge-theme-primary-container)
+    ));
   }
 }
 
 @mixin date-disabled() {
-  @include theme.property(color, text-disabled-on-background);
+  color: #{theme.variable(text-low)};
 }
 
 @mixin date-spacer {
@@ -333,8 +311,7 @@
 
 @mixin range() {
   .forge-calendar__range__target {
-    @include theme.property(background-color, primary);
-
+    background-color: #{theme.variable(primary)};
     position: absolute;
     width: 100%;
     height: 100%;
@@ -383,13 +360,13 @@
 
 @mixin event() {
   @include event-color;
-  @include theme.css-custom-property(font-size, --forge-calendar-event-dot-size, variables.$event-dot-size);
+  
+  font-size: var(--forge-calendar-event-dot-size, variables.$event-dot-size);
 }
 
 @mixin event-overflow() {
-  @include theme.property(color, on-surface);
-  @include theme.css-custom-property(background-color, --mdc-theme-surface);
-
+  background-color: #{theme.variable(surface)};
+  color: #{theme.variable(on-surface)};
   border-radius: 50%;
 }
 
@@ -412,7 +389,7 @@
 @mixin event-color() {
   @each $color in variables.$theme-base-strings {
     &[data-event-theme=#{"" + $color}] {
-      @include theme.css-custom-property(color, --forge-calendar-theme-event-#{$color}-accent, map-get(variables.$theme-values, event-#{$color}-accent));
+      color: var(--forge-calendar-theme-event-#{$color}-accent, map-get(variables.$theme-values, event-#{$color}-accent));
     }
   }
 }
@@ -428,7 +405,7 @@
 }
 
 @mixin date-view-row-gap() {
-  @include theme.css-custom-property(margin-top, --forge-calendar-row-gap, variables.$row-gap);
+  margin-top: var(--forge-calendar-row-gap, variables.$row-gap);
 }
 
 @mixin date-inner-gap($force: false) {

package/styles/calendar/_variables.scss

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '@material/theme/color-palette' as mdc-color-palette;
+@use '../core/styles/tokens/color-palette/material-color-palette';
 
 $width: 100%;
 $row-gap: 2px;
@@ -32,48 +32,48 @@ $theme-base-strings:
   deep-orange;
 $theme-values: (
   // primary theme
-  event-primary-background: mdc-color-palette.$indigo-100,
-  event-primary-accent: mdc-color-palette.$indigo-500,
+  event-primary-background: material-color-palette.$indigo-100,
+  event-primary-accent: material-color-palette.$indigo-500,
 
   // secondary theme
-  event-secondary-background: mdc-color-palette.$amber-100,
-  event-secondary-accent: mdc-color-palette.$amber-500,
+  event-secondary-background: material-color-palette.$amber-100,
+  event-secondary-accent: material-color-palette.$amber-500,
 
   // basic theme
-  event-blue-background: mdc-color-palette.$blue-100,
-  event-blue-accent: mdc-color-palette.$blue-500,
-  event-light-green-background: mdc-color-palette.$light-green-100,
-  event-light-green-accent: mdc-color-palette.$light-green-500,
-  event-cyan-background: mdc-color-palette.$cyan-100,
-  event-cyan-accent: mdc-color-palette.$cyan-500,
-  event-teal-background: mdc-color-palette.$teal-100,
-  event-teal-accent: mdc-color-palette.$teal-500,
-  event-orange-background: mdc-color-palette.$orange-100,
-  event-orange-accent: mdc-color-palette.$orange-500,
-  event-blue-grey-background: mdc-color-palette.$blue-grey-100,
-  event-blue-grey-accent: mdc-color-palette.$blue-grey-500,
-  event-grey-background: mdc-color-palette.$grey-100,
-  event-grey-accent: mdc-color-palette.$grey-500,
+  event-blue-background: material-color-palette.$blue-100,
+  event-blue-accent: material-color-palette.$blue-500,
+  event-light-green-background: material-color-palette.$light-green-100,
+  event-light-green-accent: material-color-palette.$light-green-500,
+  event-cyan-background: material-color-palette.$cyan-100,
+  event-cyan-accent: material-color-palette.$cyan-500,
+  event-teal-background: material-color-palette.$teal-100,
+  event-teal-accent: material-color-palette.$teal-500,
+  event-orange-background: material-color-palette.$orange-100,
+  event-orange-accent: material-color-palette.$orange-500,
+  event-blue-grey-background: material-color-palette.$blue-grey-100,
+  event-blue-grey-accent: material-color-palette.$blue-grey-500,
+  event-grey-background: material-color-palette.$grey-100,
+  event-grey-accent: material-color-palette.$grey-500,
 
   // extended theme
-  event-red-background: mdc-color-palette.$red-100,
-  event-red-accent: mdc-color-palette.$red-500,
-  event-pink-background: mdc-color-palette.$pink-100,
-  event-pink-accent: mdc-color-palette.$pink-500,
-  event-purple-background: mdc-color-palette.$purple-100,
-  event-purple-accent: mdc-color-palette.$purple-500,
-  event-light-blue-background: mdc-color-palette.$light-blue-100,
-  event-light-blue-accent: mdc-color-palette.$light-blue-500,
-  event-deep-purple-background: mdc-color-palette.$deep-purple-100,
-  event-deep-purple-accent: mdc-color-palette.$deep-purple-500,
-  event-green-background: mdc-color-palette.$green-100,
-  event-green-accent: mdc-color-palette.$green-500,
-  event-lime-background: mdc-color-palette.$lime-100,
-  event-lime-accent: mdc-color-palette.$lime-500,
-  event-yellow-background: mdc-color-palette.$yellow-100,
-  event-yellow-accent: mdc-color-palette.$yellow-500,
-  event-brown-background: mdc-color-palette.$brown-100,
-  event-brown-accent: mdc-color-palette.$brown-500,
-  event-deep-orange-background: mdc-color-palette.$deep-orange-100,
-  event-deep-orange-accent: mdc-color-palette.$deep-orange-500,
+  event-red-background: material-color-palette.$red-100,
+  event-red-accent: material-color-palette.$red-500,
+  event-pink-background: material-color-palette.$pink-100,
+  event-pink-accent: material-color-palette.$pink-500,
+  event-purple-background: material-color-palette.$purple-100,
+  event-purple-accent: material-color-palette.$purple-500,
+  event-light-blue-background: material-color-palette.$light-blue-100,
+  event-light-blue-accent: material-color-palette.$light-blue-500,
+  event-deep-purple-background: material-color-palette.$deep-purple-100,
+  event-deep-purple-accent: material-color-palette.$deep-purple-500,
+  event-green-background: material-color-palette.$green-100,
+  event-green-accent: material-color-palette.$green-500,
+  event-lime-background: material-color-palette.$lime-100,
+  event-lime-accent: material-color-palette.$lime-500,
+  event-yellow-background: material-color-palette.$yellow-100,
+  event-yellow-accent: material-color-palette.$yellow-500,
+  event-brown-background: material-color-palette.$brown-100,
+  event-brown-accent: material-color-palette.$brown-500,
+  event-deep-orange-background: material-color-palette.$deep-orange-100,
+  event-deep-orange-accent: material-color-palette.$deep-orange-500,
 ) !default;