@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/styles/core/styles/tokens/field/_tokens.scss

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../animation';
+@use '../../border';
+@use '../../elevation';
+@use '../../shape';
+@use '../../theme';
+@use '../focus-indicator/tokens' as focus-indicator;
+@use '../../utils';
+
+$tokens: (
+  text-color: utils.module-val(field, text-color, theme.variable(text-high)),
+
+  // Spacing (label)
+  label-margin-inline: utils.module-val(field, label-margin-inline, 8px),
+  label-margin-block: utils.module-val(field, label-margin-block, 4px),
+  label-gap: utils.module-val(field, label-gap, 0.25em),
+
+  // Spacing (container)
+  container-padding-inline: utils.module-val(field, container-padding-inline, 12px),
+  container-padding-inline-start: utils.module-ref(field, container-padding-inline-start, container-padding-inline),
+  container-padding-inline-end: utils.module-ref(field, container-padding-inline-end, container-padding-inline),
+  container-gap: utils.module-val(field, container-gap, 8px),
+  start-padding-inline-end: utils.module-ref(field, start-padding-inline-end, container-gap),
+  end-padding-inline-start: utils.module-ref(field, end-padding-inline-start, container-gap),
+  end-padding-inline-end: utils.module-ref(field, end-padding-inline-end, container-gap),
+  popover-icon-padding-inline-start: utils.module-ref(field, popover-icon-padding-inline-start, container-gap),
+  popover-icon-padding-inline-end: utils.module-ref(field, popover-icon-padding-inline-end, container-gap),
+  accessory-padding-inline: utils.module-ref(field, accessory-padding-inline, container-gap),
+  accessory-padding-inline-start: utils.module-ref(field, accessory-padding-inline-start, accessory-padding-inline),
+  accessory-padding-inline-end: utils.module-ref(field, accessory-padding-inline-end, accessory-padding-inline),
+
+  // Spacing (support text)
+  support-text-margin-block: utils.module-val(field, support-text-margin-block, 4px),
+  support-text-gap: utils.module-val(field, support-text-gap, 8px),
+  support-text-padding-inline: utils.module-ref(field, support-text-padding-inline, container-padding-inline),
+  support-text-padding-inline-start: utils.module-ref(field, support-text-padding-inline-start, support-text-padding-inline),
+  support-text-padding-inline-end: utils.module-ref(field, support-text-padding-inline-end, support-text-padding-inline),
+
+  // Spacing (rounded)
+  rounded-container-padding-inline: utils.module-val(field, rounded-container-padding-inline, calc(utils.module-var(field, height) / 2)),
+  rounded-container-padding-inline-start: utils.module-ref(field, rounded-container-padding-inline-start, rounded-container-padding-inline),
+  rounded-container-padding-inline-end: utils.module-ref(field, rounded-container-padding-inline-end, rounded-container-padding-inline),
+  
+  // Sizes
+  height: utils.module-val(field, height, null),
+  height-extra-small: utils.module-val(field, height-extra-small, 24px),
+  height-small: utils.module-val(field, height-small, 32px),
+  height-medium: utils.module-val(field, height-medium, 40px),
+  height-large: utils.module-val(field, height-large, 48px),
+  height-extra-large: utils.module-val(field, height-extra-large, 56px),
+  
+  // Inset sizes
+  inset-height-extra-small: utils.module-ref(field, inset-height-extra-small, inset-height-small),
+  inset-height-small: utils.module-val(field, inset-height-small, 40px),
+  inset-height-medium: utils.module-val(field, inset-height-medium, 48px),
+  inset-height-large: utils.module-val(field, inset-height-large, 56px),
+  inset-height-extra-large: utils.module-val(field, inset-height-extra-large, 64px),
+  
+  // Border
+  shape: utils.module-val(field, shape, shape.variable(medium)),
+  border-style: utils.module-val(field, border-style, solid),
+  border-width: utils.module-val(field, border-width, border.variable(thin)),
+  border-color: utils.module-val(field, border-color, theme.variable(outline-medium)),
+  tonal-inner-border-color: utils.module-val(field, tonal-inner-border-color, theme.variable(outline-low)),
+  inner-border-block-size: utils.module-val(field, inner-border-block-size, calc(100% - 8px)),
+
+  // Label
+  label-color: utils.module-val(field, label-color, theme.variable(text-high)),
+  inset-label-color: utils.module-val(field, inset-label-color, theme.variable(text-medium)),
+
+  // Hover
+  hover-border-style: utils.module-ref(field, hover-border-style, border-style),
+  hover-border-width: utils.module-ref(field, hover-border-width, border-width),
+  hover-border-color: utils.module-val(field, hover-border-color, theme.variable(outline-high)),
+
+  // Invalid
+  invalid-color: utils.module-val(field, invalid-color, theme.variable(error)),
+  invalid-border-style: utils.module-ref(field, invalid-border-style, border-style),
+  invalid-border-color: utils.module-ref(field, invalid-border-color, invalid-color),
+  invalid-border-width: utils.module-ref(field, invalid-border-width, border-width),
+  invalid-border-color-hover: utils.module-val(field, invalid-border-color-hover, theme.variable(error-container-high)),
+  invalid-surface-color: utils.module-val(field, invalid-surface-color, theme.variable(error-container-low)),
+  invalid-surface-color-hover: utils.module-val(field, invalid-surface-color-hover, theme.variable(error-container-minimum)),
+  invalid-label-color: utils.module-ref(field, invalid-label-color, invalid-color),
+  invalid-on-surface-color: utils.module-val(field, invalid-on-surface-color, theme.variable(on-error-container-low)),
+  invalid-inset-label-on-surface-color: utils.module-ref(field, invalid-inset-label-on-surface-color, invalid-on-surface-color),
+
+  // Plain
+  plain-container-padding-inline: utils.module-val(field, plain-container-padding-inline, 0),
+
+  // Tonal
+  tonal-surface-color: utils.module-val(field, tonal-surface-color, theme.variable(surface-container-low)),
+  tonal-on-surface-color: utils.module-val(field, tonal-on-surface-color, theme.variable(on-surface-container-low)),
+  tonal-hover-color: utils.module-val(field, tonal-hover-color, theme.variable(surface-container-minimum)),
+
+  // Filled
+  filled-surface-color: utils.module-val(field, filled-surface-color, theme.variable(surface-bright)),
+  filled-on-surface-color: utils.module-val(field, filled-on-surface-color, theme.variable(on-surface)),
+
+  // Raised
+  raised-elevation: utils.module-val(field, raised-elevation, elevation.value(1)),
+  raised-active-elevation: utils.module-val(field, raised-active-elevation, elevation.value(3)),
+  raised-surface-color: utils.module-ref(field, raised-surface-color, filled-surface-color),
+  raised-on-surface-color: utils.module-ref(field, raised-on-surface-color, filled-on-surface-color),
+
+  // Required and optional
+  required-content: utils.module-val(field, required-content, '*'),
+  required-color: utils.module-val(field, required-color, theme.variable(error)),
+  optional-content: utils.module-val(field, optional-content, '(optional)'),
+  optional-color: utils.module-val(field, optional-color, inherit),
+
+  // Popover icon
+  popover-icon-transition-duration: utils.module-val(field, popover-icon-transition-duration, animation.variable(duration-short3)),
+  popover-icon-transition-timing: utils.module-val(field, popover-icon-transition-timing, animation.variable(easing-standard)),
+  popover-icon-open-rotation: utils.module-val(field, popover-icon-open-rotation, 180deg),
+
+  // Multiline
+  multiline-resize: utils.module-val(field, multiline-resize, vertical),
+  multiline-min-inline-size: utils.module-val(field, multiline-min-inline-size, initial),
+  multiline-max-inline-size: utils.module-val(field, multiline-max-inline-size, initial),
+  multiline-min-block-size: utils.module-val(field, multiline-min-block-size, initial),
+  multiline-max-block-size: utils.module-val(field, multiline-max-block-size, initial),
+
+  // Disabled
+  disabled-opacity: utils.module-val(field, disabled-opacity, theme.emphasis(medium-low)),
+  disabled-surface-color: utils.module-val(field, disabled-surface-color, theme.variable(surface-container-low)),
+  disabled-border-color: utils.module-val(field, disabled-border-color, theme.variable(outline-medium)),
+  disabled-text-color: utils.module-val(field, disabled-text-color, theme.variable(text-medium)),
+  disabled-inset-label-color: utils.module-val(field, disabled-inset-label-color, theme.variable(text-low)),
+
+  // Animation
+  container-animation-duration: utils.module-val(field, container-animation-duration, animation.variable(duration-short4)),
+  container-animation-timing: utils.module-val(field, container-animation-timing, animation.variable(easing-standard)),
+  floating-animation-duration: utils.module-val(field, floating-animation-duration, animation.variable(duration-short4)),
+  floating-animation-timing: utils.module-val(field, floating-animation-timing, animation.variable(easing-decelerate)),
+
+  // Focus indicator
+  focus-indicator-width: utils.module-val(field, focus-indicator-width, focus-indicator.get(width)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/file-picker/_tokens.scss

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../spacing';
+@use '../../border';
+@use '../../typography';
+@use '../../theme';
+
+$tokens: (
+  // Base
+  background: utils.module-val(file-picker, background, theme.variable(surface-dim)),
+  width: utils.module-val(file-picker, width, auto),
+  height: utils.module-val(file-picker, height, auto),
+  max-width: utils.module-val(file-picker, max-width, auto),
+
+  // Border
+  border-width: utils.module-val(file-picker, border-width, border.variable(thin)),
+  border-style: utils.module-val(file-picker, border-style, dashed),
+  border-color: utils.module-val(file-picker, border-color, theme.variable(outline-low)),
+
+  // Spacing
+  gap: utils.module-val(file-picker, gap, spacing.variable(medium)),
+  padding: utils.module-val(file-picker, padding, spacing.variable(medium)),
+  padding-block: utils.module-val(file-picker, padding-block, 0),
+  padding-inline: utils.module-ref(file-picker, padding-inline, padding),
+
+  // Disabled
+  disabled-opacity: utils.module-val(file-picker, disabled-opacity, theme.emphasis(medium-low)),
+
+  // Highlight
+  highlight-background: utils.module-val(file-picker, highlight-background, theme.variable(primary-container-minimum)),
+  highlight-border-color: utils.module-val(file-picker, highlight-border-color, theme.variable(primary)),
+
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/list/list-item/_tokens.scss

@@ -7,18 +7,20 @@
 @use '../../../utils';
 @use '../../../theme';
 @use '../../../shape';
+@use '../../../spacing';
 @use '../../../typography';
 
 $tokens: (
   // Base
   background-color: utils.module-val(list-item, background-color, transparent),
   shape: utils.module-val(list-item, shape, 0),
-  padding: utils.module-val(list-item, padding, 8px 16px),
+  padding: utils.module-val(list-item, padding, spacing.variable(xsmall) spacing.variable(medium)),
   margin: utils.module-val(list-item, margin, 0),
   height: utils.module-val(list-item, height, 48px),
   dense-height: utils.module-val(list-item, dense-height, 32px),
   indent: utils.module-val(list-item, indent, 56px),
   cursor: utils.module-val(list-item, cursor, pointer),
+  gap: utils.module-val(list-item, gap, spacing.variable(xlarge)),
 
   // Supporting text
   supporting-text-color: utils.module-val(list-item, supporting-text-color, theme.variable(text-medium)),
@@ -47,28 +49,19 @@ $tokens: (
   dense-two-line-height: utils.module-val(list-item, dense-two-line-height, utils.module-ref(list-item, dense-height, 56px, value)),
   dense-three-line-height: utils.module-val(list-item, dense-three-line-height, utils.module-ref(list-item, dense-height, 72px, value)),
   dense-font-size: utils.module-val(list-item, dense-font-size, 0.875rem),
-  dense-indent: utils.module-val(list-item, dense-indent, 48px),
-
-  // Dense leading/trailing
-  dense-leading-margin-end: utils.module-val(list-item, dense-leading-margin-end, utils.module-ref(list-item, leading-margin-end, 24px, value)),
-  dense-trailing-margin-start: utils.module-val(list-item, dense-trailing-margin-start, utils.module-ref(list-item, trailing-margin-start, 24px, value)),
+  dense-indent: utils.module-val(list-item, dense-indent, spacing.variable(xxlarge)),
+  dense-gap: utils.module-val(list-item, dense-gap, spacing.variable(medium)),
 
   // Leading
-  leading-margin-start: utils.module-val(list-item, leading-margin-start, 0),
-  leading-margin-end: utils.module-val(list-item, leading-margin-end, 32px),
   leading-selected-color: utils.module-ref(list-item, leading-selected-color, selected-color),
 
   // Trailing
-  trailing-margin-start: utils.module-val(list-item, trailing-margin-start, 32px),
-  trailing-margin-end: utils.module-val(list-item, trailing-margin-end, 0),
   trailing-selected-color: utils.module-ref(list-item, trailing-selected-color, selected-color),
 
   // Avatar
   avatar-background-color: utils.module-val(list-item, avatar-background-color, theme.variable(text-medium)),
   avatar-color: utils.module-val(list-item, avatar-color, theme.variable(on-primary)),
   avatar-shape: utils.module-val(list-item, avatar-shape, shape.variable(round)),
-  avatar-margin-start: utils.module-val(list-item, avatar-margin-start, 0),
-  avatar-margin-end: utils.module-val(list-item, avatar-margin-end, 16px),
   avatar-size: utils.module-val(list-item, avatar-size, 40px),
 ) !default;
 

package/styles/core/styles/tokens/page-state/_tokens.scss

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../theme';
+@use '../../shape';
+@use '../../spacing';
+@use '../../typography';
+
+$tokens: (
+  // Base
+  width: utils.module-val(page-state, width, 576px),
+  height: utils.module-val(page-state, height, auto),
+  spacing: utils.module-val(page-state, spacing, spacing.variable(xxxlarge)),
+
+  // Base-mobile
+  mobile-width: utils.module-val(page-state, mobile-width, 70%),
+
+  // Graphic
+  graphic-height: utils.module-val(page-state, graphic-height, 296px),
+  graphic-spacing: utils.module-val(page-state, graphic-spacing, spacing.variable(xxxlarge)),
+
+  // Graphic-mobile
+  mobile-graphic-height: utils.module-val(page-state, mobile-graphic-height, auto),
+
+  // Title
+  title-color: utils.module-val(page-state, title-color, theme.variable(text-medium)),
+  title-spacing: utils.module-val(page-state, title-spacing, spacing.variable(xxxlarge)),
+
+  // Message
+  message-color: utils.module-val(page-state, message-color, theme.variable(text-high)),
+  message-spacing: utils.module-val(page-state, message-spacing, spacing.variable(xxxlarge)),
+
+  // Action
+  actions-spacing: utils.module-val(page-state, actions-spacing, 16px),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/skeleton/_tokens.scss

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../theme';
+@use '../../shape';
+@use '../../spacing';
+@use '../button/tokens' as button;
+@use '../avatar/tokens' as avatar;
+
+$tokens: (
+  // Base
+  animation-duration: utils.module-val(skeleton, animation-duration, 1500ms),
+  width: utils.module-val(skeleton, width, auto),
+
+  // Host
+  height: utils.module-val(skeleton, height, 48px),
+  background: utils.module-val(skeleton, background, theme.variable(surface-container)),
+  shape: utils.module-val(skeleton, shape, shape.variable(medium)),
+  margin: utils.module-val(skeleton, margin, #{spacing.variable(medium)} 0),
+
+  // Button
+  button-height: utils.module-val(skeleton, button-height, button.get(height)),
+  button-width: utils.module-val(skeleton, button-width, 72px),
+
+  // Form field
+  form-field-height: utils.module-val(skeleton, form-field-height, 40px),
+  form-field-width: utils.module-val(skeleton, form-field-width, 256px),
+
+  // Chip
+  chip-height: utils.module-val(skeleton, chip-height, 32px),
+  chip-width: utils.module-val(skeleton, chip-width, 72px),
+  chip-shape: utils.module-val(skeleton, chip-shape, shape.variable(extra-large)),
+
+  // List item
+  list-item-height: utils.module-val(skeleton, list-item-height, 32px),
+  list-item-margin: utils.module-val(skeleton, list-item-margin, 12px 8px),
+
+  // Text
+  text-height: utils.module-val(skeleton, text-height, 1rem),
+
+  // Gradient
+  gradient-color: utils.module-val(skeleton, gradient-color, theme.variable(surface-container-low)),
+
+  // Avatar
+  avatar-size: utils.module-val(skeleton, avatar-size, avatar.get(size)),
+  avatar-shape: utils.module-val(skeleton, avatar-shape, avatar.get(shape)),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/stack/_tokens.scss

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../spacing';
+
+$tokens: (
+  gap: utils.module-val(stack, gap, spacing.variable(medium)),
+  height: utils.module-val(stack, height, null),
+  stretch: utils.module-val(stack, stretch, initial),
+  alignment: utils.module-val(stack, alignment, normal),
+  justify: utils.module-val(stack, justify, normal),
+  wrap: utils.module-val(stack, wrap, wrap),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/toolbar/_tokens.scss

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use 'sass:map';
+@use '../../utils';
+@use '../../animation';
+@use '../../shape';
+@use '../../theme';
+@use '../../spacing';
+@use '../../border';
+
+$tokens: (
+  // Base
+  background: utils.module-val(toolbar, background, theme.variable(surface)),
+  height: utils.module-val(toolbar, height, 56px),
+  min-height: utils.module-ref(toolbar, min-height, height),
+  
+  // Divider
+  divider-width: utils.module-val(toolbar, divider-width, border.variable(thin)),
+  divider-style: utils.module-val(toolbar, divider-style, solid),
+  divider-color: utils.module-val(toolbar, divider-color, theme.variable(outline)),
+
+  // Shape
+  shape: utils.module-val(toolbar, shape, shape.variable(medium)),
+  start-start-shape: utils.module-ref(toolbar, start-start-shape, shape),
+  start-end-shape: utils.module-ref(toolbar, start-end-shape, shape),
+  end-start-shape: utils.module-val(toolbar, end-start-shape, 0),
+  end-end-shape: utils.module-val(toolbar, end-end-shape, 0),
+
+  // Spacing
+  padding: utils.module-val(toolbar, padding, spacing.variable(medium)),
+  padding-block: utils.module-val(toolbar, padding-block, 0),
+  padding-inline: utils.module-ref(toolbar, padding-inline, padding),
+) !default;
+
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

package/styles/core/styles/tokens/typography/_scale.scss

@@ -7,6 +7,7 @@
 
 $scale: (
   '0750': 0.75,  // 12px
+  '0813': 0.8125,// 13px
   '0875': 0.875, // 14px
   '1000': 1,     // 16px
   '1125': 1.125, // 18px

package/styles/core/styles/tokens/typography/_tokens.label.scss

@@ -9,12 +9,18 @@
 @use './scale';
 @use './tokens.core' as core;
 
-$label: utils.inherit-map(core.$base, (
+$label1: utils.inherit-map(core.$base, (
   font-size: type-utils.font-size-relative(label, font-size, '0750'),
   line-height: type-utils.font-size-relative(label, line-height, '1250'),
   letter-spacing: type-utils.calc-letter-spacing(0.5, scale.value('0875'))
 )) !default;
 
+$label2: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(label, font-size, '0813'),
+  line-height: type-utils.font-size-relative(label, line-height, '1250'),
+  letter-spacing: type-utils.calc-letter-spacing(0.125, scale.value('0813'))
+)) !default;
+
 $button: utils.inherit-map(core.$base, (
   font-size: type-utils.font-size-relative(button, font-size, '0875'),
   font-weight: weight.value(medium),
@@ -30,7 +36,8 @@ $overline: utils.inherit-map(core.$base, (
 )) !default;
 
 $tokens: (
-  label: $label,
+  label1: $label1,
+  label2: $label2,
   button: $button,
   overline: $overline
 ) !default;

package/styles/divider/_core.scss

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host() {
+  display: block;
+  contain: content;
+  margin: #{token(margin)};
+}
+
+@mixin base() {
+  border: none;
+  border-bottom-color: #{token(color)};
+  border-bottom-width: #{token(width)};
+  border-bottom-style: #{token(border-style)};
+  
+  height: 0;
+}
+
+@mixin vertical-base() {
+  border: none;
+  border-right-color: #{token(color)};
+  border-right-width: #{token(width)};
+  border-right-style: #{token(border-style)};
+
+  height: 100%;
+  width: 0;
+}
+
+@mixin vertical-host {
+  display: inline-block;
+  // needed for non-flex areas
+  height: 100%;
+}

package/styles/divider/_token-utils.scss

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

@@ -3,29 +3,36 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './mixins';
+@use './core' as *;
 
-@include mixins.core-styles;
+$host-tokens: [margin];
 
 :host {
-  @include mixins.host;
+  @include tokens($includes: $host-tokens);
+}
+
+
+:host {
+  @include host;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host-context(forge-drawer) {
-  .forge-divider {
-    margin: var(--forge-divider-drawer-margin, 4px) 0;
-  }
+.forge-divider {
+  @include tokens($excludes: $host-tokens);
+}
+
+.forge-divider {
+  @include base;
 }
 
 :host([vertical]) {
-  @include mixins.vertical-host;
+  @include vertical-host;
 
   .forge-divider {
-    @include mixins.vertical-base;
+    @include vertical-base;
   }
 }
 

package/styles/divider/index.scss

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

package/styles/drawer/drawer/drawer.scss

@@ -5,11 +5,13 @@
  */
 @use './mixins';
 @use '../base/mixins' as base-mixins;
+@use '../../divider';
 
 @include mixins.core-styles;
 
 :host {
   @include base-mixins.host;
+  @include divider.provide-theme(( margin: 4px 0 ));
 }
 
 /// 

package/styles/drawer/mini-drawer/mini-drawer.scss

@@ -4,11 +4,13 @@
  * License: Apache-2.0
  */
 @use './mixins';
+@use '../../divider';
 
 @include mixins.core-styles;
 
 :host {
   @include mixins.host;
+  @include divider.provide-theme(( margin: 4px 0 ));
 }
 
 :host([direction=right]) {

package/styles/drawer/modal-drawer/modal-drawer.scss

@@ -4,5 +4,10 @@
  * License: Apache-2.0
  */
 @use './mixins';
+@use '../../divider';
 
 @include mixins.core-styles;
+
+:host {
+  @include divider.provide-theme((margin: 4px 0));
+}

package/styles/expansion-panel/_mixins.scss

@@ -37,6 +37,7 @@
 
 @mixin header() {
   outline: none;
+  -webkit-tap-highlight-color: transparent;
 }
 
 @mixin header-hover() {