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

package/esm/date-picker/base/base-date-picker-constants.d.ts

@@ -48,6 +48,9 @@ export declare const BASE_DATE_PICKER_CONSTANTS: {
         VALUE_MODE: string;
         ALLOW_INVALID_DATE: string;
         SHOW_TODAY: string;
+        SHOW_YESTERDAY: string;
+        SHOW_LAST_SEVEN_DAYS: string;
+        SHOW_LAST_THIRTY_DAYS: string;
         SHOW_CLEAR: string;
         DISABLED_DAYS_OF_WEEK: string;
         YEAR_RANGE: string;

package/esm/date-picker/base/base-date-picker-constants.js

@@ -15,6 +15,9 @@ const observedAttributes = {
     VALUE_MODE: 'value-mode',
     ALLOW_INVALID_DATE: 'allow-invalid-date',
     SHOW_TODAY: 'show-today',
+    SHOW_YESTERDAY: 'show-yesterday',
+    SHOW_LAST_SEVEN_DAYS: 'show-last-seven-days',
+    SHOW_LAST_THIRTY_DAYS: 'show-last-thirty-days',
     SHOW_CLEAR: 'show-clear',
     DISABLED_DAYS_OF_WEEK: 'disabled-days-of-week',
     YEAR_RANGE: 'year-range',

package/esm/date-picker/base/base-date-picker-core.d.ts

@@ -49,6 +49,9 @@ export declare abstract class BaseDatePickerCore<TAdapter extends IBaseDatePicke
     protected _notifyInputValueChanges: boolean;
     protected _allowInvalidDate: boolean;
     protected _showToday: boolean;
+    protected _showYesterday: boolean;
+    protected _showLastSevenDays: boolean;
+    protected _showLastThirtyDays: boolean;
     protected _showClear: boolean;
     protected _disabledDaysOfWeek: DayOfWeek[];
     protected _yearRange: string;
@@ -64,6 +67,9 @@ export declare abstract class BaseDatePickerCore<TAdapter extends IBaseDatePicke
     private _dropdownCloseListener;
     private _activeChangeListener;
     private _todayListener;
+    private _yesterdayListener;
+    private _lastSevenDaysListener;
+    private _lastThirtyDaysListener;
     private _clearListener;
     private _dateSelectListener;
     private _monthChangeListener;
@@ -74,6 +80,9 @@ export declare abstract class BaseDatePickerCore<TAdapter extends IBaseDatePicke
     protected abstract _emitOpenEvent(): void;
     protected abstract _emitCloseEvent(): void;
     protected abstract _onToday(): void;
+    protected abstract _onYesterday(): void;
+    protected abstract _onLastSevenDays(): void;
+    protected abstract _onLastThirtyDays(): void;
     protected abstract _onClear(): void;
     protected abstract _getCurrentValue(): TPrivateValue | null | undefined;
     protected abstract _setFormattedInputValue(suppressValueChanges?: boolean): void;
@@ -149,6 +158,12 @@ export declare abstract class BaseDatePickerCore<TAdapter extends IBaseDatePicke
     set prepareMaskCallback(cb: DatePickerPrepareMaskCallback);
     get showToday(): boolean;
     set showToday(value: boolean);
+    get showYesterday(): boolean;
+    set showYesterday(value: boolean);
+    get showLastSevenDays(): boolean;
+    set showLastSevenDays(value: boolean);
+    get showLastThirtyDays(): boolean;
+    set showLastThirtyDays(value: boolean);
     get showClear(): boolean;
     set showClear(value: boolean);
     get yearRange(): string;

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

@@ -24,6 +24,9 @@ export class BaseDatePickerCore {
         this._notifyInputValueChanges = true;
         this._allowInvalidDate = false;
         this._showToday = false;
+        this._showYesterday = false;
+        this._showLastSevenDays = false;
+        this._showLastThirtyDays = false;
         this._showClear = false;
         this._yearRange = '-50:+50';
         this._calendarText = {};
@@ -39,6 +42,9 @@ export class BaseDatePickerCore {
         this._monthChangeListener = evt => this._onMonthChanged(evt);
         this._activeChangeListener = id => this._onActiveDescendantChanged(id);
         this._todayListener = () => this._onToday();
+        this._yesterdayListener = () => this._onYesterday();
+        this._lastSevenDaysListener = () => this._onLastSevenDays();
+        this._lastThirtyDaysListener = () => this._onLastThirtyDays();
         this._clearListener = () => this._onClear();
     }
     initialize() {
@@ -118,8 +124,14 @@ export class BaseDatePickerCore {
             disabledDates: this._disabledDates,
             yearRange: this._yearRange,
             todayButton: this._showToday,
+            yesterdayButton: this._showYesterday,
+            lastSevenDaysButton: this._showLastSevenDays,
+            lastThirtyDaysButton: this._showLastThirtyDays,
             clearButton: this._showClear,
             todayCallback: this._todayListener,
+            yesterdayCallback: this._yesterdayListener,
+            lastSevenDaysCallback: this._lastSevenDaysListener,
+            lastThirtyDaysCallback: this._lastThirtyDaysListener,
             clearCallback: this._clearListener,
             disabledDateBuilder: this._disableDayCallback,
             disabledDaysOfWeek: this._disabledDaysOfWeek,
@@ -607,6 +619,24 @@ export class BaseDatePickerCore {
     set showToday(value) {
         this._showToday = value;
     }
+    get showYesterday() {
+        return this._showYesterday;
+    }
+    set showYesterday(value) {
+        this._showYesterday = value;
+    }
+    get showLastSevenDays() {
+        return this._showLastSevenDays;
+    }
+    set showLastSevenDays(value) {
+        this._showLastSevenDays = value;
+    }
+    get showLastThirtyDays() {
+        return this._showLastThirtyDays;
+    }
+    set showLastThirtyDays(value) {
+        this._showLastThirtyDays = value;
+    }
     get showClear() {
         return this._showClear;
     }

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

@@ -27,6 +27,9 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
     notifyInputValueChanges: boolean;
     allowInvalidDate: boolean;
     showToday: boolean;
+    showYesterday: boolean;
+    showLastSevenDays: boolean;
+    showLastThirtyDays: boolean;
     showClear: boolean;
     disabledDaysOfWeek: DayOfWeek[];
     yearRange: string;
@@ -54,6 +57,9 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
  * @property {boolean} [showClear=false] - Whether the clear button is visible in the popup.
  * @property {boolean} [showMaskFormat=false] - Whether the mask format is displayed in the input or not. Only applies if `masked` is `true`.
  * @property {boolean} [showToday=false] - Whether the today button is visible in the popup.
+ * @property {boolean} [showYesterday=false] - Whether the yesterday button is visible in the popup.
+ * @property {boolean} [showLastSevenDays=false] - Whether the last seven days button is visible in the popup.
+ * @property {boolean} [showLastThirtyDays=false] - Whether the last thirty days button is visible in the popup.
  * @property {TValue} value - The value of the date picker.
  * @property {DatePickerValueMode} valueMode - The type for the `value` property and `forge-date-picker-change` event.
  * @property {string} yearRange - The year range.
@@ -72,6 +78,9 @@ export interface IBaseDatePickerComponent<TValue> extends IBaseComponent {
  * @attribute {boolean} [show-clear=false] - Whether the clear button is visible in the popup.
  * @attribute {boolean} [show-mask-format=false] - Whether the mask format is displayed in the input or not. Only applies if `masked` is `true`.
  * @attribute {boolean} [show-today=false] - Whether the today button is visible in the popup.
+ * @attribute {boolean} [show-yesterday=false] - Whether the yesterday button is visible in the popup.
+ * @attribute {boolean} [show-last-seven-days=false] - Whether the last seven days button is visible in the popup.
+ * @attribute {boolean} [show-last-thirty-days=false] - Whether the last thirty days button is visible in the popup.
  * @attribute {DatePickerValueMode} [value-mode=string] - The type for the `value` property and `forge-date-picker-change` event.
  * @attribute {string} [year-range] - The year range.
  */
@@ -95,6 +104,9 @@ export declare abstract class BaseDatePickerComponent<TPublicValue, TPrivateValu
     notifyInputValueChanges: boolean;
     allowInvalidDate: boolean;
     showToday: boolean;
+    showYesterday: boolean;
+    showLastSevenDays: boolean;
+    showLastThirtyDays: boolean;
     showClear: boolean;
     parseCallback: DatePickerParseCallback;
     formatCallback: DatePickerFormatCallback;

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

@@ -28,6 +28,9 @@ import { BASE_DATE_PICKER_CONSTANTS } from './base-date-picker-constants';
  * @property {boolean} [showClear=false] - Whether the clear button is visible in the popup.
  * @property {boolean} [showMaskFormat=false] - Whether the mask format is displayed in the input or not. Only applies if `masked` is `true`.
  * @property {boolean} [showToday=false] - Whether the today button is visible in the popup.
+ * @property {boolean} [showYesterday=false] - Whether the yesterday button is visible in the popup.
+ * @property {boolean} [showLastSevenDays=false] - Whether the last seven days button is visible in the popup.
+ * @property {boolean} [showLastThirtyDays=false] - Whether the last thirty days button is visible in the popup.
  * @property {TValue} value - The value of the date picker.
  * @property {DatePickerValueMode} valueMode - The type for the `value` property and `forge-date-picker-change` event.
  * @property {string} yearRange - The year range.
@@ -46,6 +49,9 @@ import { BASE_DATE_PICKER_CONSTANTS } from './base-date-picker-constants';
  * @attribute {boolean} [show-clear=false] - Whether the clear button is visible in the popup.
  * @attribute {boolean} [show-mask-format=false] - Whether the mask format is displayed in the input or not. Only applies if `masked` is `true`.
  * @attribute {boolean} [show-today=false] - Whether the today button is visible in the popup.
+ * @attribute {boolean} [show-yesterday=false] - Whether the yesterday button is visible in the popup.
+ * @attribute {boolean} [show-last-seven-days=false] - Whether the last seven days button is visible in the popup.
+ * @attribute {boolean} [show-last-thirty-days=false] - Whether the last thirty days button is visible in the popup.
  * @attribute {DatePickerValueMode} [value-mode=string] - The type for the `value` property and `forge-date-picker-change` event.
  * @attribute {string} [year-range] - The year range.
  */
@@ -101,6 +107,15 @@ export class BaseDatePickerComponent extends BaseComponent {
             case BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_TODAY:
                 this.showToday = coerceBoolean(newValue);
                 break;
+            case BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_YESTERDAY:
+                this.showYesterday = coerceBoolean(newValue);
+                break;
+            case BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_LAST_SEVEN_DAYS:
+                this.showLastSevenDays = coerceBoolean(newValue);
+                break;
+            case BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_LAST_THIRTY_DAYS:
+                this.showLastThirtyDays = coerceBoolean(newValue);
+                break;
             case BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_CLEAR:
                 this.showClear = coerceBoolean(newValue);
                 break;
@@ -161,6 +176,15 @@ __decorate([
 __decorate([
     coreProperty()
 ], BaseDatePickerComponent.prototype, "showToday", void 0);
+__decorate([
+    coreProperty()
+], BaseDatePickerComponent.prototype, "showYesterday", void 0);
+__decorate([
+    coreProperty()
+], BaseDatePickerComponent.prototype, "showLastSevenDays", void 0);
+__decorate([
+    coreProperty()
+], BaseDatePickerComponent.prototype, "showLastThirtyDays", void 0);
 __decorate([
     coreProperty()
 ], BaseDatePickerComponent.prototype, "showClear", void 0);

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

@@ -16,6 +16,9 @@ export declare class DatePickerCore extends BaseDatePickerCore<IDatePickerAdapte
     protected _emitOpenEvent(): void;
     protected _emitCloseEvent(): void;
     protected _onToday(): void;
+    protected _onYesterday(): void;
+    protected _onLastSevenDays(): void;
+    protected _onLastThirtyDays(): void;
     protected _onClear(): void;
     protected _getCurrentValue(): Date | null | undefined;
     protected _setFormattedInputValue(suppressValueChanges?: boolean): void;

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

@@ -37,6 +37,26 @@ export class DatePickerCore extends BaseDatePickerCore {
         this._tryMergeCurrentTime(today);
         this._onDateSelected({ date: today, selected: true, type: 'date' });
     }
+    _onYesterday() {
+        const today = new Date();
+        const yesterday = new Date(today.setDate(today.getDate() - 1));
+        this._tryMergeCurrentTime(yesterday);
+        this._onDateSelected({ date: yesterday, selected: true, type: 'date' });
+    }
+    _onLastSevenDays() {
+        // not a range, so setting the day to 7 days ago
+        const today = new Date();
+        const sevenDaysAgo = new Date(today.setDate(today.getDate() - 7));
+        this._tryMergeCurrentTime(sevenDaysAgo);
+        this._onDateSelected({ date: sevenDaysAgo, selected: true, type: 'date' });
+    }
+    _onLastThirtyDays() {
+        // not a range, so setting the day to 30 days ago
+        const today = new Date();
+        const thirtyDaysAgo = new Date(today.setDate(today.getDate() - 7));
+        this._tryMergeCurrentTime(thirtyDaysAgo);
+        this._onDateSelected({ date: thirtyDaysAgo, selected: true, type: 'date' });
+    }
     _onClear() {
         this._onDateSelected({ date: null, selected: false, type: 'date' });
     }

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

@@ -6,12 +6,14 @@
 export declare class DatePickerRange implements IDatePickerRange {
     from?: Date | string | null;
     to?: Date | string | null;
+    rangeName?: string | null | undefined;
     constructor(range?: IDatePickerRange);
     copy(): DatePickerRange;
 }
 export interface IDatePickerRange {
     from?: Date | string | null;
     to?: Date | string | null;
+    rangeName?: string | null | undefined;
 }
 export declare const DATE_RANGE_PICKER_CONSTANTS: {
     elementName: "forge-date-range-picker";
@@ -31,4 +33,5 @@ export declare const DATE_RANGE_PICKER_CONSTANTS: {
     };
 };
 export interface IDateRangePickerChangeEventData extends DatePickerRange {
+    rangeName?: string | null | undefined;
 }

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

@@ -10,6 +10,7 @@ export class DatePickerRange {
         if (range) {
             this.from = range.from;
             this.to = range.to;
+            this.rangeName = range.rangeName;
         }
     }
     copy() {

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

@@ -32,6 +32,9 @@ export declare class DateRangePickerCore extends BaseDatePickerCore<IDateRangePi
     protected _emitOpenEvent(): void;
     protected _emitCloseEvent(): void;
     protected _onToday(): void;
+    protected _onYesterday(): void;
+    protected _onLastSevenDays(): void;
+    protected _onLastThirtyDays(): void;
     protected _onClear(): void;
     protected _getCurrentValue(): IDatePickerRange | null | undefined;
     private _applyToMask;

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:uez234f;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez234f{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:uez234v;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez234v{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:uez235n;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 uez235n{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:uez236i;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 uez236i{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:uez236l;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez236l{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:uez237k;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uez237k{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:uez237p;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 uez237p{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:uez2389;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 uez2389{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/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);
         }
     }