@tylertech/forge 3.8.0-dev.3 → 3.8.0

package/esm/select/select/select.d.ts

@@ -14,7 +14,8 @@ import { FieldDensity, FieldLabelPosition } from '../../field';
 import { IWithBaseField } from '../../field/base/with-base-field';
 import { BaseSelectComponent, IBaseSelectComponent } from '../core';
 import { SelectCore } from './select-core';
-export interface ISelectComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria, IWithBaseField, IBaseSelectComponent {
+import { IListDropdownAware } from '../../list-dropdown/list-dropdown-aware';
+export interface ISelectComponent extends IWithFormAssociation, IWithFocusable, IWithLabelAwareness, IWithElementInternals, IWithDefaultAria, IWithBaseField, IBaseSelectComponent, IListDropdownAware {
     label: string;
     placeholder: string;
     setFormValue(value: FormValue | null, state?: FormValue | null | undefined): void;
@@ -63,6 +64,20 @@ declare const SelectComponent_base: import("../../constants").AbstractConstructo
  * @property {SelectOptionBuilder} optionBuilder - Gets/sets the option builder function.
  * @property {SelectSelectedTextBuilder} selectedTextBuilder - Gets/sets the selected text builder function.
  * @property {SelectBeforeValueChangeCallback<any>} beforeValueChange - Gets/sets the before value change callback.
+ * @property {string | string[]; - } popupClasses - Gets/sets the list of classes to apply to the popup element.
+ * @property {ListDropdownHeaderBuilder} popupHeaderBuilder - Gets/sets the callback function for generating header content within the popup.
+ * @property {ListDropdownFooterBuilder} popupFooterBuilder - Gets/sets the callback function for generating header content within the popup.
+ * @property {boolean} [syncPopupWidth=false] - Gets/sets whether the popup width is synchronized with the popup target width.
+ * @property {number} optionLimit - Gets/sets the maximum number of options to display in the dropdown.
+ * @property {boolean} [observeScroll=false] - Controls the observation of scroll events on the dropdown.
+ * @property {number} [observeScrollThreshold=0] - The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true.
+ * @property {boolean} [constrainPopupWidth=true] - Gets/sets whether the popup width will be constrained to a max width of the viewport width (default: `100vw`).
+ * @property {boolean} [wrapOptionText=false] - Gets/sets whether the options will wrap their text or not. This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.
+ * @property {OverlayPlacement} [popoverPlacement="bottom"] - Gets/sets the placement of the popover.
+ * @property {IOverlayOffset} popoverOffset - Gets/sets the offset of the popover.
+ * @property {OverlayFlipState} [popoverFlip="auto"] - Gets/sets the flip state of the popover.
+ * @property {OverlayShiftState} [popoverShift="auto"] - Gets/sets whether the popover should shift to fit within the viewport.
+ * @property {PositionPlacement | null} popoverFallbackPlacements - Gets/sets the fallback placements of the popover.
  *
  * @attribute {string} label - Controls the label text.
  * @attribute {string} placeholder - Controls the placeholder text.
@@ -70,6 +85,15 @@ declare const SelectComponent_base: import("../../constants").AbstractConstructo
  * @attribute {number | number[]} selected-index - Gets/sets the selected index.
  * @attribute {boolean} multiple - Gets/sets the multiple select state.
  * @attribute {boolean} open - Gets/sets the open state.
+ * @attribute {boolean} [sync-popup-width=false] - Gets/sets whether the popup width is synchronized with the popup target width.
+ * @attribute {number} option-limit - Gets/sets the maximum number of options to display in the dropdown.
+ * @attribute {boolean} [observe-scroll=false] - Controls the observation of scroll events on the dropdown.
+ * @attribute {number} [observe-scroll-threshold=0] - The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true.
+ * @attribute {boolean} [wrap-option-text=false] - Gets/sets whether the options will wrap their text or not. This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.
+ * @attribute {OverlayPlacement} [popover-placement="bottom"] - Gets/sets the placement of the popover.
+ * @attribute {IOverlayOffset} popover-offset - Gets/sets the offset of the popover.
+ * @attribute {OverlayFlipState} [popover-flip="auto"] - Gets/sets the flip state of the popover.
+ * @attribute {OverlayShiftState} [popover-shift="auto"] - Gets/sets whether the popover should shift to fit within the viewport.
  *
  * @cssproperty --forge-select-placeholder-color - The color of the placeholder text.
  * @cssproperty --forge-field-background - The background of the field surface.

package/esm/select/select/select.js

@@ -27,7 +27,8 @@ import { OptionGroupComponent } from '../option-group';
 import { SelectAdapter } from './select-adapter';
 import { SELECT_CONSTANTS } from './select-constants';
 import { SelectCore } from './select-core';
-const template = '<template><forge-field id=\"field\" popover-icon focus-indicator-allow-focus focus-indicator-focus-mode=\"focus\"><label id=\"select-label\" aria-hidden=\"true\" part=\"label\" slot=\"label\"></label><slot slot=\"start\" name=\"start\"></slot><div data-forge-field-input class=\"selected-text-container\" part=\"text-container\" aria-live=\"assertive\" aria-atomic=\"true\"><slot name=\"value\"><span id=\"selected-text\" class=\"selected-text\" part=\"text\"></span></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
+import { ListDropdownAware } from '../../list-dropdown/list-dropdown-aware';
+const template = '<template><forge-field id=\"field\" popover-icon focus-indicator-allow-focus focus-indicator-focus-mode=\"focus\"><span id=\"select-label\" slot=\"label\"></span><slot slot=\"start\" name=\"start\"></slot><div data-forge-field-input class=\"selected-text-container\" part=\"text-container\" aria-live=\"assertive\" aria-atomic=\"true\"><slot name=\"value\"><span id=\"selected-text\" class=\"selected-text\" part=\"text\"></span></slot></div><slot slot=\"end\" name=\"end\"></slot><slot slot=\"accessory\" name=\"accessory\"></slot><slot slot=\"support-text\" name=\"support-text\"></slot><slot slot=\"support-text-end\" name=\"support-text-end\"></slot><slot slot=\"start\" name=\"leading\"></slot><slot slot=\"end\" name=\"trailing\"></slot><slot slot=\"accessory\" name=\"addon-end\"></slot><slot slot=\"support-text\" name=\"helper-text\"></slot></forge-field></template>';
 const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge-field{--_select-placeholder-color:var(--forge-select-placeholder-color, var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6))))}.selected-text-container{display:grid;align-items:center;cursor:pointer}.selected-text,::slotted([slot=value]){white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.selected-text:empty::before{content:attr(placeholder);color:var(--_select-placeholder-color);font-size:inherit}:host([disabled]) .selected-text-container{cursor:not-allowed}forge-field{display:contents}';
 /**
  * @tag forge-select
@@ -60,6 +61,20 @@ const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge
  * @property {SelectOptionBuilder} optionBuilder - Gets/sets the option builder function.
  * @property {SelectSelectedTextBuilder} selectedTextBuilder - Gets/sets the selected text builder function.
  * @property {SelectBeforeValueChangeCallback<any>} beforeValueChange - Gets/sets the before value change callback.
+ * @property {string | string[]; - } popupClasses - Gets/sets the list of classes to apply to the popup element.
+ * @property {ListDropdownHeaderBuilder} popupHeaderBuilder - Gets/sets the callback function for generating header content within the popup.
+ * @property {ListDropdownFooterBuilder} popupFooterBuilder - Gets/sets the callback function for generating header content within the popup.
+ * @property {boolean} [syncPopupWidth=false] - Gets/sets whether the popup width is synchronized with the popup target width.
+ * @property {number} optionLimit - Gets/sets the maximum number of options to display in the dropdown.
+ * @property {boolean} [observeScroll=false] - Controls the observation of scroll events on the dropdown.
+ * @property {number} [observeScrollThreshold=0] - The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true.
+ * @property {boolean} [constrainPopupWidth=true] - Gets/sets whether the popup width will be constrained to a max width of the viewport width (default: `100vw`).
+ * @property {boolean} [wrapOptionText=false] - Gets/sets whether the options will wrap their text or not. This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.
+ * @property {OverlayPlacement} [popoverPlacement="bottom"] - Gets/sets the placement of the popover.
+ * @property {IOverlayOffset} popoverOffset - Gets/sets the offset of the popover.
+ * @property {OverlayFlipState} [popoverFlip="auto"] - Gets/sets the flip state of the popover.
+ * @property {OverlayShiftState} [popoverShift="auto"] - Gets/sets whether the popover should shift to fit within the viewport.
+ * @property {PositionPlacement | null} popoverFallbackPlacements - Gets/sets the fallback placements of the popover.
  *
  * @attribute {string} label - Controls the label text.
  * @attribute {string} placeholder - Controls the placeholder text.
@@ -67,6 +82,15 @@ const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge
  * @attribute {number | number[]} selected-index - Gets/sets the selected index.
  * @attribute {boolean} multiple - Gets/sets the multiple select state.
  * @attribute {boolean} open - Gets/sets the open state.
+ * @attribute {boolean} [sync-popup-width=false] - Gets/sets whether the popup width is synchronized with the popup target width.
+ * @attribute {number} option-limit - Gets/sets the maximum number of options to display in the dropdown.
+ * @attribute {boolean} [observe-scroll=false] - Controls the observation of scroll events on the dropdown.
+ * @attribute {number} [observe-scroll-threshold=0] - The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true.
+ * @attribute {boolean} [wrap-option-text=false] - Gets/sets whether the options will wrap their text or not. This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.
+ * @attribute {OverlayPlacement} [popover-placement="bottom"] - Gets/sets the placement of the popover.
+ * @attribute {IOverlayOffset} popover-offset - Gets/sets the offset of the popover.
+ * @attribute {OverlayFlipState} [popover-flip="auto"] - Gets/sets the flip state of the popover.
+ * @attribute {OverlayShiftState} [popover-shift="auto"] - Gets/sets whether the popover should shift to fit within the viewport.
  *
  * @cssproperty --forge-select-placeholder-color - The color of the placeholder text.
  * @cssproperty --forge-field-background - The background of the field surface.
@@ -135,6 +159,7 @@ const styles = ':host{display:block;outline:0}:host([hidden]){display:none}forge
 let SelectComponent = class SelectComponent extends WithFormAssociation(WithLabelAwareness(WithFocusable(WithDefaultAria(WithElementInternals(WithBaseField((BaseSelectComponent))))))) {
     static get observedAttributes() {
         return [
+            ...ListDropdownAware.observedAttributes,
             ...Object.values(BASE_FIELD_CONSTANTS.observedAttributes),
             ...Object.values(SELECT_CONSTANTS.observedAttributes),
             ...Object.values(BASE_SELECT_CONSTANTS.observedAttributes)

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:uhgtfsn;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhgtfsn{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:uhgtft0;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhgtft0{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:uhgtft9;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 uhgtft9{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:uhgtfts;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 uhgtfts{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:uhgtfu1;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhgtfu1{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:uhgtfus;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes uhgtfus{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:uhgtfv4;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 uhgtfv4{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:uhgtfvf;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 uhgtfvf{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:u910hqj;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u910hqj{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:u910hqz;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u910hqz{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:u910hrq;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 u910hrq{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:u910hrw;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 u910hrw{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:u910hsf;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u910hsf{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:u910ht3;animation-duration:var(--forge-animation-duration-medium2, 300ms);animation-timing-function:var(--forge-animation-easing-standard,cubic-bezier(0.2,0,0,1))}@keyframes u910ht3{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:u910htz;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 u910htz{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:u910hul;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 u910hul{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.js

@@ -17,7 +17,7 @@ import { WithElementInternals } from '../../core/mixins/internals/with-element-i
 import { WithDefaultAria } from '../../core/mixins/internals/with-default-aria';
 import { setDefaultAria } from '../../constants';
 const template = '<template><div class=\"forge-tab-bar\" part=\"container\"><div class=\"scroll-container\" part=\"scroll-container\"><slot></slot></div></div></template>';
-const styles = ':host{position:relative;display:block}:host([hidden]){display:none}.forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, space-between);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 1);--_tab-bar-divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_tab-bar-divider-thickness:var(--forge-tab-bar-divider-thickness, 1px)}.forge-tab-bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;align-items:center;border-bottom:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}.scroll-container{position:relative;display:flex;justify-content:var(--_tab-bar-justify);align-items:flex-end;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){flex:var(--_tab-bar-stretch);align-self:stretch}::slotted([selected]){z-index:1}forge-icon-button{--forge-icon-button-shape-squared:0px}:host([vertical]) .forge-tab-bar{grid-template-columns:none;grid-template-rows:auto 1fr auto;align-items:initial;border-bottom:none;border-right:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color);height:100%}:host([vertical]) .scroll-container{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .forge-tab-bar{border-bottom:none;border-top:variale(divider-thickness) solid var(--_tab-bar-divider-color)}:host([inverted][vertical]) .forge-tab-bar{border-bottom:none;border-top:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}:host([clustered]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 0)}:host([clustered=start]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start)}:host([clustered=center]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, center)}:host([clustered=end]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-end)}';
+const styles = ':host{position:relative;display:block}:host([hidden]){display:none}.forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, space-between);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 1);--_tab-bar-divider-color:var(--forge-tab-bar-divider-color, var(--forge-theme-outline, #e0e0e0));--_tab-bar-divider-thickness:var(--forge-tab-bar-divider-thickness, 1px)}.forge-tab-bar{position:relative;display:grid;grid-template-columns:auto 1fr auto;max-width:100%;max-height:100%;align-items:center;border-bottom:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}.scroll-container{position:relative;display:flex;justify-content:var(--_tab-bar-justify);align-items:flex-end;box-sizing:border-box;overflow:auto;scroll-behavior:smooth;scrollbar-width:none;grid-column:2}.scroll-container::-webkit-scrollbar{display:none}::slotted(*){flex:var(--_tab-bar-stretch);align-self:stretch}::slotted([selected]){z-index:1}forge-icon-button{--forge-icon-button-shape-squared:0px}:host([vertical]) .forge-tab-bar{grid-template-columns:none;grid-template-rows:auto 1fr auto;align-items:initial;border-bottom:none;border-right:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color);height:100%}:host([vertical]) .scroll-container{display:inline-flex;flex-direction:column;align-items:stretch;gap:0;grid-column:auto;grid-row:2}:host([vertical]) .scroll-button{justify-self:center}:host([inverted]:not([vertical])) .forge-tab-bar{border-bottom:none;border-top:variale(divider-thickness) solid var(--_tab-bar-divider-color)}:host([inverted][vertical]) .forge-tab-bar{border-bottom:none;border-top:var(--_tab-bar-divider-thickness) solid var(--_tab-bar-divider-color)}:host([clustered]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start);--_tab-bar-stretch:var(--forge-tab-bar-stretch, 0)}:host([clustered=start]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-start)}:host([clustered=center]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, center)}:host([clustered=end]) .forge-tab-bar{--_tab-bar-justify:var(--forge-tab-bar-justify, flex-end)}:host([theme=app-bar]){--forge-tab-active-color:var(--_app-bar-theme-foreground);--forge-tab-inactive-color:var(--_app-bar-theme-foreground-muted)}:host([theme=app-bar]) forge-icon-button{--forge-icon-button-icon-color:var(--_app-bar-theme-foreground)}';
 /**
  * @tag forge-tab-bar
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tylertech/forge",
   "description": "Tyler Forge™ Web Components library",
-  "version": "3.8.0-dev.3",
+  "version": "3.8.0",
   "author": "Tyler Technologies, Inc.",
   "license": "Apache-2.0",
   "repository": {
@@ -21,4 +21,4 @@
     "tslib": "^2.8.1"
   },
   "customElements": "custom-elements.json"
-}
+}

package/sass/app-bar/app-bar/_core.scss

@@ -93,7 +93,6 @@
 @mixin logo {
   font-size: #{token(logo-font-size)};
   height: 1em;
-  width: 1em;
 }
 
 @mixin elevation-raised {

package/sass/app-bar/app-bar/app-bar.scss

@@ -17,16 +17,6 @@
 //
 
 $host-tokens: (background, foreground);
-// $host-theme-tokens: (
-//   theme-primary,
-//   theme-on-primary,
-//   theme-text-high,
-//   theme-text-medium,
-//   theme-text-low,
-//   theme-outline-high,
-//   theme-outline-medium,
-//   theme-outline-low
-// );
 
 :host {
   @include tokens($includes: $host-tokens);
@@ -44,17 +34,36 @@ $host-tokens: (background, foreground);
 // Default theme
 //
 
+:host(:not([theme]):not([theme-mode='scoped'])) {
+  @include theme.provide(
+    (
+      primary: #{token(foreground)},
+      on-primary: rgba(black, color-emphasis.value(highest)),
+      text-high: rgba(white, color-emphasis.value(highest)),
+      text-medium: rgba(white, color-emphasis.value(medium)),
+      text-low: rgba(white, color-emphasis.value(medium-low)),
+      outline-high: rgba(white, color-emphasis.value(highest)),
+      outline-medium: rgba(white, color-emphasis.value(medium)),
+      outline-low: rgba(white, color-emphasis.value(medium-low))
+    )
+  );
+}
+
+:host([theme-mode='scoped']) {
+  .forge-app-bar {
+    color: inherit;
+
+    .logo-title-container {
+      color: #{token(foreground)};
+    }
+  }
+}
+
 :host {
   @include provide-theme(
     (
-      theme-primary: #{token(foreground)},
-      theme-on-primary: #{token(background)},
-      theme-text-high: #{token(theme-text-high)},
-      theme-text-medium: #{token(theme-text-medium)},
-      theme-text-low: #{token(theme-text-low)},
-      theme-outline-high: #{token(theme-outline-high)},
-      theme-outline-medium: #{token(theme-outline-medium)},
-      theme-outline-low: #{token(theme-outline-low)}
+      theme-foreground: #{token(foreground)},
+      theme-foreground-muted: rgba(white, color-emphasis.value(medium))
     )
   );
 }
@@ -133,6 +142,25 @@ $host-tokens: (background, foreground);
   }
 }
 
+//
+// Slotted (scoped theme mode)
+//
+// Attempt to auto-theme any specific slotted elements directly
+//
+
+:host([theme-mode='scoped']) {
+  ::slotted(:where(forge-tab-bar, forge-icon-button, forge-button)) {
+    color: #{token(theme-foreground)};
+
+    @include tab.provide-theme(
+      (
+        active-color: #{token(theme-foreground)},
+        inactive-color: #{token(theme-foreground-muted)}
+      )
+    );
+  }
+}
+
 //
 // Slotted - Tab bar
 //
@@ -166,6 +194,17 @@ $host-tokens: (background, foreground);
 //
 
 :host([theme='white']) {
+  @include override(background, white, value);
+  @include override(foreground, black, value);
+
+  @include provide-theme(
+    (
+      theme-foreground-muted: rgba(black, color-emphasis.value(medium))
+    )
+  );
+}
+
+:host([theme='white']:not([theme-mode='scoped'])) {
   @include theme.provide(
     (
       primary: black,
@@ -173,9 +212,4 @@ $host-tokens: (background, foreground);
       text-medium: rgba(black, color-emphasis.value(medium))
     )
   );
-
-  .forge-app-bar {
-    @include override(background, white, value);
-    @include override(foreground, black, value);
-  }
 }

package/sass/app-bar/forge-app-bar.scss

@@ -15,18 +15,28 @@
 
 .forge-app-bar {
   @include core.tokens;
-  @include theme.provide(
+
+  @include core.provide-theme(
     (
-      primary: #{core.token(foreground)},
-      on-primary: rgba(black, color-emphasis.value(highest)),
-      text-high: rgba(white, color-emphasis.value(highest)),
-      text-medium: rgba(white, color-emphasis.value(medium)),
-      text-low: rgba(white, color-emphasis.value(medium-low)),
-      outline-high: rgba(white, color-emphasis.value(highest)),
-      outline-medium: rgba(white, color-emphasis.value(medium)),
-      outline-low: rgba(white, color-emphasis.value(medium-low))
+      theme-foreground: #{core.token(foreground)},
+      theme-foreground-muted: rgba(white, color-emphasis.value(medium))
     )
   );
+
+  &:not(.forge-app-bar--scoped) {
+    @include theme.provide(
+      (
+        primary: #{core.token(foreground)},
+        on-primary: rgba(black, color-emphasis.value(highest)),
+        text-high: rgba(white, color-emphasis.value(highest)),
+        text-medium: rgba(white, color-emphasis.value(medium)),
+        text-low: rgba(white, color-emphasis.value(medium-low)),
+        outline-high: rgba(white, color-emphasis.value(highest)),
+        outline-medium: rgba(white, color-emphasis.value(medium)),
+        outline-low: rgba(white, color-emphasis.value(medium-low))
+      )
+    );
+  }
 }
 
 .forge-app-bar {
@@ -48,6 +58,16 @@
     grid-template-areas: 'start end';
   }
 
+  &--scoped {
+    color: inherit;
+
+    .forge-app-bar__logo,
+    .forge-app-bar__title h1,
+    .forge-app-bar__logo-title-container {
+      color: #{core.token(foreground)};
+    }
+  }
+
   &--raised {
     @include core.elevation-raised;
   }
@@ -79,7 +99,7 @@
     @include focus-indicator.standalone($type: inward);
     @include focus-indicator.provide-theme(
       (
-        color: currentColor,
+        color: #{core.token(foreground)},
         offset-block: #{spacing.variable(xxsmall)},
         shape: #{shape.variable(medium)}
       )
@@ -96,7 +116,7 @@
       @include state-layer.standalone;
       @include state-layer.provide-theme(
         (
-          color: currentColor
+          color: #{core.token(foreground)}
         )
       );
     }
@@ -143,4 +163,14 @@
       justify-content: end;
     }
   }
+
+  .forge-app-bar-theme {
+    color: #{core.token(theme-foreground)};
+
+    @include focus-indicator.provide-theme(
+      (
+        color: #{core.token(theme-foreground)}
+      )
+    );
+  }
 }

package/sass/app-bar/search/app-bar-search.scss

@@ -5,9 +5,12 @@
  */
 @use './core' as *;
 @use '../../focus-indicator';
+@use '../app-bar';
 
 :host {
   @include host;
+
+  color: #{app-bar.token(theme-foreground)};
 }
 
 :host([hidden]) {

package/sass/button/button.scss

@@ -8,6 +8,7 @@
 @use '../state-layer';
 @use '../focus-indicator';
 @use '../circular-progress';
+@use '../app-bar/app-bar';
 @use '../icon';
 
 //
@@ -132,6 +133,29 @@ forge-focus-indicator {
 @include theme(warning);
 @include theme(info);
 
+//
+// App bar theme
+//
+
+:host([theme='app-bar']) {
+  @include provide-theme(
+    (
+      text-color: #{app-bar.token(theme-foreground)},
+      outlined-color: #{app-bar.token(theme-foreground)},
+      outlined-border-color: #{app-bar.token(theme-foreground)},
+      link-color: #{app-bar.token(theme-foreground)}
+    )
+  );
+
+  forge-focus-indicator {
+    @include focus-indicator.provide-theme(
+      (
+        color: #{app-bar.token(theme-foreground)}
+      )
+    );
+  }
+}
+
 //
 // Variants
 //

package/sass/core/styles/scrollbar/index.scss

@@ -5,6 +5,20 @@
  */
 @use '../tokens/scrollbar/tokens';
 
+///
+/// Gets a CSS custom property declaration for a specific scrollbar token with its token value as the fallback value.
+///
+/// Example:
+/// ```scss
+/// .my-class {
+///   width: #{scrollbar.variable(width)}; // => width: var(--forge-scrollbar-width, 16px);
+/// }
+/// ```
+///
+@function variable($key) {
+  @return tokens.get($key);
+}
+
 ///
 /// Provides scrollbar styles.
 ///

package/sass/core/styles/tokens/app-bar/app-bar/_tokens.scss

@@ -25,14 +25,8 @@ $tokens: (
   transition-duration: utils.module-val(app-bar, transition-duration, animation.variable(duration-short4)),
   transition-timing: utils.module-val(app-bar, transition-timing, animation.variable(easing-standard)),
   // Scoped theming tokens for app bar children to optionally inherit
-  theme-primary: utils.module-ref(app-bar, theme-primary, foreground),
-  theme-on-primary: utils.module-val(app-bar, theme-on-primary, rgba(black, theme.emphasis(highest))),
-  theme-text-high: utils.module-val(app-bar, theme-text-high, rgba(white, theme.emphasis(highest))),
-  theme-text-medium: utils.module-val(app-bar, theme-text-medium, rgba(white, theme.emphasis(medium))),
-  theme-text-low: utils.module-val(app-bar, theme-text-low, rgba(white, theme.emphasis(medium-low))),
-  theme-outline-high: utils.module-val(app-bar, theme-outline-high, rgba(white, theme.emphasis(highest))),
-  theme-outline-medium: utils.module-val(app-bar, theme-outline-medium, rgba(white, theme.emphasis(medium))),
-  theme-outline-low: utils.module-val(app-bar, theme-outline-low, rgba(white, theme.emphasis(medium-low)))
+  theme-foreground: utils.module-ref(app-bar, theme-foreground, foreground),
+  theme-foreground-muted: utils.module-val(app-bar, theme-foreground-muted, rgba(white, theme.emphasis(medium)))
 ) !default;
 
 @function get($key) {

package/sass/icon-button/icon-button.scss

@@ -10,6 +10,7 @@
 @use '../focus-indicator';
 @use '../badge';
 @use '../circular-progress';
+@use '../app-bar/app-bar';
 
 //
 // Host
@@ -379,16 +380,14 @@ forge-state-layer {
 @include theme(info);
 
 //
-// Custom theme for app-bar usage only.
+// App Bar Theme
 //
 
 :host([theme='app-bar']) {
-  --forge-theme-primary: var(--forge-app-bar-theme-primary);
-  --forge-theme-on-primary: var(--forge-app-bar-theme-on-primary);
-  --forge-theme-text-high: var(--forge-app-bar-theme-text-high);
-  --forge-theme-text-medium: var(--forge-app-bar-theme-text-medium);
-  --forge-theme-text-low: var(--forge-app-bar-theme-text-low);
-  --forge-theme-outline-high: var(--forge-app-bar-theme-outline-high);
-  --forge-theme-outline-medium: var(--forge-app-bar-theme-outline-medium);
-  --forge-theme-outline-low: var(--forge-app-bar-theme-outline-low);
+  @include provide-theme(
+    (
+      icon-color: #{app-bar.token(theme-foreground)},
+      focus-indicator-color: #{app-bar.token(theme-foreground)}
+    )
+  );
 }

package/sass/table/_core.scss

@@ -18,7 +18,7 @@
 // The base styles for the `<table>` element.
 @mixin base {
   width: 100%;
-  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 // The base styles for the rows of the table.

package/sass/tabs/tab-bar/tab-bar.scss

@@ -4,7 +4,10 @@
  * License: Apache-2.0
  */
 @use './core' as *;
+@use '../../app-bar/app-bar';
 @use '../../icon-button';
+@use '../tab';
+@use '../../core/styles/theme';
 
 //
 // Host
@@ -112,3 +115,24 @@ forge-icon-button {
     @include override(justify, flex-end, value);
   }
 }
+
+//
+// App Bar Theme
+//
+
+:host([theme='app-bar']) {
+  @include tab.provide-theme(
+    (
+      active-color: #{app-bar.token(theme-foreground)},
+      inactive-color: #{app-bar.token(theme-foreground-muted)}
+    )
+  );
+
+  forge-icon-button {
+    @include icon-button.provide-theme(
+      (
+        icon-color: #{app-bar.token(theme-foreground)}
+      )
+    );
+  }
+}