@tylertech/forge 3.2.0 → 3.3.1

package/esm/skip-link/skip-link.d.ts

@@ -11,6 +11,7 @@ export interface ISkipLinkComponent extends IBaseComponent {
     muted: boolean;
     persistent: boolean;
     inline: boolean;
+    skipUrlChange: boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -22,18 +23,6 @@ declare global {
  *
  * @summary The Forge Skip Link component is used to provide a way for users to skip repetitive content and navigate directly to a section of the page.
  *
- * @property {string} [target=''] - The IDREF of the element to which the skip link should navigate.
- * @property {SkipLinkTheme} [theme='default'] - The theme applied to the skip link.
- * @property {boolean} [muted=false] - Whether or not the skip link uses a muted color scheme.
- * @property {boolean} [persistent=false] - Whether or not the skip link should remain visible when not focused.
- * @property {boolean} [inline=false] - Whether or not the skip link renders within its container.
- *
- * @attribute {string} [target=''] - The IDREF of the element to which the skip link should navigate.
- * @attribute {SkipLinkTheme} [theme='default'] - The theme applied to the skip link.
- * @attribute {boolean} [muted=false] - Whether or not the skip link uses a muted color scheme.
- * @attribute {boolean} [persistent=false] - Whether or not the skip link should remain visible when not focused.
- * @attribute {boolean} [inline=false] - Whether or not the skip link renders within its container.
- *
  * @cssproperty --forge-skip-link-background - The background color of the skip link.
  * @cssproperty --forge-skip-link-color - The text color of the skip link.
  * @cssproperty --forge-skip-link-shape - The border radius of the skip link.
@@ -62,17 +51,52 @@ export declare class SkipLinkComponent extends BaseComponent implements ISkipLin
     private _muted;
     private _persistent;
     private _inline;
+    private _skipUrlChange;
     private _anchorElement;
+    private _clickListener;
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * The IDREF of the element to which the skip link should navigate.
+     * @default ''
+     * @attribute
+     */
     get target(): string;
     set target(value: string);
+    /**
+     * The theme applied to the skip link.
+     * @default 'default'
+     * @attribute
+     */
     get theme(): SkipLinkTheme;
     set theme(value: SkipLinkTheme);
+    /**
+     * Whether or not the skip link uses a muted color scheme.
+     * @default false
+     * @attribute
+     */
     get muted(): boolean;
     set muted(value: boolean);
+    /**
+     * Whether or not the skip link should remain visible when not focused.
+     * @default false
+     * @attribute
+     */
     get persistent(): boolean;
     set persistent(value: boolean);
+    /**
+     * Whether or not the skip link renders within its container.
+     * @default false
+     * @attribute
+     */
     get inline(): boolean;
     set inline(value: boolean);
+    /**
+     * Sets the skip link to skip browser navigation and scroll to the target element.
+     * @default false
+     * @attribute
+     */
+    get skipUrlChange(): boolean;
+    set skipUrlChange(value: boolean);
+    private _handleClick;
 }

package/esm/skip-link/skip-link.js

@@ -16,18 +16,6 @@ const style = ':host{--_skip-link-inset:var(--forge-skip-link-inset, var(--forge
  *
  * @summary The Forge Skip Link component is used to provide a way for users to skip repetitive content and navigate directly to a section of the page.
  *
- * @property {string} [target=''] - The IDREF of the element to which the skip link should navigate.
- * @property {SkipLinkTheme} [theme='default'] - The theme applied to the skip link.
- * @property {boolean} [muted=false] - Whether or not the skip link uses a muted color scheme.
- * @property {boolean} [persistent=false] - Whether or not the skip link should remain visible when not focused.
- * @property {boolean} [inline=false] - Whether or not the skip link renders within its container.
- *
- * @attribute {string} [target=''] - The IDREF of the element to which the skip link should navigate.
- * @attribute {SkipLinkTheme} [theme='default'] - The theme applied to the skip link.
- * @attribute {boolean} [muted=false] - Whether or not the skip link uses a muted color scheme.
- * @attribute {boolean} [persistent=false] - Whether or not the skip link should remain visible when not focused.
- * @attribute {boolean} [inline=false] - Whether or not the skip link renders within its container.
- *
  * @cssproperty --forge-skip-link-background - The background color of the skip link.
  * @cssproperty --forge-skip-link-color - The text color of the skip link.
  * @cssproperty --forge-skip-link-shape - The border radius of the skip link.
@@ -60,6 +48,8 @@ let SkipLinkComponent = class SkipLinkComponent extends BaseComponent {
         this._muted = false;
         this._persistent = false;
         this._inline = false;
+        this._skipUrlChange = false;
+        this._clickListener = (evt) => this._handleClick(evt);
         attachShadowTemplate(this, template, style);
         this._anchorElement = getShadowElement(this, SKIP_LINK_CONSTANTS.selectors.ANCHOR);
     }
@@ -80,8 +70,16 @@ let SkipLinkComponent = class SkipLinkComponent extends BaseComponent {
             case SKIP_LINK_CONSTANTS.observedAttributes.INLINE:
                 this.inline = coerceBoolean(newValue);
                 break;
+            case SKIP_LINK_CONSTANTS.observedAttributes.SKIP_URL_CHANGE:
+                this.skipUrlChange = coerceBoolean(newValue);
+                break;
         }
     }
