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

package/styles/switch/switch.scss

@@ -3,78 +3,164 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use 'sass:map';
-@use '../form-field/mixins' as form-field-mixins;
-@use '@material/dom/dom' as mdc-dom;
-@use '@material/typography/typography' as mdc-typography;
-@use '@material/theme/theme' as mdc-theme;
-@use '../theme';
-@use '../theme/theme-values';
-@use './switch-theme';
-@use './switch-mixins' as switch;
-
-@include switch.static-styles();
-
-.mdc-switch {
-  @include switch-theme.theme-styles(switch-theme.$light-theme);
+@use './core';
+@use './configuration';
+@use '../core/styles/tokens/switch/tokens';
+@use '../focus-indicator';
+@use '../state-layer';
+
+:host {
+  @include core.host;
+}
+
+:host([hidden]) {
+  display: none;
 }
 
-@include mdc-dom.forced-colors-mode {
-  .mdc-switch {
-    @include switch-theme.theme-styles(switch-theme.$forced-colors-theme);
+:host([disabled]) {
+  @include core.host-disabled;
+
+  .forge-switch {
+    pointer-events: none;
+  }
+
+  .handle::before {
+    box-shadow: none;
   }
 }
 
-@include form-field-mixins.core-styles;
+/// Base styles (defaults to off)
+.forge-switch {
+  @include configuration.configuration;
+  @include core.switch;
+
+  --_current-state-layer-width: var(--_state-layer-width);
+  --_current-state-layer-height: var(--_state-layer-height);
+
+  .container {
+    @include core.container;
+  }
+
+  .input {
+    @include core.input;
+
+    /// On styles
+    &:checked ~ {
+      .track {
+        @include core.track-on;
+      }
+  
+      .handle {
+        @include core.handle-on;
+
+        .icon {
+          &__on {
+            @include core.icon-on-shown;
+          }
+    
+          &__off {
+            @include core.icon-hidden;
+          }
+        }
+
+        forge-state-layer {
+          @include state-layer.provide-theme((
+            color: var(--_state-layer-on-color)
+          ));
+        }
+      }
+    }
+
+    /// Active styles
+    &:active {
+      ~ {
+        .track {
+          @include core.track-active;
+        }
+
+        .handle {
+          @include core.handle-active;
 
-.forge-switch__container {
-  display: flex;
-  align-items: center;
+          .icon {
+            @include core.icon-active;
+          }
+        }
+      }
 
-  &.forge-switch--label-position-start {
-    flex-flow: row-reverse;
+      /// Active on styles
+      &:checked ~ {
+        .track {
+          @include core.track-active-on;
+        }
 
-    .forge-switch__label {
-      margin-left: auto;
-      padding-right: 8px;
+        .handle {
+          @include core.handle-active-on;
+
+          .icon {
+            @include core.icon-active-on;
+          }
+        }
+      }
     }
   }
-}
 
-:host {
-  display: inline-block;
+  .track {
+    @include core.track;
+  }
 
-  * {
-    cursor: pointer;
+  .handle {
+    @include core.handle;
   }
-  
-  .forge-switch__label {
-    @include mdc-typography.typography(caption);
 
-    padding-left: 8px;
+  .icon {
+    @include core.icon;
+
+    &__on {
+      @include core.icon-on;
+      @include core.icon-hidden;
+    }
+
+    &__off {
+      @include core.icon-off-shown;
+    }
   }
-}
 
-:host([hidden]) {
-  display: none;
+  .label {
+    @include core.label;
+  }
+
+  .hidden {
+    display: none;
+  }
 }
 
+/// Dense styles
 :host([dense]) {
-  .mdc-switch__ripple {
-    $density: switch-theme.density(minimum);
-    $size: map.get($density, state-layer-size);
-
-    @include mdc-theme.property(height, $size);
-    @include mdc-theme.property(width, $size);
+  .forge-switch {
+    // Set the state layer width and height for use in calculations of other properties
+    --_current-state-layer-width: var(--_state-layer-dense-width);
+    --_current-state-layer-height: var(--_state-layer-dense-height);
   }
 }
 
-:host([disabled]) {
-  * {
-    cursor: not-allowed;
+/// Reduced motion styles
+@media (prefers-reduced-motion) {
+  .switch {
+    --_animation-duration: 0s;
   }
+}
 
-  .forge-switch__label {
-    @include theme.property(color, label-disabled-on-background);
-  }
+forge-state-layer {
+  @include state-layer.provide-theme((
+    color: var(--_state-layer-off-color)
+  ));
+}
+
+/* stylelint-disable length-zero-no-unit */
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    shape: var(--_track-shape),
+    outward-offset: 0px
+  ));
 }
+/* stylelint-enable length-zero-no-unit */

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

@@ -10,6 +10,10 @@
   --_active-color: #{tab-tokens.get(active-color)};
   --_inactive-color: #{tab-tokens.get(inactive-color)};
   --_height: #{tab-tokens.get(height)};
+  --_stacked-height: #{tab-tokens.get(stacked-height)};
+
+  // Disabled
+  --_disabled-opacity: #{tab-tokens.get(disabled-opacity)};
 
   // Indicator
   --_active-indicator-color: #{tab-tokens.get(indicator-color)};
@@ -23,6 +27,7 @@
   
   // Content
   --_content-height: #{tab-tokens.get(content-height)};
+  --_content-padding: #{tab-tokens.get(content-padding)};
 
   // Icon
   --_active-focus-icon-color: #{tab-tokens.get(active-focus-icon-color)};

package/styles/tabs/tab/_core.scss

@@ -3,9 +3,9 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/tokens/utils';
+@use '../../core/styles/utils';
 @use '../../core/styles/tokens/tabs/tab/tokens';
-@use '../../typography';
+@use '../../core/styles/typography';
 
 @mixin provide-theme($theme) {
   @include utils.provide(tokens.$tokens, $theme, tab);
@@ -20,11 +20,14 @@
 
 @mixin host-disabled {
   cursor: not-allowed;
-  opacity: #{tokens.get(disabled-opacity)};
+}
+
+@mixin disabled {
+  opacity: var(--_disabled-opacity);
 }
 
 @mixin tab {
-  @include typography.typography(button);
+  @include typography.style(button);
 
   display: inline-flex;
   align-items: center;
@@ -122,12 +125,10 @@
   justify-content: center;
   white-space: nowrap;
   transition: 150ms color linear;
-
-  $_content-padding: 8px;
-  max-height: calc(var(--_content-height) + 2 * $_content-padding);
+  max-height: calc(var(--_content-height) + 2 * var(--_content-padding));
   min-height: var(--_content-height);
-  padding: $_content-padding calc(2 * $_content-padding);
-  gap: 4px;
+  padding: var(--_content-padding) calc(2 * var(--_content-padding));
+  gap: var(--_content-padding);
 }
 
 @mixin label {

package/styles/tabs/tab/tab.scss

@@ -5,7 +5,6 @@
  */
 @use './core';
 @use './configuration';
-@use '../../core/styles/tokens/tabs/tab/tokens';
 @use '../../focus-indicator';
 @use '../../state-layer';
 
@@ -33,6 +32,8 @@
   @include core.host-disabled;
 
   .forge-tab {
+    @include core.disabled;
+
     pointer-events: none;
   }
 }
@@ -63,6 +64,14 @@
   }
 }
 
+:host([selected]:not([vertical])) {
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      offset-block: 0 calc(var(--_active-indicator-height) + 1px)
+    ));
+  }
+}
+
 :host([selected]:focus) {
   .forge-tab {
     @include core.selected-focus;
@@ -77,7 +86,7 @@
 
 :host([stacked]) {
   .forge-tab {
-    --_height: #{tokens.get(stacked-height)};
+    --_height: var(--_stacked-height);
 
     .content {
       @include core.content-stacked;
@@ -111,6 +120,12 @@
       @include core.vertical-indicator;
     }
   }
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme((
+      offset-inline: 0 calc(var(--_active-indicator-height) + 1px)
+    ));
+  }
 }
 
 :host([vertical][secondary]) {

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

@@ -3,7 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../../core/styles/tokens/utils';
+@use '../../core/styles/utils';
 @use '../../core/styles/tokens/tabs/tab-bar/tokens';
 
 @mixin provide-theme($theme) {

package/styles/theme/_theme-dark.scss

@@ -21,7 +21,6 @@
 @use '../inline-message/variables' as inline-message-variables;
 @use '../table/mixins' as table-mixins;
 @use '../table/variables' as table-variables;
-@use '../switch/switch-theme' as switch-theme;
 
 ///
 /// Provides the CSS custom property definitions for the default Forge dark theme.
@@ -39,5 +38,4 @@
   @include badge-mixins.provide-theme(badge-variables.$theme-values-dark);
   @include banner-mixins.provide-theme(banner-variables.$theme-values-dark);
   @include inline-message-mixins.provide-theme(inline-message-variables.$theme-values-dark);
-  @include switch-theme.dark-theme-properties;
 }

package/styles/theme/_theme.scss

@@ -14,12 +14,7 @@
 @use './keys';
 @use './theme-values';
 @use './theme-utils';
-@use '../core/styles/theme';
-
-@mixin theme-styles($prefix: forge) {
-  @include theme.properties;
-  @include theme-utils.core-styles;
-}
+@use '../core/styles/scrollbar';
 
 @function text-emphasis($emphasis) {
   @return map.get(theme-values.$text-emphasis, $emphasis);
@@ -161,45 +156,8 @@
   ), $important: $important);
 }
 
-@mixin scrollbar() {
-  &::-webkit-scrollbar {
-    @include css-custom-property(width, --forge-scrollbar-width, theme-values.$scrollbar-width);
-    @include css-custom-property(height, --forge-scrollbar-height, theme-values.$scrollbar-height);
-  }
-  
-  &::-webkit-scrollbar-corner {
-    @include property(background-color, scrollbar-track);
-  }
-
-  &::-webkit-scrollbar-track {
-    @include property(background-color, scrollbar-track);
-    
-    &:hover {
-      @include property(background-color, scrollbar-track-hover);
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    @include property(background-color, scrollbar-thumb);
-    @include css-custom-property(height, --forge-scrollbar-min-height, theme-values.$scrollbar-thumb-min-height);
-    @include css-custom-property(width, --forge-scrollbar-min-width, theme-values.$scrollbar-thumb-min-width);
-    @include css-custom-property(border-radius, --forge-scrollbar-border-radius, 10px);
-    @include css-custom-property(border-width, --forge-scrollbar-border-width, 3px);
-
-    border-style: solid;
-    border-color: transparent;
-    background-clip: content-box;
-
-    &:hover {
-      @include property(background-color, scrollbar-thumb-hover);
-    }
-  }
-}
-
-@mixin scrollbar-theme-styles() {
-  * {
-    @include scrollbar;
-  }
+@mixin scrollbar {
+  @include scrollbar.base;
 }
 
 @function elevation($z-value, $color: elevation-theme.$baseline-color, $opacity-boost: 0) {

package/styles/theme/forge-theme.scss

@@ -3,7 +3,25 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './theme';
+@use '../core/styles/theme';
+@use '../core/styles/scrollbar';
 
-@include theme.theme-styles;
-@include theme.scrollbar-theme-styles;
+// Temporary theme properties for compatibility with MDC theme tokens
+//
+// TODO: remove this once MDC dependency is removed
+:root {
+  @include theme.properties-compat;
+}
+
+// Root theme properties
+:root {
+  @include theme.properties;
+}
+
+// Custom scrollbar styles
+* {
+  @include scrollbar.base;
+}
+
+// Utility classes for all theme tokens
+@include theme.classes;

package/styles/typography/_mixins.scss

@@ -14,26 +14,6 @@
 @use '../theme/custom-properties';
 
 @mixin core-styles() {
-  .forge-typography {
-    @include mdc-typography.base;
-    @include theme.css-custom-property(color, --mdc-theme-text-primary-on-background, mdc-theme-color.prop-value(text-primary-on-background));
-  }
-
-  // Create custom classes for built-in MDC typography styles
-  @each $style in map.keys(mdc-typography.$styles) {
-    .forge-typography--#{$style} {
-      @include mdc-typography.typography($style);
-      @include apply-additional-styles(variables.$mdc-typography-additional-styles, $style);
-    }
-  }
-  
-  // Create classes for forge-specific typography styles
-  @each $style in map.keys(variables.$styles) {
-    .forge-typography--#{$style} {
-      @include typography($style);
-    }
-  }
-  
   :root {
     // forge-specific MDC typography overrides
     @each $style, $properties in variables.$mdc-typography-overrides {

package/styles/{core/styles/tokens/theme/_shape.scss → typography/forge-typography-legacy.scss}

@@ -3,11 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-$shapes: (
-  small: 4px,
-  medium: 8px,
-  large: 0,
-  round: 50%
-);
-
+@use './mixins';
 
+@include mixins.core-styles;

package/styles/typography/forge-typography.scss

@@ -3,7 +3,15 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use '../theme';
-@use './mixins';
+@use '../core/styles/typography';
 
-@include mixins.core-styles;
+// TODO: remove when Forge has been fully converted to use the 3.0 typography system
+@use './forge-typography-legacy';
+
+/// Apply base typography styles to the body element by default
+body {
+  @include typography.base;
+}
+
+/// Create helper classes for each Forge typography style/role
+@include typography.classes;

package/styles/utils/_mixins-core.scss

@@ -10,7 +10,7 @@
   width: 100%;
 }
 
-@mixin body-base() {
+@mixin body-base {
   @include mdc-theme.property(background-color, background);
 
   margin: 0;

package/dist/esm/chunks/chunk.2O6IZ7XZ.js

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-import{b as x,j as P}from"./chunk.ISC7SZSP.js";import{a as u}from"./chunk.NVUMRW44.js";import{a as I}from"./chunk.5V5ABSHI.js";import{a as y,b as C}from"./chunk.DTZFWZPB.js";import{a as b,e as T,f as S,k as A}from"./chunk.NK7H3MMM.js";import{k as g}from"./chunk.J2M2MXP2.js";import{a as L,d as h}from"./chunk.M3QDAYD2.js";var Y=`${C}state-layer`,$={TARGET:"target",DISABLED:"disabled"},V=L({},$),W={SURFACE:".forge-state-layer"},K={HOVERED:"forge-state-layer--hovered",PRESSED:"forge-state-layer--pressed"},s={elementName:Y,attributes:V,selectors:W,classes:K},l=class n{constructor(e,t){this.x=e;this.y=t}static fromPointerEvent(e){return new n(e.pageX,e.pageY)}},N=150,M=450,f=225,D=.2,R=10,H=75,O=.35,w="::after",k="forwards",B="cubic-bezier(0.2, 0, 0, 1)",G=(i=>(i[i.INACTIVE=0]="INACTIVE",i[i.TOUCH_DELAY=1]="TOUCH_DELAY",i[i.HOLDING=2]="HOLDING",i[i.WAITING_FOR_CLICK=3]="WAITING_FOR_CLICK",i))(G||{});function U(n){let{height:e,width:t}=n.getBoundingClientRect(),r=Math.max(e,t),i=Math.max(O*r,H),o=Math.floor(r*D),_=`${(Math.sqrt(t**2+e**2)+R+i)/o}`,c=`${o}px`;return{rippleScale:_,rippleSize:c,initialSize:o}}function z(n,e,t){let{height:r,width:i}=n.getBoundingClientRect(),o={x:(i-e)/2,y:(r-e)/2},a;return Z(t)?a=X(n,t):a={x:i/2,y:r/2},a={x:a.x-e/2,y:a.y-e/2},{startPoint:a,endPoint:o}}function X(n,e){let{scrollX:t,scrollY:r}=window,{left:i,top:o}=n.getBoundingClientRect(),a=t+i,p=r+o,{x:_,y:c}=e;return{x:_-a,y:c-p}}function F(n,e,t){let{height:r,width:i}=n.getBoundingClientRect();return e>=0&&e<=i&&t>=0&&t<=r}function Z(n){return n&&(n instanceof l||["x","y"].every(e=>e in n))}var m=class extends I{constructor(t){super(t);this._targetElement=null;this._surfaceElement=S(t,s.selectors.SURFACE)}destroy(){typeof this._destroyDeferListener=="function"&&(this._destroyDeferListener(),this._destroyDeferListener=void 0)}async deferInitialization(t){if(!this._targetElement)return;let{userInteraction:r,destroy:i}=x(this._targetElement);this._destroyDeferListener=i;let o=await r;t(o.type==="pointerenter"?o:void 0)}addTargetListener(t,r){var i;(i=this._targetElement)==null||i.addEventListener(t,r)}removeTargetListener(t,r){var i;(i=this._targetElement)==null||i.removeEventListener(t,r)}setHovered(t){this._surfaceElement.classList.toggle(s.classes.HOVERED,t)}setPressed(t){this._surfaceElement.classList.toggle(s.classes.PRESSED,t)}getTargetElement(){return this._targetElement}setTargetElement(t){this._targetElement=t}trySetTarget(t){this._targetElement=P(this._component,t)}startAnimation(t){var E;if(!this._surfaceElement)return;this.setPressed(!0),(E=this._rippleAnimation)==null||E.cancel();let{rippleSize:r,rippleScale:i,initialSize:o}=U(this._component),{startPoint:a,endPoint:p}=z(this._component,o,t),_=`${a.x}px, ${a.y}px`,c=`${p.x}px, ${p.y}px`;this._rippleAnimation=this._surfaceElement.animate({top:[0,0],left:[0,0],height:[r,r],width:[r,r],transform:[`translate(${_}) scale(1)`,`translate(${c}) scale(${i})`]},{pseudoElement:w,duration:M,easing:B,fill:k})}async endAnimation(){var i;let t=this._rippleAnimation,r=(i=t==null?void 0:t.currentTime)!=null?i:1/0;if(r>=f){this.setPressed(!1);return}await new Promise(o=>{setTimeout(o,f-r)}),this._rippleAnimation===t&&this.setPressed(!1)}inBounds(t,r){return F(this._component,t,r)}};var v=class{constructor(e){this._adapter=e;this._target=null;this._disabled=!1;this._attached=!1;this._deferred=!0;this._pointerState=0;this._checkBoundsAfterContextMenu=!1;this._pointerEnterListener=t=>this._onPointerEnter(t),this._pointerLeaveListener=t=>this._onPointerLeave(t),this._pointerDownListener=t=>this._onPointerDown(t),this._pointerUpListener=t=>this._onPointerUp(t),this._pointerCancelListener=t=>this._onPointerCancel(t),this._clickListener=()=>this._onClick(),this._contextmenuListener=()=>this._onContextmenu()}initialize(){this._adapter.trySetTarget(this._target),this._deferInitialization()}disconnect(){this._pointerStartEvent=void 0,this._pointerState=0,this._adapter.setHovered(!1),this._adapter.setPressed(!1),this._adapter.destroy(),this._removeListeners()}playAnimation(e){this._adapter.startAnimation(e),this._endAnimation()}_deferInitialization(){this._adapter.deferInitialization(this._onDeferredInitialize.bind(this))}_applyListeners(){this._disabled||(this._adapter.addTargetListener("pointerenter",this._pointerEnterListener),this._adapter.addTargetListener("pointerleave",this._pointerLeaveListener),this._adapter.addTargetListener("pointerdown",this._pointerDownListener),this._adapter.addTargetListener("pointerup",this._pointerUpListener),this._adapter.addTargetListener("pointercancel",this._pointerCancelListener),this._adapter.addTargetListener("click",this._clickListener),this._adapter.addTargetListener("contextmenu",this._contextmenuListener),this._attached=!0)}_removeListeners(){this._adapter.removeTargetListener("pointerenter",this._pointerEnterListener),this._adapter.removeTargetListener("pointerleave",this._pointerLeaveListener),this._adapter.removeTargetListener("pointerdown",this._pointerDownListener),this._adapter.removeTargetListener("pointerup",this._pointerUpListener),this._adapter.removeTargetListener("pointercancel",this._pointerCancelListener),this._adapter.removeTargetListener("click",this._clickListener),this._adapter.removeTargetListener("contextmenu",this._contextmenuListener),this._attached=!1}_onDeferredInitialize(e){this._applyListeners(),(e==null?void 0:e.type)==="pointerenter"&&this._pointerEnterListener(e),this._deferred=!1}_onPointerEnter(e){this._canHandleEvent(e)&&this._adapter.setHovered(!0)}_onPointerLeave(e){this._canHandleEvent(e)&&(this._adapter.setHovered(!1),this._pointerState!==0&&this._adapter.endAnimation())}async _onPointerDown(e){if(this._pointerStartEvent=e,!!this._canHandleEvent(e)){if(!this._isTouch(e.pointerType)){this._pointerState=3,this._startAnimation(e);return}this._checkBoundsAfterContextMenu&&!this._adapter.inBounds(e.x,e.y)||(this._checkBoundsAfterContextMenu=!1,this._pointerState=1,await new Promise(t=>setTimeout(t,N)),this._pointerState===1&&(this._pointerState=2,this._startAnimation(e)))}}_onPointerUp(e){if(this._canHandleEvent(e)){if(this._pointerState===2){this._pointerState=3;return}if(this._pointerState===1){this._pointerState=3,this._startAnimation(this._pointerStartEvent);return}}}_onClick(){if(!this._disabled){if(this._pointerState===3){this._endAnimation();return}this._pointerState===0&&(this._startAnimation(this._pointerStartEvent),this._endAnimation())}}_onPointerCancel(e){this._canHandleEvent(e)&&this._endAnimation()}_onContextmenu(){this._disabled||(this._checkBoundsAfterContextMenu=!0,this._adapter.endAnimation())}_startAnimation(e){let t=e?l.fromPointerEvent(e):void 0;this._adapter.startAnimation(t)}_endAnimation(){this._pointerState=0,this._adapter.endAnimation(),this._pointerStartEvent=void 0}_canHandleEvent({type:e,isPrimary:t,buttons:r,pointerType:i,pointerId:o}){if(this._disabled||!t||this._pointerStartEvent&&this._pointerStartEvent.pointerId!==o)return!1;if(e==="pointerenter"||e==="pointerleave")return!this._isTouch(i);let a=r===1;return this._isTouch(i)||a}_isTouch(e){return e==="touch"}get isAttached(){return this._attached}get targetElement(){return this._adapter.getTargetElement()}set targetElement(e){this._attached&&this._removeListeners(),this._adapter.setTargetElement(e),this._deferred||this._deferInitialization()}get target(){return this._adapter.getHostAttribute(s.attributes.TARGET)}set target(e){this._target!==e&&(this._target=e,this._adapter.isConnected&&(this._attached&&this._removeListeners(),this._adapter.trySetTarget(e),this._deferred||this._deferInitialization()),this._adapter.toggleHostAttribute(s.attributes.TARGET,!!this._target,this._target))}get disabled(){return this._disabled}set disabled(e){e=!!e,this._disabled!==e&&(this._disabled=e,this._adapter.isConnected&&(this._disabled?this._removeListeners():this._deferred||this._deferInitialization()),this._adapter.toggleHostAttribute(s.attributes.DISABLED,this._disabled))}};var q='<template><div class="forge-state-layer" part="surface"></div></template>',j=':host{border-radius:inherit;position:absolute;inset:0;overflow:hidden;display:-webkit-box;display:flex;margin:auto;pointer-events:none;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}:host([disabled]){display:none}.forge-state-layer{--_color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_hover-color:var(--forge-state-layer-hover-color, var(--_color));--_hover-opacity:0.08;--_pressed-color:var(--forge-state-layer-pressed-color, var(--_color));--_pressed-opacity:0.12;--_hover-duration:15ms;--_pressed-duration:105ms;--_animation-duration:375ms}.forge-state-layer::after,.forge-state-layer::before{content:"";opacity:0;position:absolute}.forge-state-layer::before{background-color:var(--_hover-color);inset:0;-webkit-transition:opacity var(--_hover-duration) linear,background-color var(--_hover-duration) linear;transition:opacity var(--_hover-duration) linear,background-color var(--_hover-duration) linear}.forge-state-layer::after{background:radial-gradient(closest-side,var(--_pressed-color) max(100% - 70px,65%),transparent 100%);-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:opacity var(--_animation-duration) linear;transition:opacity var(--_animation-duration) linear}.forge-state-layer--hovered::before{background-color:var(--_hover-color);opacity:var(--_hover-opacity)}.forge-state-layer--pressed::after{opacity:var(--_pressed-opacity);-webkit-transition-duration:var(--_pressed-duration);transition-duration:var(--_pressed-duration)}@media screen and (forced-colors:active){:host{display:none}}',d=class extends A{constructor(){super();T(this,q,j),this._foundation=new v(new m(this))}static get observedAttributes(){return[s.attributes.TARGET,s.attributes.DISABLED]}connectedCallback(){this._foundation.initialize()}disconnectedCallback(){this._foundation.disconnect()}attributeChangedCallback(t,r,i){switch(t){case s.attributes.TARGET:this.target=i;break;case s.attributes.DISABLED:this.disabled=g(i);break}}playAnimation(t){this._foundation.playAnimation(t)}};h([u()],d.prototype,"targetElement",2),h([u()],d.prototype,"target",2),h([u()],d.prototype,"disabled",2),d=h([y({name:s.elementName})],d);function ye(){b(d)}export{s as a,l as b,N as c,M as d,f as e,D as f,R as g,H as h,O as i,w as j,k,B as l,G as m,m as n,v as o,d as p,ye as q};
-//# sourceMappingURL=chunk.2O6IZ7XZ.js.map