@tylertech/forge 3.9.0-dev.1 → 3.9.0-dev.2

package/esm/avatar/index.js

@@ -3,10 +3,10 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { AVATAR_TAG_NAME, AvatarComponent } from './avatar';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { AvatarComponent } from './avatar';
 export * from './avatar';
 export * from './avatar-constants';
 export function defineAvatarComponent() {
-    tryDefine(AVATAR_TAG_NAME, AvatarComponent);
+    defineCustomElement(AvatarComponent);
 }

package/esm/badge/index.js

@@ -3,11 +3,11 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { BADGE_TAG_NAME, BadgeComponent } from './badge';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { BadgeComponent } from './badge';
 export * from './badge-component-delegate';
 export * from './badge-constants';
 export * from './badge';
 export function defineBadgeComponent() {
-    tryDefine(BADGE_TAG_NAME, BadgeComponent);
+    defineCustomElement(BadgeComponent);
 }

package/esm/card/index.d.ts

@@ -3,6 +3,6 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './card-constants';
 export * from './card';
+export * from './card-constants';
 export declare function defineCardComponent(): void;

package/esm/card/index.js

@@ -3,10 +3,10 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { CARD_TAG_NAME, CardComponent } from './card';
-export * from './card-constants';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { CardComponent } from './card';
 export * from './card';
+export * from './card-constants';
 export function defineCardComponent() {
-    tryDefine(CARD_TAG_NAME, CardComponent);
+    defineCustomElement(CardComponent);
 }

package/esm/key/key/index.js

@@ -3,9 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { KEY_TAG_NAME, KeyComponent } from './key';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { KeyComponent } from './key';
 export * from './key';
 export function defineKeyComponent() {
-    tryDefine(KEY_TAG_NAME, KeyComponent);
+    defineCustomElement(KeyComponent);
 }

package/esm/key/key-item/index.js

@@ -3,9 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { KEY_ITEM_TAG_NAME, KeyItemComponent } from './key-item';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { KeyItemComponent } from './key-item';
 export * from './key-item';
 export function defineKeyItemComponent() {
-    tryDefine(KEY_ITEM_TAG_NAME, KeyItemComponent);
+    defineCustomElement(KeyItemComponent);
 }

package/esm/meter/meter/index.js

@@ -3,9 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
+import { defineCustomElement } from '@tylertech/forge-core';
 import { MeterComponent } from './meter';
 export * from './meter';
 export function defineMeterComponent() {
-    tryDefine('forge-meter', MeterComponent);
+    defineCustomElement(MeterComponent);
 }

package/esm/meter/meter-group/index.js

@@ -3,9 +3,9 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { tryDefine } from '@tylertech/forge-core';
-import { METER_GROUP_TAG_NAME, MeterGroupComponent } from './meter-group';
+import { defineCustomElement } from '@tylertech/forge-core';
+import { MeterGroupComponent } from './meter-group';
 export * from './meter-group';
 export function defineMeterGroupComponent() {
-    tryDefine(METER_GROUP_TAG_NAME, MeterGroupComponent);
+    defineCustomElement(MeterGroupComponent);
 }

package/esm/split-view/split-view-panel/split-view-panel.js