+    /**
+     * The IDREF of the element to which the skip link should navigate.
+     * @default ''
+     * @attribute
+     */
     get target() {
         return this._target;
     }
@@ -92,6 +90,11 @@ let SkipLinkComponent = class SkipLinkComponent extends BaseComponent {
             this._anchorElement.href = `#${this._target}`;
         }
     }
+    /**
+     * The theme applied to the skip link.
+     * @default 'default'
+     * @attribute
+     */
     get theme() {
         return this._theme;
     }
@@ -101,6 +104,11 @@ let SkipLinkComponent = class SkipLinkComponent extends BaseComponent {
             this.setAttribute(SKIP_LINK_CONSTANTS.attributes.THEME, this._theme);
         }
     }
+    /**
+     * Whether or not the skip link uses a muted color scheme.
+     * @default false
+     * @attribute
+     */
     get muted() {
         return this._muted;
     }
@@ -110,6 +118,11 @@ let SkipLinkComponent = class SkipLinkComponent extends BaseComponent {
             this.toggleAttribute(SKIP_LINK_CONSTANTS.attributes.MUTED, this._muted);
         }
     }
+    /**
+     * Whether or not the skip link should remain visible when not focused.
+     * @default false
+     * @attribute
+     */
     get persistent() {
         return this._persistent;
     }
@@ -119,6 +132,11 @@ let SkipLinkComponent = class SkipLinkComponent extends BaseComponent {
             this.toggleAttribute(SKIP_LINK_CONSTANTS.attributes.PERSISTENT, this._persistent);
         }
     }
+    /**
+     * Whether or not the skip link renders within its container.
+     * @default false
+     * @attribute
+     */
     get inline() {
         return this._inline;
     }
@@ -128,6 +146,31 @@ let SkipLinkComponent = class SkipLinkComponent extends BaseComponent {
             this.toggleAttribute(SKIP_LINK_CONSTANTS.attributes.INLINE, this._inline);
         }
     }
