@tylertech/forge 3.8.1 → 3.9.0-dev.0

package/esm/date-range-picker/date-range-picker-core.js

@@ -65,7 +65,8 @@ export class DateRangePickerCore extends BaseDatePickerCore {
     _emitChangeEvent(value, force) {
         const typedStartValue = this._getTypedValue((value && value.from) || null);
         const typedEndValue = this._getTypedValue((value && value.to) || null);
-        const detail = new DatePickerRange({ from: typedStartValue, to: typedEndValue });
+        const rangeName = (value && value.rangeName) || null;
+        const detail = new DatePickerRange({ from: typedStartValue, to: typedEndValue, rangeName });
         const wasCancelled = !this._adapter.emitHostEvent(DATE_RANGE_PICKER_CONSTANTS.events.CHANGE, detail, true, !force);
         if (!wasCancelled) {
             this._setValue(this._coerceDateValue((value && value.from) || null));
@@ -81,9 +82,14 @@ export class DateRangePickerCore extends BaseDatePickerCore {
         this._adapter.emitHostEvent(DATE_RANGE_PICKER_CONSTANTS.events.CLOSE, undefined, false);
     }
     _onToday() {
+        this._onClear();
         const today = new Date();
+        const todayFrom = new Date();
+        todayFrom.setHours(0, 0, 0, 0);
         this._tryMergeCurrentTime({ from: today });
-        const range = this._open ? new DateRange({ from: this._from || today, to: this._to || undefined }) : new DateRange({ from: today });
+        const range = this._open
+            ? new DateRange({ from: this._from || todayFrom, to: this._to || today, rangeName: 'today' })
+            : new DateRange({ from: todayFrom, to: today, rangeName: 'today' });
         if (!this._isDateRangeAcceptable(range)) {
             return;
         }
@@ -91,6 +97,60 @@ export class DateRangePickerCore extends BaseDatePickerCore {
         this._onDateSelected({ date: today, range, selected: true, type: 'date' });
         this._adapter.setCalendarActiveDate(today);
     }
+    _onYesterday() {
+        this._onClear();
+        const today = new Date();
+        const yesterdayFrom = new Date(today.setDate(today.getDate() - 1));
+        yesterdayFrom.setHours(0, 0, 0, 0);
+        const yesterdayTo = new Date(yesterdayFrom);
+        yesterdayTo.setHours(23, 59, 59, 0);
+        this._tryMergeCurrentTime({ from: yesterdayFrom, to: yesterdayTo });
+        const range = this._open
+            ? new DateRange({ from: this._from || yesterdayFrom, to: this._to || yesterdayTo, rangeName: 'yesterday' })
+            : new DateRange({ from: yesterdayFrom, to: yesterdayTo, rangeName: 'yesterday' });
+        if (!this._isDateRangeAcceptable(range)) {
+            return;
+        }
+        this.value = range;
+        this._onDateSelected({ date: yesterdayFrom, range, selected: true, type: 'date' });
+        this._adapter.setCalendarActiveDate(yesterdayFrom);
+    }
+    _onLastSevenDays() {
+        this._onClear();
+        const today = new Date();
+        const lastSevenDaysFrom = new Date(today.setDate(today.getDate() - 7));
+        lastSevenDaysFrom.setHours(0, 0, 0, 0);
+        const lastSevenDaysTo = new Date();
+        lastSevenDaysTo.setHours(23, 59, 59, 0);
+        this._tryMergeCurrentTime({ from: lastSevenDaysFrom, to: lastSevenDaysTo });
+        const range = this._open
+            ? new DateRange({ from: this._from || lastSevenDaysFrom, to: this._to || lastSevenDaysTo, rangeName: 'last 7 days' })
+            : new DateRange({ from: lastSevenDaysFrom, to: lastSevenDaysTo, rangeName: 'last 7 days' });
+        if (!this._isDateRangeAcceptable(range)) {
+            return;
+        }
+        this.value = range;
+        this._onDateSelected({ date: lastSevenDaysFrom, range, selected: true, rangeSelectionState: 'from', type: 'date' });
+        this._onDateSelected({ date: lastSevenDaysTo, range, selected: true, rangeSelectionState: 'to', type: 'date' });
+    }
+    _onLastThirtyDays() {
+        this._onClear();
+        const today = new Date();
+        const lastThirtyDaysFrom = new Date(today.setDate(today.getDate() - 30));
+        lastThirtyDaysFrom.setHours(0, 0, 0, 0);
+        const lastThirtyDaysTo = new Date();
+        lastThirtyDaysTo.setHours(23, 59, 59, 0);
+        this._tryMergeCurrentTime({ from: lastThirtyDaysFrom, to: lastThirtyDaysTo });
+        const range = this._open
+            ? new DateRange({ from: this._from || lastThirtyDaysFrom, to: this._to || lastThirtyDaysTo, rangeName: 'last 30 days' })
+            : new DateRange({ from: lastThirtyDaysFrom, to: lastThirtyDaysTo, rangeName: 'last 30 days' });
+        if (!this._isDateRangeAcceptable(range)) {
+            return;
+        }
+        this.value = range;
+        this._onDateSelected({ date: lastThirtyDaysFrom, range, selected: true, rangeSelectionState: 'from', type: 'date' });
+        this._onDateSelected({ date: lastThirtyDaysTo, range, selected: true, rangeSelectionState: 'to', type: 'date' });
+    }
     _onClear() {
         this._onDateSelected({ date: null, range: new DateRange(), selected: false, type: 'date' });
         this._closeCalendar(true);

package/esm/date-range-picker/date-range-picker.d.ts

@@ -44,6 +44,9 @@ declare global {
  * @property {boolean} [notifyInputValueChanges=false] - Gets/sets the state of whether to notify input value changes.
  * @property {boolean} [allowInvalidDate=false] - Gets/sets the state of whether to allow invalid dates.
  * @property {boolean} [showToday=true] - Gets/sets the state of whether to show the "Today" button.
+ * @property {boolean} [showYesterday=true] - Gets/sets the state of whether to show the "Yesterday" button.
+ * @property {boolean} [showLastSevenDays=true] Gets/sets the state of whether to show the "Last 7 days" button.
+ * @property {boolean} [showLastThirtyDays=true] Gets/sets the state of whether to show the "Last 30 days" button.
  * @property {boolean} [showClear=true] - Gets/sets the state of whether to show the "Clear" button.
  * @property {DayOfWeek[]} [disabledDaysOfWeek=[]] - Gets/sets the disabled days of the week.
  * @property {string} [yearRange=''] - Gets/sets the year range for the date range picker.

package/esm/date-range-picker/date-range-picker.js

@@ -40,6 +40,9 @@ const styles = ':host{display:block}:host([hidden]){display:none}';
  * @property {boolean} [notifyInputValueChanges=false] - Gets/sets the state of whether to notify input value changes.
  * @property {boolean} [allowInvalidDate=false] - Gets/sets the state of whether to allow invalid dates.
  * @property {boolean} [showToday=true] - Gets/sets the state of whether to show the "Today" button.
+ * @property {boolean} [showYesterday=true] - Gets/sets the state of whether to show the "Yesterday" button.
+ * @property {boolean} [showLastSevenDays=true] Gets/sets the state of whether to show the "Last 7 days" button.
+ * @property {boolean} [showLastThirtyDays=true] Gets/sets the state of whether to show the "Last 30 days" button.
  * @property {boolean} [showClear=true] - Gets/sets the state of whether to show the "Clear" button.
  * @property {DayOfWeek[]} [disabledDaysOfWeek=[]] - Gets/sets the disabled days of the week.
  * @property {string} [yearRange=''] - Gets/sets the year range for the date range picker.

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

@@ -13,7 +13,7 @@ import { SplitViewPanelCore } from './split-view-panel-core';
 import { SplitViewPanelAdapter } from './split-view-panel-adapter';
 import { IconComponent, IconRegistry } from '../../icon';
 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:ujev5to;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujev5to{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:ujev5ul;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujev5ul{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:ujev5vf;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 ujev5vf{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:ujev5w9;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 ujev5w9{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:ujev5ww;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujev5ww{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:ujev5xv;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes ujev5xv{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:ujev5yq;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 ujev5yq{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:ujev5z5;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 ujev5z5{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:uaukume;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uaukume{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:uaukumo;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uaukumo{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:uaukung;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 uaukung{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:uaukunu;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 uaukunu{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:uaukuod;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uaukuod{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:uaukup9;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uaukup9{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:uaukupi;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 uaukupi{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:uaukupq;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 uaukupq{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}';
 import { StateLayerComponent } from '../../state-layer';
 import { FocusIndicatorComponent } from '../../focus-indicator';
 /**

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.1",
+  "version": "3.9.0-dev.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -21,4 +21,4 @@
     "tslib": "^2.8.1"
   },
   "customElements": "custom-elements.json"
-}
+}

package/sass/calendar/_mixins.scss

@@ -195,8 +195,9 @@
 
 @mixin footer() {
   padding: var(--forge-calendar-controls-padding, 0);
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+  grid-auto-flow: row;
   justify-content: space-between;
 }
 

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 {