@tylertech/forge 3.8.2-dev.0 → 3.9.0-dev.1

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

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 import { getShadowElement, toggleAttribute } from '@tylertech/forge-core';
-import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
+import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { TAB_CONSTANTS } from '../tab/tab-constants';
 import { TAB_BAR_CONSTANTS } from './tab-bar-constants';

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

@@ -29,6 +29,7 @@ export declare class TabBarCore implements ITabBarCore {
     private _inverted;
     private _autoActivate;
     private _scrollButtons;
+    private _tabs;
     private _scrollButtonsVisible;
     private _tabScrollAnimationFrame;
     private _tabsChangedListener;

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

@@ -18,6 +18,7 @@ export class TabBarCore {
         this._inverted = false;
         this._autoActivate = false;
         this._scrollButtons = false;
+        this._tabs = [];
         this._scrollButtonsVisible = false;
         this._tabsChangedListener = () => this._onTabsChanged();
         this._tabSelectedListener = (evt) => this._onTabSelected(evt);
@@ -37,7 +38,7 @@ export class TabBarCore {
             this._adapter.initializeScrollObserver(this._scrollListener);
             this._updateScrollState();
         }
-        this._syncTabState();
+        this._tryScrollActiveTabIntoView();
         this._isInitialized = true;
     }
     destroy() {
@@ -46,6 +47,7 @@ export class TabBarCore {
         this._isInitialized = false;
     }
     async _onTabsChanged() {
+        this._tabs = this._adapter.getTabs();
         this._syncTabState();
         if (this._scrollButtons) {
             this._detectScrollableStatus();
@@ -63,25 +65,24 @@ export class TabBarCore {
         }
         evt.preventDefault();
         let index = -1;
-        const tabs = this._adapter.getTabs();
         if (evt.key === 'Home') {
             // Locate the first non-disabled tab
-            index = tabs.findIndex(tab => !tab.disabled);
+            index = this._tabs.findIndex(tab => !tab.disabled);
         }
         else if (evt.key === 'End') {
             // Locate the last non-disabled tab
-            index = tabs.reduceRight((acc, tab, i) => (!tab.disabled && acc === -1 ? i : acc), -1);
+            index = this._tabs.reduceRight((acc, tab, i) => (!tab.disabled && acc === -1 ? i : acc), -1);
         }
         else {
             // Locate the next or previous tab based on the key that was pressed
-            const currentIndex = tabs.findIndex(tab => tab.matches(':focus'));
+            const currentIndex = this._tabs.findIndex(tab => tab.matches(':focus'));
             const isPrevKey = evt.key === 'ArrowLeft' || evt.key === 'ArrowUp';
             const calcIndex = (startIndex) => {
                 index = startIndex + (isPrevKey ? -1 : 1);
-                index = index < 0 ? tabs.length - 1 : index % tabs.length;
+                index = index < 0 ? this._tabs.length - 1 : index % this._tabs.length;
                 // Try to recurse until we find a non-disabled tab (unless all tabs are disabled already)
-                const isAllTabsDisabled = tabs.every(tab => tab.disabled);
-                if (!isAllTabsDisabled && tabs[index]?.disabled) {
+                const isAllTabsDisabled = this._tabs.every(tab => tab.disabled);
+                if (!isAllTabsDisabled && this._tabs[index]?.disabled) {
                     calcIndex(index);
                 }
             };
@@ -91,24 +92,23 @@ export class TabBarCore {
             return;
         }
         if (this._autoActivate) {
-            this._selectTab({ tab: tabs[index], focusTab: true });
+            this._selectTab({ tab: this._tabs[index], focusTab: true });
         }
         else {
-            tabs[index].focus({ preventScroll: true, focusVisible: true });
-            await this._adapter.tryScrollTabIntoView(tabs[index]);
+            this._tabs[index].focus({ preventScroll: true, focusVisible: true });
+            await this._adapter.tryScrollTabIntoView(this._tabs[index]);
         }
     }
     async _selectTab({ tab, emitEvent = true, focusTab = false }) {
         if (!tab || tab.disabled) {
             return;
         }
-        const tabs = this._adapter.getTabs();
-        const currentSelectedTab = tabs.find(t => t.selected);
+        const currentSelectedTab = this._tabs.find(t => t.selected);
         if (currentSelectedTab === tab) {
             return;
         }
         if (emitEvent) {
-            const index = tabs.indexOf(tab);
+            const index = this._tabs.indexOf(tab);
             const event = new CustomEvent(TAB_BAR_CONSTANTS.events.CHANGE, {
                 detail: { index },
                 bubbles: true,
@@ -132,7 +132,7 @@ export class TabBarCore {
         if (currentSelectedTab) {
             currentSelectedTab.selected = false;
         }
-        this._activeTab = tabs.indexOf(tab);
+        this._activeTab = this._tabs.indexOf(tab);
     }
     /**
      * Ensures that all tabs have the correct state based on the tab bar state.
@@ -140,14 +140,13 @@ export class TabBarCore {
      * This is called whenever a child tab is added to the DOM.
      */
     _syncTabState() {
-        const tabs = this._adapter.getTabs();
-        tabs.forEach((tab, index) => {
+        this._tabs.forEach((tab, index) => {
             tab.selected = index === this._activeTab;
-            if (this._disabled) {
+            if (this._disabled)
                 tab.disabled = this._disabled;
-            }
             tab.vertical = this._vertical;
             tab.stacked = this._stacked;
+            tab.secondary = this._secondary;
             tab.inverted = this._inverted;
         });
     }
@@ -200,11 +199,10 @@ export class TabBarCore {
         }
         // We batch the tab scrolling into a single animation frame to unnecessarily scrolling for each tab
         this._tabScrollAnimationFrame = window.requestAnimationFrame(() => {
-            const tabs = this._adapter.getTabs();
             this._tabScrollAnimationFrame = undefined;
             if (this._adapter.isScrollable()) {
-                if (typeof this._activeTab === 'number' && this._activeTab >= 0 && tabs[this._activeTab]) {
-                    this._adapter.tryScrollTabIntoView(tabs[this._activeTab]);
+                if (typeof this._activeTab === 'number' && this._activeTab >= 0 && this._tabs[this._activeTab]) {
+                    this._adapter.tryScrollTabIntoView(this._tabs[this._activeTab]);
                 }
             }
         });
@@ -216,7 +214,7 @@ export class TabBarCore {
         value = Boolean(value);
         if (this._disabled !== value) {
             this._disabled = value;
-            this._adapter.getTabs().forEach(tab => (tab.disabled = this._disabled));
+            this._tabs.forEach(tab => (tab.disabled = this._disabled));
             this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.DISABLED, this._disabled);
         }
     }
@@ -226,14 +224,13 @@ export class TabBarCore {
     set activeTab(value) {
         if (this._activeTab !== value) {
             this._activeTab = value ?? undefined;
-            const tabs = this._adapter.getTabs();
             if (typeof this._activeTab === 'number') {
-                const newSelectedTab = tabs[this._activeTab];
+                const newSelectedTab = this._tabs[this._activeTab];
                 this._selectTab({ tab: newSelectedTab, emitEvent: false, focusTab: false });
                 this._adapter.setHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB, String(this._activeTab));
             }
             else {
-                tabs.forEach(tab => (tab.selected = false));
+                this._tabs.forEach(tab => (tab.selected = false));
                 this._adapter.removeHostAttribute(TAB_BAR_CONSTANTS.attributes.ACTIVE_TAB);
             }
         }
@@ -248,7 +245,7 @@ export class TabBarCore {
             if (this._isInitialized) {
                 this._adapter.setVertical(this._vertical);
             }
-            this._adapter.getTabs().forEach(tab => (tab.vertical = this._vertical));
+            this._tabs.forEach(tab => (tab.vertical = this._vertical));
             if (this._scrollButtonsVisible) {
                 this._adapter.updateScrollButtonIcons(this._vertical);
             }
@@ -272,7 +269,7 @@ export class TabBarCore {
         value = Boolean(value);
         if (this._stacked !== value) {
             this._stacked = value;
-            this._adapter.getTabs().forEach(tab => (tab.stacked = this._stacked));
+            this._tabs.forEach(tab => (tab.stacked = this._stacked));
             this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.STACKED, this._stacked);
         }
     }
@@ -283,7 +280,7 @@ export class TabBarCore {
         value = Boolean(value);
         if (this._secondary !== value) {
             this._secondary = value;
-            this._adapter.getTabs().forEach(tab => (tab.secondary = this._secondary));
+            this._tabs.forEach(tab => (tab.secondary = this._secondary));
             this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.SECONDARY, this._secondary);
         }
     }
@@ -294,7 +291,7 @@ export class TabBarCore {
         value = Boolean(value);
         if (this._inverted !== value) {
             this._inverted = value;
-            this._adapter.getTabs().forEach(tab => (tab.inverted = this._inverted));
+            this._tabs.forEach(tab => (tab.inverted = this._inverted));
             this._adapter.toggleHostAttribute(TAB_BAR_CONSTANTS.attributes.INVERTED, this._inverted);
         }
     }

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

@@ -12,7 +12,7 @@ import { TabComponent } from '../tab/tab';
 import { TabBarAdapter } from './tab-bar-adapter';
 import { TAB_BAR_CONSTANTS } from './tab-bar-constants';
 import { TabBarCore } from './tab-bar-core';
-import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons/standard';
+import { tylIconKeyboardArrowLeft, tylIconKeyboardArrowRight, tylIconKeyboardArrowUp, tylIconKeyboardArrowDown } from '@tylertech/tyler-icons';
 import { WithElementInternals } from '../../core/mixins/internals/with-element-internals';
 import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 import { setDefaultAria } from '../../constants';

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

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
-import { tylIconClear } from '@tylertech/tyler-icons/standard';
+import { tylIconClear } from '@tylertech/tyler-icons';
 import { BASE_FIELD_CONSTANTS, FieldComponent } from '../field';
 import { BaseField } from '../field/base/base-field';
 import { IconRegistry } from '../icon';

package/esm/time-picker/time-picker.js

@@ -5,8 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { customElement, attachShadowTemplate, coreProperty, coerceBoolean, coerceNumber, ensureChild } from '@tylertech/forge-core';
-import { tylIconClockOutline } from '@tylertech/tyler-icons/extended';
-import { tylIconClose } from '@tylertech/tyler-icons/standard';
+import { tylIconClockOutline, tylIconClose } from '@tylertech/tyler-icons';
 import { TimePickerAdapter } from './time-picker-adapter';
 import { TimePickerCore } from './time-picker-core';
 import { TIME_PICKER_CONSTANTS } from './time-picker-constants';

package/esm/toast/toast.js

@@ -5,7 +5,7 @@
  */
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, customElement, coreProperty } from '@tylertech/forge-core';
-import { tylIconClose } from '@tylertech/tyler-icons/standard';
+import { tylIconClose } from '@tylertech/tyler-icons';
 import { ButtonComponent } from '../button';
 import { setDefaultAria } from '../constants';
 import { BaseComponent } from '../core/base/base-component';

package/esm/toolbar/toolbar.js

@@ -8,7 +8,7 @@ import { customElement, attachShadowTemplate, coerceBoolean } from '@tylertech/f
 import { BaseComponent } from '../core/base/base-component';
 import { TOOLBAR_CONSTANTS } from './toolbar-constants';
 const template = '<template><div class=\"forge-toolbar\" part=\"root\"><div class=\"section\" part=\"before-section-start\"><slot name=\"before-start\"></slot></div><div class=\"inner center\" part=\"inner\"><div class=\"section\" part=\"section-start\"><slot name=\"start\"></slot><slot></slot></div><div class=\"section center\" part=\"section-center\"><slot name=\"center\"></slot></div><div class=\"section end\" part=\"section-end\"><slot name=\"end\"></slot></div></div><div class=\"section end\" part=\"after-section-end\"><slot name=\"after-end\"></slot></div></div></template>';
-const styles = ':host{display:block}:host([hidden]){display:none}.forge-toolbar{--_toolbar-background:var(--forge-toolbar-background, var(--forge-theme-surface, #ffffff));--_toolbar-height:var(--forge-toolbar-height, 56px);--_toolbar-min-height:var(--forge-toolbar-min-height, var(--_toolbar-height));--_toolbar-divider-width:var(--forge-toolbar-divider-width, var(--forge-border-thin, 1px));--_toolbar-divider-style:var(--forge-toolbar-divider-style, solid);--_toolbar-divider-color:var(--forge-toolbar-divider-color, var(--forge-theme-outline, #e0e0e0));--_toolbar-shape:var(--forge-toolbar-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, var(--_toolbar-shape));--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, var(--_toolbar-shape));--_toolbar-end-start-shape:var(--forge-toolbar-end-start-shape, 0);--_toolbar-end-end-shape:var(--forge-toolbar-end-end-shape, 0);--_toolbar-padding:var(--forge-toolbar-padding, var(--forge-spacing-medium, 16px));--_toolbar-padding-block:var(--forge-toolbar-padding-block, 0);--_toolbar-padding-inline:var(--forge-toolbar-padding-inline, var(--_toolbar-padding));--_toolbar-columns:var(--forge-toolbar-columns, auto 1fr auto)}.forge-toolbar{display:grid;grid-template-columns:var(--_toolbar-columns);height:var(--_toolbar-height);min-height:var(--_toolbar-min-height);box-sizing:border-box;padding-inline:0;border-block-end-width:var(--_toolbar-divider-width);border-block-end-style:var(--_toolbar-divider-style);border-block-end-color:var(--_toolbar-divider-color);border-start-start-radius:var(--_toolbar-start-start-shape);border-start-end-radius:var(--_toolbar-start-end-shape);border-end-start-radius:var(--_toolbar-end-start-shape);border-end-end-radius:var(--_toolbar-end-end-shape);background:var(--_toolbar-background)}.inner{display:grid;grid-template-columns:var(--_toolbar-columns);padding-inline:var(--_toolbar-padding-inline);padding-block:var(--_toolbar-padding-block);box-sizing:border-box}.section{display:flex;align-items:center;width:100%;box-sizing:border-box}.section.center{justify-content:center}.section.end{justify-content:end}:host([inverted]) .forge-toolbar{--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, 0);--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, 0);--_toolbar-end-start-shape:var(--_toolbar-shape);--_toolbar-end-end-shape:var(--_toolbar-shape);border-block-end:none;border-block-start-width:var(--_toolbar-divider-width);border-block-start-style:var(--_toolbar-divider-style);border-block-start-color:var(--_toolbar-divider-color)}:host(:is([no-divider],[no-border])) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{--_toolbar-padding:var(--forge-toolbar-padding, 0)}:host([auto-height]) .forge-toolbar{--_toolbar-height:var(--forge-toolbar-height, auto)}::slotted(:is(h1,h2,h3,h4,h5,h6,p)){margin:0}';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-toolbar{--_toolbar-background:var(--forge-toolbar-background, var(--forge-theme-surface, #ffffff));--_toolbar-height:var(--forge-toolbar-height, 56px);--_toolbar-min-height:var(--forge-toolbar-min-height, var(--_toolbar-height));--_toolbar-divider-width:var(--forge-toolbar-divider-width, var(--forge-border-thin, 1px));--_toolbar-divider-style:var(--forge-toolbar-divider-style, solid);--_toolbar-divider-color:var(--forge-toolbar-divider-color, var(--forge-theme-outline, #e0e0e0));--_toolbar-shape:var(--forge-toolbar-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, var(--_toolbar-shape));--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, var(--_toolbar-shape));--_toolbar-end-start-shape:var(--forge-toolbar-end-start-shape, 0);--_toolbar-end-end-shape:var(--forge-toolbar-end-end-shape, 0);--_toolbar-padding:var(--forge-toolbar-padding, var(--forge-spacing-medium, 16px));--_toolbar-padding-block:var(--forge-toolbar-padding-block, 0);--_toolbar-padding-inline:var(--forge-toolbar-padding-inline, var(--_toolbar-padding));--_toolbar-columns:var(--forge-toolbar-columns, auto 1fr auto)}.forge-toolbar{display:grid;grid-template-columns:var(--_toolbar-columns);height:var(--_toolbar-height);min-height:var(--_toolbar-min-height);box-sizing:border-box;padding-inline:0;border-block-end-width:var(--_toolbar-divider-width);border-block-end-style:var(--_toolbar-divider-style);border-block-end-color:var(--_toolbar-divider-color);border-start-start-radius:var(--_toolbar-start-start-shape);border-start-end-radius:var(--_toolbar-start-end-shape);border-end-start-radius:var(--_toolbar-end-start-shape);border-end-end-radius:var(--_toolbar-end-end-shape);background:var(--_toolbar-background)}.inner{display:grid;grid-template-columns:var(--_toolbar-columns);padding-inline:var(--_toolbar-padding-inline);padding-block:var(--_toolbar-padding-block);box-sizing:border-box}.inner.center{min-width:0}.section{display:flex;align-items:center;width:100%;box-sizing:border-box}.section.center{justify-content:center;min-width:0}.section.end{justify-content:end}:host([inverted]) .forge-toolbar{--_toolbar-start-start-shape:var(--forge-toolbar-start-start-shape, 0);--_toolbar-start-end-shape:var(--forge-toolbar-start-end-shape, 0);--_toolbar-end-start-shape:var(--_toolbar-shape);--_toolbar-end-end-shape:var(--_toolbar-shape);border-block-end:none;border-block-start-width:var(--_toolbar-divider-width);border-block-start-style:var(--_toolbar-divider-style);border-block-start-color:var(--_toolbar-divider-color)}:host(:is([no-divider],[no-border])) .forge-toolbar{border:none}:host([no-padding]) .forge-toolbar{--_toolbar-padding:var(--forge-toolbar-padding, 0)}:host([auto-height]) .forge-toolbar{--_toolbar-height:var(--forge-toolbar-height, auto)}::slotted(:is(h1,h2,h3,h4,h5,h6,p)){margin:0}';
 /**
  * @tag forge-toolbar
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.8.2-dev.0",
+  "version": "3.9.0-dev.1",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "@tylertech/forge-core": "^3.1.0",
-    "@tylertech/tyler-icons": "^1.12.0",
+    "@tylertech/tyler-icons": "^2.0.1",
     "imask": "^7.6.1",
     "lit": "^3.2.1",
     "tslib": "^2.8.1"

package/sass/data-table/_core.scss

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/typography';
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+// Common mixins for data-table components
+@mixin host() {
+  display: block;
+}
+
+// Base data-table styles
+@mixin base-table() {
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+// Base column styles
+@mixin base-column() {
+  display: table-column;
+}
+
+// Base cell styles
+@mixin base-cell() {
+  display: table-cell;
+  padding: 0.5rem;
+}
+
+// Base row styles
+@mixin base-row() {
+  display: table-row;
+}
+
+// Base header styles
+@mixin base-head() {
+  display: table-header-group;
+}
+
+// Base body styles
+@mixin base-body() {
+  display: table-row-group;
+}
+
+// Base footer styles
+@mixin base-footer() {
+  display: table-footer-group;
+}

package/sass/data-table/_token-utils.scss

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core/styles/tokens';
+
+// Add your data-table token variables here
+@mixin tokens {
+  // Common tokens
+}
+
+@function token($name) {
+  @return var(--forge-data-table-#{$name});
+}

package/sass/data-table/body/body.scss

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-data-table-body {
+  @include tokens;
+  @include base-body;
+}

package/sass/data-table/cell/cell.scss

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-data-table-cell {
+  @include tokens;
+  @include base-cell;
+}

package/sass/data-table/column/column.scss

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-data-table-column {
+  @include tokens;
+  @include base-column;
+}

package/sass/data-table/footer/footer.scss

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-data-table-footer {
+  @include tokens;
+  @include base-footer;
+}

package/sass/data-table/head/head.scss

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-data-table-head {
+  @include tokens;
+  @include base-head;
+}

package/sass/data-table/index.scss

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@forward './table/table';
+@forward './column/column';
+@forward './cell/cell';
+@forward './row/row';
+@forward './head/head';
+@forward './body/body';
+@forward './footer/footer';

package/sass/data-table/row/row.scss

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core' as *;
+
+//
+// Host
+//
+
+:host {
+  @include host;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+//
+// Base
+//
+
+.forge-data-table-row {
+  @include tokens;
+  @include base-row;
+}

package/sass/data-table/table/table.scss

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+@use '../core' as *;
+
+:host {
+  @include host;
+  @include tokens;
+  @include base-table;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/sass/toolbar/_core.scss

@@ -44,6 +44,10 @@
   box-sizing: border-box;
 }
 
+@mixin inner-center {
+  min-width: 0;
+}
+
 @mixin section {
   display: flex;
   align-items: center;
@@ -53,6 +57,7 @@
 
 @mixin center {
   justify-content: center;
+  min-width: 0;
 }
 
 @mixin end {

package/sass/toolbar/toolbar.scss

@@ -31,6 +31,10 @@
 
 .inner {
   @include inner;
+
+  &.center {
+    @include inner-center;
+  }
 }
 
 .section {