+    /**
+     * Sets the skip link to skip browser navigation and scroll to the target element.
+     * @default false
+     * @attribute
+     */
+    get skipUrlChange() {
+        return this._skipUrlChange;
+    }
+    set skipUrlChange(value) {
+        if (this._skipUrlChange !== value) {
+            this._skipUrlChange = value;
+            this.toggleAttribute(SKIP_LINK_CONSTANTS.attributes.SKIP_URL_CHANGE, this._skipUrlChange);
+            if (this._skipUrlChange) {
+                this._anchorElement.addEventListener('click', this._clickListener);
+                return;
+            }
+            this._anchorElement.removeEventListener('click', this._clickListener);
+        }
+    }
+    _handleClick(evt) {
+        evt.preventDefault();
+        const targetElement = document.getElementById(this._target);
+        targetElement?.focus();
+        targetElement?.scrollIntoView({ behavior: 'smooth' });
+    }
 };
 SkipLinkComponent = __decorate([
     customElement({

package/esm/tabs/tab/tab-constants.d.ts

@@ -24,9 +24,7 @@ export declare const TAB_CONSTANTS: {
     selectors: {
         INDICATOR: string;
     };
-    classes: {
-        SELECTED: string;
-    };
+    classes: {};
     events: {
         SELECT: string;
     };

package/esm/tabs/tab/tab-constants.js

@@ -19,9 +19,7 @@ const attributes = {
 const selectors = {
     INDICATOR: '.indicator'
 };
-const classes = {
-    SELECTED: 'selected'
-};
+const classes = {};
 const events = {
     SELECT: `${elementName}-select`
 };

package/esm/tabs/tab/tab.d.ts

@@ -26,7 +26,7 @@ declare global {
  * @dependency forge-focus-indicator
  * @dependency forge-state-layer
  *
- * @property {boolean} [disabled=false] - The disabled state of the tab.
+ * @property {boolean} [disabled=false] - The disabled state of the tab. Should not be set if using the disabled property on `forge-tab-bar`.
  * @property {boolean} [selected=false] - The selected state of the tab.
  * @property {boolean} [vertical=false] - Controls whether the tab is vertical or horizontal.
  * @property {boolean} [stacked=false] - Controls whether the tab is taller to allow for slotted leading/trailing elements.

package/esm/tabs/tab/tab.js

@@ -19,7 +19,7 @@ const styles = ':host{display:inline-flex;outline:0;-webkit-tap-highlight-color:
  * @dependency forge-focus-indicator
  * @dependency forge-state-layer
  *
- * @property {boolean} [disabled=false] - The disabled state of the tab.
+ * @property {boolean} [disabled=false] - The disabled state of the tab. Should not be set if using the disabled property on `forge-tab-bar`.
  * @property {boolean} [selected=false] - The selected state of the tab.
  * @property {boolean} [vertical=false] - Controls whether the tab is vertical or horizontal.
  * @property {boolean} [stacked=false] - Controls whether the tab is taller to allow for slotted leading/trailing elements.

package/esm/tabs/tab-bar/tab-bar-core.js

@@ -139,7 +139,8 @@ export class TabBarCore {
     _syncTabState() {
         this._tabs.forEach((tab, index) => {
             tab.selected = index === this._activeTab;
-            tab.disabled = this._disabled;
+            if (this._disabled)
+                tab.disabled = this._disabled;
             tab.vertical = this._vertical;
             tab.stacked = this._stacked;
             tab.secondary = this._secondary;

package/esm/tabs/tab-bar/tab-bar.d.ts

@@ -38,7 +38,7 @@ declare global {
  * @dependency forge-icon-button
  * @dependency forge-icon
  *
- * @property {boolean} [disabled=false] - The disabled state of the tab bar.
+ * @property {boolean} [disabled=false] - Sets the disabled state of all child tabs.  If true, any new tabs added to the DOM will be disabled by default. This can be used instead of setting individual tab disabled properties, mixing the two methods of disabling is not supported.
  * @property {number} [activeTab=null] - The index of the active tab.
  * @property {boolean} [vertical=false] - Controls whether the tab bar is vertical or horizontal.
  * @property {boolean} [clustered=false] - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.

package/esm/tabs/tab-bar/tab-bar.js

@@ -29,7 +29,7 @@ const styles = ':host{position:relative;display:block}:host([hidden]){display:no
  * @dependency forge-icon-button
  * @dependency forge-icon
  *
- * @property {boolean} [disabled=false] - The disabled state of the tab bar.
+ * @property {boolean} [disabled=false] - Sets the disabled state of all child tabs.  If true, any new tabs added to the DOM will be disabled by default. This can be used instead of setting individual tab disabled properties, mixing the two methods of disabling is not supported.
  * @property {number} [activeTab=null] - The index of the active tab.
  * @property {boolean} [vertical=false] - Controls whether the tab bar is vertical or horizontal.
  * @property {boolean} [clustered=false] - Controls whether the tabs stretch the full width of their container or cluster together at their minimum width.

package/esm/text-field/text-field-adapter.d.ts

@@ -12,19 +12,22 @@ export interface ITextFieldAdapter extends IBaseFieldAdapter {
     addRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
     removeRootListener(name: keyof HTMLElementEventMap, listener: EventListener): void;
     disableInput(disabled: boolean): void;
-    handleDefaultSlotChange(slot: HTMLSlotElement, listener: TextFieldInputAttributeObserver): void;
+    handleDefaultSlotChange(listener: TextFieldInputAttributeObserver): void;
     tryAddValueChangeListener(context: unknown, listener: TextFieldValueChangeListener): void;
     removeValueChangeListener(): void;
     tryFloatLabel(force?: boolean): void;
-    tryConnectSlottedLabel(slot: HTMLSlotElement): void;
+    tryConnectSlottedLabel(): void;
     connectClearButton(listener: EventListener): void;
     disconnectClearButton(listener: EventListener): void;
     toggleClearButtonVisibility(visible: boolean): void;
     clearInput(): void;
+    getAllSlotElements(): HTMLSlotElement[];
 }
 export declare class TextFieldAdapter extends BaseFieldAdapter implements ITextFieldAdapter {
     protected readonly _fieldElement: IFieldComponent;
     private readonly _clearButtonSlotElement;
+    private readonly _defaultSlotElement;
+    private readonly _labelSlotElement;
     private _popoverTargetElement;
     private _inputElements;
     private _inputMutationObserver?;
@@ -39,13 +42,14 @@ export declare class TextFieldAdapter extends BaseFieldAdapter implements ITextF
     inputIsDisabled(): boolean;
     click(): void;
     applyLabel(value: string | null): void;
-    handleDefaultSlotChange(slot: HTMLSlotElement, listener: TextFieldInputAttributeObserver): void;
+    handleDefaultSlotChange(listener: TextFieldInputAttributeObserver): void;
     tryAddValueChangeListener(context: unknown, listener: TextFieldValueChangeListener): void;
     removeValueChangeListener(): void;
     tryFloatLabel(force?: boolean): void;
-    tryConnectSlottedLabel(slot: HTMLSlotElement): void;
+    tryConnectSlottedLabel(): void;
     connectClearButton(listener: EventListener): void;
     disconnectClearButton(listener: EventListener): void;
     toggleClearButtonVisibility(visible: boolean): void;
     clearInput(): void;
+    getAllSlotElements(): HTMLSlotElement[];
 }

package/esm/text-field/text-field-adapter.js

@@ -26,6 +26,8 @@ export class TextFieldAdapter extends BaseFieldAdapter {
         this._destroyValueChangerListeners = [];
         this._fieldElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.FIELD);
         this._clearButtonSlotElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.CLEAR_BUTTON_SLOT);
+        this._defaultSlotElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.DEFAULT_SLOT);
+        this._labelSlotElement = getShadowElement(component, TEXT_FIELD_CONSTANTS.selectors.LABEL_SLOT);
         this._fieldElement.setAttribute('exportparts', Object.values(FIELD_CONSTANTS.parts).join(', '));
         this._clearButtonSlotElement.remove();
     }
@@ -49,11 +51,11 @@ export class TextFieldAdapter extends BaseFieldAdapter {
             toggleAttribute(inputElement, !!value, 'aria-label', value ?? '');
         });
     }
-    handleDefaultSlotChange(slot, listener) {
+    handleDefaultSlotChange(listener) {
         // Destroy the mutation observer if it exists
         this._inputMutationObserver?.disconnect();
         // If there are no assigned elements, return
-        const assignedElements = slot.assignedElements();
+        const assignedElements = this._defaultSlotElement.assignedElements();
         if (!assignedElements.length) {
             return;
         }
@@ -106,14 +108,14 @@ export class TextFieldAdapter extends BaseFieldAdapter {
         // Float the label if no input has a value or a placeholder
         this._fieldElement.floatLabel = this.hasValue || this.hasPlaceholder;
     }
-    tryConnectSlottedLabel(slot) {
+    tryConnectSlottedLabel() {
         // Only one input can be automatically connected to a label, return if there are no or more
         // than one inputs or if the input is already labelled
         if (this._inputElements.length !== 1 || this._inputElements[0].labels?.length) {
             return;
         }
         const inputElement = this._inputElements[0];
-        const elements = slot.assignedElements({ flatten: true });
+        const elements = this._labelSlotElement.assignedElements({ flatten: true });
         // Attempt to find and connect a `<forge-label>` element
         const forgeLabel = elements.find(el => el.matches(TEXT_FIELD_CONSTANTS.selectors.FORGE_LABEL));
         if (forgeLabel) {
@@ -151,4 +153,7 @@ export class TextFieldAdapter extends BaseFieldAdapter {
         this._inputElements.forEach(el => (el.value = ''));
         this._inputElements[0].focus();
     }
+    getAllSlotElements() {
+        return Array.from(this._component.shadowRoot?.querySelectorAll('slot') ?? []);
+    }
 }

package/esm/text-field/text-field-constants.d.ts

@@ -14,6 +14,8 @@ export declare const TEXT_FIELD_CONSTANTS: {
     };
     selectors: {
         FIELD: string;
+        DEFAULT_SLOT: string;
+        LABEL_SLOT: string;
         CLEAR_BUTTON_SLOT: string;
         FORGE_LABEL: "forge-label";
         INPUT: string;

package/esm/text-field/text-field-constants.js

@@ -14,6 +14,8 @@ const attributes = {
 };
 const selectors = {
     FIELD: '#field',
+    DEFAULT_SLOT: 'slot:not([name])',
+    LABEL_SLOT: 'slot[name=label]',
     CLEAR_BUTTON_SLOT: 'slot[name=clear-button]',
     FORGE_LABEL: LABEL_CONSTANTS.elementName,
     INPUT: ':where(input:not([type=button], [type=checkbox], [type=color], [type=hidden], [type=image], [type=radio], [type=range], [type=reset], [type=submit]), textarea)'

package/esm/text-field/text-field-core.d.ts

@@ -22,7 +22,9 @@ export declare class TextFieldCore extends BaseFieldCore<ITextFieldAdapter> impl
     initialize(): void;
     destroy(): void;
     get popoverTargetElement(): HTMLElement;
+    private _initializeSlots;
     private _onSlotChange;
+    private _handleSlotChange;
     private _onInputAttributeChange;
     private _onClearButtonClick;
     private _onValueChange;

package/esm/text-field/text-field-core.js

@@ -21,6 +21,7 @@ export class TextFieldCore extends BaseFieldCore {
         this._adapter.tryApplyGlobalConfiguration(['labelPosition', 'variant']);
         this._adapter.addRootListener('slotchange', this._slotChangeListener);
         this._adapter.addRootListener('input', this._inputListener);
+        this._initializeSlots();
     }
     destroy() {
         this._adapter.removeRootListener('slotchange', this._slotChangeListener);
@@ -30,14 +31,20 @@ export class TextFieldCore extends BaseFieldCore {
     get popoverTargetElement() {
         return this._adapter.popoverTargetElement;
     }
+    _initializeSlots() {
+        this._adapter.getAllSlotElements().forEach(slot => this._handleSlotChange(slot.name));
+    }
     _onSlotChange(evt) {
         const target = evt.target;
-        switch (target.name) {
+        this._handleSlotChange(target.name);
+    }
+    _handleSlotChange(name) {
+        switch (name) {
             case 'label':
-                this._adapter.tryConnectSlottedLabel(target);
+                this._adapter.tryConnectSlottedLabel();
                 break;
             case '':
-                this._adapter.handleDefaultSlotChange(target, this._inputAttributeListener);
+                this._adapter.handleDefaultSlotChange(this._inputAttributeListener);
                 this._adapter.tryAddValueChangeListener(this, this._valueChangeListener);
                 this._tryFloatLabel();
                 break;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {

package/sass/button/_core.scss

@@ -12,6 +12,7 @@
   display: #{token(display)};
   position: relative;
   outline: none;
+  vertical-align: middle;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -101,6 +102,10 @@
   text-decoration: none;
 }
 
+@mixin text {
+  @include override(padding-inline, text-padding-inline);
+}
+
 @mixin filled {
   @include override(background, filled-background);
   @include override(color, filled-color);

package/sass/button/button.scss

@@ -136,6 +136,12 @@ forge-focus-indicator {
 // Variants
 //
 
+:host(:where(:not([variant]), [variant='text'])) {
+  .forge-button {
+    @include text;
+  }
+}
+
 :host([variant='filled']) {
   .forge-button {
     @include filled;

package/sass/button/forge-button.scss

@@ -43,6 +43,11 @@
     pointer-events: initial;
   }
 
+  &:where(:not(.forge-button--outlined, .forge-button--tonal, .forge-button--filled, .forge-button--raised, .forge-button--link)),
+  &--text {
+    @include core.text;
+  }
+
   &--outlined {
     @include core.outlined;
 

package/sass/chip-field/chip-field.scss

@@ -77,7 +77,8 @@ $themes: (primary, secondary, tertiary, success, warning, error, info);
       @include chip.provide-theme(
         (
           field-background: theme.variable($theme),
-          field-color: theme.variable(on-#{$theme})
+          field-color: theme.variable(on-#{$theme}),
+          focus-indicator-color: theme.variable($theme)
         )
       );
     }

package/sass/chips/chip/chip.scss

@@ -64,7 +64,7 @@
 forge-focus-indicator {
   @include focus-indicator.provide-theme(
     (
-      color: #{token(color)},
+      color: #{token(focus-indicator-color)},
       shape: #{token(shape)}
     )
   );

package/sass/circular-progress/_core.scss

@@ -14,8 +14,8 @@ $_cycle-duration: calc(4 * #{token(arc-duration)});
 @mixin container {
   display: inline-flex;
   vertical-align: middle;
-  min-block-size: #{token(size)};
-  min-inline-size: #{token(size)};
+  block-size: #{token(size)};
+  inline-size: #{token(size)};
   position: relative;
   align-items: center;
   justify-content: center;

package/sass/core/styles/tokens/button/_tokens.scss

@@ -18,7 +18,7 @@ $tokens: (
   primary-color: utils.module-val(button, primary-color, theme.variable(primary)),
   text-color: utils.module-ref(button, text-color, primary-color),
   disabled-color: utils.module-val(button, disabled-color, theme.variable(surface-container)),
-  padding: utils.module-val(button, padding, 8px),
+  padding: utils.module-val(button, padding, spacing.variable(medium)),
   display: utils.module-val(button, display, inline-flex),
   justify: utils.module-val(button, justify, center),
   shape: utils.module-val(button, shape, shape.variable(medium)),
@@ -46,6 +46,8 @@ $tokens: (
   cursor: utils.module-val(button, cursor, pointer),
   transition-duration: utils.module-val(button, transition-duration, animation.variable(duration-short3)),
   transition-timing: utils.module-val(button, transition-timing, animation.variable(easing-standard)),
+  // Text
+  text-padding-inline: utils.module-val(button, text-padding-inline, spacing.variable(xsmall)),
   // Outlined
   outlined-background: utils.module-val(button, outlined-background, transparent),
   outlined-color: utils.module-ref(button, outlined-color, primary-color),

package/sass/core/styles/tokens/chips/chip/_tokens.scss

@@ -22,6 +22,7 @@ $tokens: (
   padding-block: utils.module-val(chip, padding-block, 0),
   cursor: utils.module-val(chip, cursor, pointer),
   icon-font-size: utils.module-val(chip, icon-font-size, 1.5rem),
+  focus-indicator-color: utils.module-ref(chip, focus-indicator-color, color),
   // Disabled
   disabled-opacity: utils.module-val(chip, disabled-opacity, theme.emphasis(medium-low)),
   disabled-cursor: utils.module-val(chip, disabled-cursor, not-allowed),

package/sass/dialog/_animations.scss

@@ -9,7 +9,7 @@
 // Zoom (default)
 //
 
-@keyframes zoom-in {
+@keyframes forge-dialog-zoom-in {
   from {
     opacity: #{token(zoom-opacity)};
     scale: #{token(zoom-scale)};
@@ -20,7 +20,7 @@
   }
 }
 
-@keyframes zoom-out {
+@keyframes forge-dialog-zoom-out {
   from {
     opacity: 1;
     scale: 1;
@@ -35,7 +35,7 @@
 // Fade
 //
 
-@keyframes fade-in {
+@keyframes forge-dialog-fade-in {
   from {
     opacity: #{token(fade-opacity)};
   }
@@ -44,7 +44,7 @@
   }
 }
 
-@keyframes fade-out {
+@keyframes forge-dialog-fade-out {
   from {
     opacity: 1;
   }
@@ -57,7 +57,7 @@
 // Slide
 //
 
-@keyframes slide-in {
+@keyframes forge-dialog-slide-in {
   from {
     opacity: #{token(slide-opacity)};
     translate: #{token(slide-translate)};
@@ -69,7 +69,7 @@
   }
 }
 
-@keyframes slide-out {
+@keyframes forge-dialog-slide-out {
   from {
     opacity: 1;
     translate: 0 0;

package/sass/dialog/dialog.scss

@@ -173,10 +173,10 @@ $can-animate: '[visible]:not([animation-type=none])';
   :host(#{$can-animate}:is(:not([animation-type]), [animation-type='zoom'])) {
     dialog.forge-dialog[open] {
       .surface {
-        animation-name: zoom-in;
+        animation-name: forge-dialog-zoom-in;
 
         &.exiting {
-          animation-name: zoom-out;
+          animation-name: forge-dialog-zoom-out;
         }
       }
     }
@@ -186,10 +186,10 @@ $can-animate: '[visible]:not([animation-type=none])';
   :host(#{$can-animate}[animation-type='fade']) {
     dialog.forge-dialog[open] {
       .surface {
-        animation-name: fade-in;
+        animation-name: forge-dialog-fade-in;
 
         &.exiting {
-          animation-name: fade-out;
+          animation-name: forge-dialog-fade-out;
         }
       }
     }
@@ -199,10 +199,10 @@ $can-animate: '[visible]:not([animation-type=none])';
   :host(#{$can-animate}[animation-type='slide']) {
     dialog.forge-dialog[open] {
       .surface {
-        animation-name: slide-in;
+        animation-name: forge-dialog-slide-in;
 
         &.exiting {
-          animation-name: slide-out;
+          animation-name: forge-dialog-slide-out;
         }
       }
     }
@@ -252,10 +252,10 @@ $can-animate: '[visible]:not([animation-type=none])';
     }
 
     .surface {
-      animation-name: slide-in;
+      animation-name: forge-dialog-slide-in;
 
       &.exiting {
-        animation-name: slide-out;
+        animation-name: forge-dialog-slide-out;
       }
     }
   }
@@ -358,10 +358,10 @@ $can-animate: '[visible]:not([animation-type=none])';
 @layer media {
   @media (prefers-reduced-motion: reduce) {
     .surface {
-      animation-name: fade-in;
+      animation-name: forge-dialog-fade-in;
 
       &.exiting {
-        animation-name: fade-out;
+        animation-name: forge-dialog-fade-out;
       }
     }
   }