@@ -14,7 +14,7 @@ import { IconComponent, IconRegistry } from '../../icon';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 const template = '<template><div class=\"forge-split-view-panel\" id=\"root\" part=\"root\"><div class=\"forge-split-view-panel__handle\" id=\"handle\" part=\"handle\" role=\"separator\" aria-controls=\"content\" aria-grabbed=\"false\" tabindex=\"0\"><forge-icon class=\"forge-split-view-panel__icon\" id=\"icon\" part=\"icon\"></forge-icon><forge-state-layer target=\"handle\" id=\"state-layer\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator inward target=\"handle\" part=\"focus-indicator\"></forge-focus-indicator></div><div class=\"forge-split-view-panel__content\" id=\"content\" part=\"content\" role=\"group\"><slot></slot></div></div></template>';
-const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uwedhbm;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uwedhbm{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:uwedhbz;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uwedhbz{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uwedhcs;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uwedhcs{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:uwedhd4;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uwedhd4{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:uwedhd8;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uwedhd8{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uwedhds;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uwedhds{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:uwedheb;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uwedheb{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:uwedher;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes uwedher{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
+const styles = '.forge-split-view-panel{display:flex;width:100%;height:100%;overflow:hidden}.forge-split-view-panel__handle{color:var(--forge-theme-text-medium,rgba(0,0,0,.6));background-color:var(--forge-theme-outline,#e0e0e0);position:relative;display:flex;flex-shrink:0;justify-content:center;align-items:center;outline:0}.forge-split-view-panel__content{flex:1;overflow:hidden}.forge-split-view-panel--closed{display:none}.forge-split-view-panel--disabled #handle{pointer-events:none}.forge-split-view-panel--disabled .forge-split-view-panel__icon{display:none}.forge-split-view-panel[orientation=horizontal]{min-width:var(--forge-split-view-handle-width,8px);width:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:row}.forge-split-view-panel[orientation=horizontal] .forge-split-view-panel__handle{width:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u5hcny5;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5hcny5{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--closing[resizable=start]{position:absolute;top:0;right:0;animation-name:u5hcnya;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5hcnya{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u5hcnyv;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u5hcnyv{from{transform:none}to{transform:translateX(-100%)}}.forge-split-view-panel[orientation=horizontal].forge-split-view-panel--opening[resizable=start]{position:absolute;top:0;right:0;animation-name:u5hcnzl;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u5hcnzl{from{transform:none}to{transform:translateX(100%)}}.forge-split-view-panel[orientation=vertical]{min-height:var(--forge-split-view-handle-width,8px);height:calc(var(--forge-split-view-panel-size,unset) + var(--forge-split-view-handle-width,8px));flex-direction:column}.forge-split-view-panel[orientation=vertical] .forge-split-view-panel__handle{height:var(--forge-split-view-handle-width,8px);cursor:var(--forge-split-view-panel-cursor)}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=end]{position:absolute;top:0;left:0;animation-name:u5hcnzx;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5hcnzx{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--closing[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u5hco06;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u5hco06{from{transform:none}to{transform:translateY(100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=end]{position:absolute;top:0;left:0;animation-name:u5hco0q;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u5hco0q{from{transform:none}to{transform:translateY(-100%)}}.forge-split-view-panel[orientation=vertical].forge-split-view-panel--opening[resizable=start]{position:absolute;bottom:0;left:0;animation-name:u5hco1q;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1));animation-direction:reverse}@keyframes u5hco1q{from{transform:none}to{transform:translateY(100%)}}:host{z-index:var(--forge-split-view-animating-layer)!important;display:block;position:relative;height:100%;width:100%;flex:0}:host([hidden]){display:none}:host(:not([resizable=start],[resizable=end])){flex:1}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel{width:100%;height:100%;min-width:0;min-height:0}:host(:not([resizable=start],[resizable=end])) .forge-split-view-panel__handle{display:none}forge-focus-indicator{--forge-focus-indicator-active-width:2px}';
 /**
  * @tag forge-split-view-panel
  *

package/esm/table/table-constants.d.ts

@@ -88,6 +88,7 @@ export declare const TABLE_CONSTANTS: {
         FILTER: string;
         INITIALIZED: string;
         COLUMN_RESIZE: string;
+        BODY_RENDERED: string;
     };
     strings: {
         SELECT_ALL: string;

package/esm/table/table-constants.js

@@ -89,7 +89,8 @@ const events = {
     SORT: `${elementName}-sort`,
     FILTER: `${elementName}-filter`,
     INITIALIZED: `${elementName}-initialized`,
-    COLUMN_RESIZE: `${elementName}-column-resize`
+    COLUMN_RESIZE: `${elementName}-column-resize`,
+    BODY_RENDERED: `${elementName}-body-rendered`
 };
 const strings = {
     SELECT_ALL: 'select-all',

package/esm/table/table-core.js

@@ -443,6 +443,7 @@ export class TableCore {
         this._adapter.createTable(this._tableConfiguration);
         this._renderSelections();
         this._rendered = true;
+        this._adapter.emitHostEvent(TABLE_CONSTANTS.events.BODY_RENDERED, undefined, false);
     }
     /**
      * Renders the table body only.
@@ -453,6 +454,7 @@ export class TableCore {
         }
         this._adapter.recreateTableBody(this._tableConfiguration);
         this._renderSelections();
+        this._adapter.emitHostEvent(TABLE_CONSTANTS.events.BODY_RENDERED, undefined, false);
     }
     _renderSelections() {
         if (this.select) {

package/esm/table/table.d.ts

@@ -59,6 +59,7 @@ declare global {
         'forge-table-filter': CustomEvent<ITableFilterEventData>;
         'forge-table-initialized': CustomEvent<void>;
         'forge-table-column-resize': CustomEvent<ITableColumnResizeEventData>;
+        'forge-table-body-rendered': CustomEvent<void>;
     }
 }
 /**
@@ -77,6 +78,7 @@ declare global {
  * @event {CustomEvent<ITableFilterEventData>} forge-table-filter - Dispatched when a column is filtered. Only applies when `filter` is specified.
  * @event {CustomEvent<void>} forge-table-initialized - Dispatched when the table is initialized in the DOM for the first time.
  * @event {CustomEvent<ITableColumnResizeEventData>} forge-table-column-resize - Dispatched when a column is resized.
+ * @event {CustomEvent<void>} forge-table-body-rendered - Dispatched when the table body is rendered.
  *
  * @cssclass forge-data-table - The base table class.
  */

package/esm/table/table.js

@@ -31,6 +31,7 @@ import { TooltipComponent } from '../tooltip';
  * @event {CustomEvent<ITableFilterEventData>} forge-table-filter - Dispatched when a column is filtered. Only applies when `filter` is specified.
  * @event {CustomEvent<void>} forge-table-initialized - Dispatched when the table is initialized in the DOM for the first time.
  * @event {CustomEvent<ITableColumnResizeEventData>} forge-table-column-resize - Dispatched when a column is resized.
+ * @event {CustomEvent<void>} forge-table-body-rendered - Dispatched when the table body is rendered.
  *
  * @cssclass forge-data-table - The base table class.
  */

package/esm/view-switcher/view-switcher.d.ts

@@ -22,6 +22,11 @@ declare global {
  * @tag forge-view-switcher
  *
  * @dependency forge-view
+ *
+ * @cssproperty --forge-view-switcher-height - The `height` of the view switcher.
+ * @cssproperty --forge-view-switcher-width - The `width` of the view switcher.
+ * @cssproperty --forge-view-switcher-animation-duration - The duration of view switching animations.
+ * @cssproperty --forge-view-switcher-animation-easing - The timing function of view switching animations.
  */
 export declare class ViewSwitcherComponent extends BaseComponent implements IViewSwitcherComponent {
     static get observedAttributes(): string[];

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

@@ -11,11 +11,16 @@ 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 = ':host{height:var(--_view-switcher-height);width:var(--_view-switcher-width);display:block}:host([hidden]){display:none}.forge-view-switcher{--_view-switcher-height:var(--forge-view-switcher-height, auto);--_view-switcher-width:var(--forge-view-switcher-width, auto);--_view-switcher-animation-duration:var(--forge-view-switcher-animation-duration, var(--forge-animation-duration-medium2, 300ms));--_view-switcher-animation-easing:var(--forge-view-switcher-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-view-switcher{height:var(--_view-switcher-height);width:var(--_view-switcher-width);position:relative;overflow:hidden;transition-property:height;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host(.slide) ::slotted(forge-view){transition-property:transform;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:transform}:host(.fade) ::slotted(forge-view){transition-property:opacity;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:opacity}:host(.fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
+const styles = ':host{height:var(--_view-switcher-height);width:var(--_view-switcher-width);display:block}:host{--_view-switcher-height:var(--forge-view-switcher-height, auto);--_view-switcher-width:var(--forge-view-switcher-width, auto)}:host([hidden]){display:none}.forge-view-switcher{--_view-switcher-animation-duration:var(--forge-view-switcher-animation-duration, var(--forge-animation-duration-medium2, 300ms));--_view-switcher-animation-easing:var(--forge-view-switcher-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.forge-view-switcher{height:var(--_view-switcher-height);width:var(--_view-switcher-width);position:relative;overflow:hidden;transition-property:height;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing)}.forge-view-switcher ::slotted(.forge-view-switcher__view--hidden){position:absolute;top:0;right:0;bottom:0;left:0}:host(.slide) ::slotted(forge-view){transition-property:transform;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:transform}:host(.fade) ::slotted(forge-view){transition-property:opacity;transition-duration:var(--_view-switcher-animation-duration);transition-timing-function:var(--_view-switcher-animation-easing);will-change:opacity}:host(.fade) ::slotted(.forge-view-switcher__view--hidden){opacity:0}';
 /**
  * @tag forge-view-switcher
  *
  * @dependency forge-view
+ *
+ * @cssproperty --forge-view-switcher-height - The `height` of the view switcher.
+ * @cssproperty --forge-view-switcher-width - The `width` of the view switcher.
+ * @cssproperty --forge-view-switcher-animation-duration - The duration of view switching animations.
+ * @cssproperty --forge-view-switcher-animation-easing - The timing function of view switching animations.
  */
 let ViewSwitcherComponent = class ViewSwitcherComponent extends BaseComponent {
     static get observedAttributes() {

package/package.json

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

package/sass/view-switcher/view-switcher.scss

@@ -3,14 +3,20 @@
  * Copyright Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-@use './core';
+@use './core' as *;
 
 //
 // Host
 //
 
+$host-tokens: (height, width);
+
+:host {
+  @include host;
+}
+
 :host {
-  @include core.host;
+  @include tokens($includes: $host-tokens);
 }
 
 :host([hidden]) {
@@ -22,14 +28,14 @@
 //
 
 .forge-view-switcher {
-  @include core.tokens;
+  @include tokens($excludes: $host-tokens);
 }
 
 .forge-view-switcher {
-  @include core.base;
+  @include base;
 
   ::slotted(.forge-view-switcher__view--hidden) {
-    @include core.view-hidden;
+    @include view-hidden;
   }
 }
 
@@ -39,7 +45,7 @@
 
 :host(.slide) {
   ::slotted(forge-view) {
-    @include core.view-slidable;
+    @include view-slidable;
   }
 }
 
@@ -49,7 +55,7 @@
 
 :host(.fade) {
   ::slotted(forge-view) {
-    @include core.view-fadeable;
+    @include view-fadeable;
   }
 
   ::slotted(.forge-view-switcher__view--hidden) {