@genesislcap/foundation-forms 14.480.0 → 14.481.0

package/dist/custom-elements.json

@@ -989,7 +989,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[\n  fallbackEntry,\n  stringEntry,\n  BooleanControlEntry,\n  LayoutVertical2ColumnsEntry,\n  LayoutRendererEntry,\n  FilterNumberControlRendererEntry,\n  ConnectedMultiselectControlRendererEntry,\n  EnumControlRendererEntry,\n  ConnectedSelectControlRendererEntry,\n  FilterDateControlRendererEntry,\n  FilterTimeControlRendererEntry,\n  InvisibleControlEntry,\n]",
+          "default": "[\n  fallbackEntry,\n  stringEntry,\n  BooleanControlEntry,\n  LayoutVertical2ColumnsEntry,\n  LayoutHorizontalEntry,\n  LayoutRendererEntry,\n  FilterNumberControlRendererEntry,\n  ConnectedMultiselectControlRendererEntry,\n  EnumControlRendererEntry,\n  ConnectedSelectControlRendererEntry,\n  FilterDateControlRendererEntry,\n  FilterTimeControlRendererEntry,\n  InvisibleControlEntry,\n]",
           "description": "Set of default renderers used by the foundation-filters.",
           "privacy": "public"
         },
@@ -1035,7 +1035,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Controls the visibility of the filter persistence controls UI.",
+              "description": "Controls the visibility of the filter persistence controls UI.\nWhen enabled, shows saved-filter select plus save/delete (KV storage).\nCustomize layout from outside via `::part(filter-persistence-controls-container)` or\n`--filter-persistence-controls-container-height` on the host.",
               "privacy": "public"
             },
             {
@@ -1052,13 +1052,22 @@
               "description": "UI schema used to define configuration of the layout and elements in the filters\nCheck UiSchema for possible options.",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "uischemaChanged"
+            },
+            {
+              "kind": "method",
+              "name": "syncLayoutDirection",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "renderers",
               "type": {
                 "text": "RendererEntry[]"
               },
-              "default": "[\n  fallbackEntry,\n  stringEntry,\n  BooleanControlEntry,\n  LayoutVertical2ColumnsEntry,\n  LayoutRendererEntry,\n  FilterNumberControlRendererEntry,\n  ConnectedMultiselectControlRendererEntry,\n  EnumControlRendererEntry,\n  ConnectedSelectControlRendererEntry,\n  FilterDateControlRendererEntry,\n  FilterTimeControlRendererEntry,\n  InvisibleControlEntry,\n]",
+              "default": "[\n  fallbackEntry,\n  stringEntry,\n  BooleanControlEntry,\n  LayoutVertical2ColumnsEntry,\n  LayoutHorizontalEntry,\n  LayoutRendererEntry,\n  FilterNumberControlRendererEntry,\n  ConnectedMultiselectControlRendererEntry,\n  EnumControlRendererEntry,\n  ConnectedSelectControlRendererEntry,\n  FilterDateControlRendererEntry,\n  FilterTimeControlRendererEntry,\n  InvisibleControlEntry,\n]",
               "description": "Allows to provide the main set of renderers used by the form. If not provided, the built-in renderers will be used by default.",
               "privacy": "public"
             },
@@ -1373,7 +1382,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Controls the visibility of the filter persistence controls UI.",
+              "description": "Controls the visibility of the filter persistence controls UI.\nWhen enabled, shows saved-filter select plus save/delete (KV storage).\nCustomize layout from outside via `::part(filter-persistence-controls-container)` or\n`--filter-persistence-controls-container-height` on the host.",
               "fieldName": "showFilterPersistenceControls"
             },
             {

package/dist/dts/filters/filters.d.ts

@@ -396,6 +396,9 @@ export declare class Filters extends Filters_base {
     allSavedFilters: any[];
     /**
      * Controls the visibility of the filter persistence controls UI.
+     * When enabled, shows saved-filter select plus save/delete (KV storage).
+     * Customize layout from outside via `::part(filter-persistence-controls-container)` or
+     * `--filter-persistence-controls-container-height` on the host.
      * @public
      */
     showFilterPersistenceControls: boolean;
@@ -443,6 +446,18 @@ export declare class Filters extends Filters_base {
      * @public
      */
     uischema: UiSchema;
+    /**
+     * Reflects the root UI schema layout so filter chrome (scroll vs fixed actions) can adapt.
+     * @internal
+     */
+    layoutDirection: 'vertical' | 'horizontal';
+    uischemaChanged(): void;
+    /**
+     * Root UI schema layout; used for container chrome (scroll axis, action placement).
+     * @internal
+     */
+    get layoutMode(): 'vertical' | 'horizontal';
+    private syncLayoutDirection;
     /**
      * Allows to provide the main set of renderers used by the form. If not provided, the built-in renderers will be used by default.
      * @public

package/dist/dts/filters/filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../src/filters/filters.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAOnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAY1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAMnD,gBAAgB;AAChB,eAAO,MAAM,aAAa,iDAAqC,CAAC;AAchE;;;GAGG;AACH,eAAO,MAAM,gBAAgB,OAa5B,CAAC;;;;;;;kBAMgC,CAAC;;;;;;;;8BAsDd,CAAC,cAChB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAqCG,CAAC;4IAQmE,CAAC;wFAI5E,CAAC;+IAIoD,CAAC;2FAGvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA8CZ,CAAC;;;;;;;;;;;;;;;;;;;;;;;mBAqFE,CAAC;;;;;;;;;;;;;6BAkCV,CAAC;8BAIV,CAAP;kBACyB,CAAC;;oBAET,CAAC;;sBAEM,CAAC;oBAGhB,CAAT;;;;;;;;gDAgBY,CAAC;;;;;;;;;;;;;;;;;;uBAoBoL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAAiiH,CAAC;yBAA8E,CAAC;UAAoD,GAAG;WAAgD,GAAG;;gBAA6E,GAAG;;;;;;;WAA4V,GAAG;YAAiD,GAAG;;;;;;;;;;;oBAAupC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAiiO,CAAC;cAA6F,CAAC;eAA8F,CAAC;gBAA+F,CAAC;;;;;;;;;;;;;;SAAulC,CAAC;;;iBAA+E,CAAC;;AArUlgc;;;;;;;;GAQG;AACH,qBAMa,OAAQ,SAAQ,YAAiC;IACjD,SAAS,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IAE/B;;;;OAIG;IACG,YAAY,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,GAAG,EAAE,CAAM;IAExC;;;OAGG;IAEH,6BAA6B,EAAE,OAAO,CAAC;YAEzB,mBAAmB;IAkBjC;;OAEG;IACI,gBAAgB;IAMvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;IACS,QAAQ,EAAE,QAAQ,CAAC;IAC/B;;;OAGG;IACS,SAAS,EAAE,aAAa,EAAE,CAAoB;IAC1D;;;;;;OAMG;IACS,UAAU,EAAE,WAAW,CAAC;IACpC;;;OAGG;IAC0C,MAAM,EAAE,MAAM,CAAW;IAE7D,OAAO,CAAC,OAAO,CAAW;IACnC;;;OAGG;IACS,IAAI,EAAE,GAAG,CAAM;IAC3B;;;OAGG;IACS,KAAK,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,YAAY;IAIZ;;OAEG;IACM,SAAS,IAAI,IAAI;IAY1B;;OAEG;IACG,aAAa;IAmCnB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW;IAOrB,UAAU;IA0CV,YAAY;IA4BZ,iBAAiB;IAOjB,mBAAmB;IAsBzB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAW9C,cAAc,CAAC,SAAS,EAAE,MAAM;CAcvC"}
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../src/filters/filters.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAOnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAa1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAMnD,gBAAgB;AAChB,eAAO,MAAM,aAAa,iDAAqC,CAAC;AAchE;;;GAGG;AACH,eAAO,MAAM,gBAAgB,OAc5B,CAAC;;;;;;;kBAEmB,CAAC;;;;;;;;8BA8CZ,CAAD,cACD,CAAF;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAwCK,CAAL;4IAKH,CAAF;wFAKc,CAAC;+IAUmE,CAAA;2FAMjF,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmCiB,CAAA;;;;;;;;;;;;;;;;;;;;;;;mBAsFf,CAAD;;;;;;;;;;;;;6BA6BS,CAAD;8BAIL,CAAN;kBAKgB,CAAA;;oBAGV,CAAN;;sBAIM,CAAD;oBAEgB,CAAC;;;;;;;;gDAqBH,CAAC;;;;;;;;;;;;;;;;;;uBA2Be,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA0BmvF,CAAC;yBAA8E,CAAC;UAAoD,GAAG;WAAgD,GAAG;;gBAA6E,GAAG;;;;;;;WAA4V,GAAG;YAAiD,GAAG;;;;;;;;;;;oBAAupC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAAiiO,CAAC;cAA6F,CAAC;eAA8F,CAAC;gBAA+F,CAAC;;;;;;;;;;;;;;SAAulC,CAAC;;;iBAA+E,CAAC;;AAhWrja;;;;;;;;GAQG;AACH,qBAKa,OAAQ,SAAQ,YAAiC;IACjD,SAAS,EAAE,SAAS,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IAE/B;;;;OAIG;IACG,YAAY,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,GAAG,EAAE,CAAM;IAExC;;;;;;OAMG;IAEH,6BAA6B,EAAE,OAAO,CAAC;YAEzB,mBAAmB;IAkBjC;;OAEG;IACI,gBAAgB;IAMvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;IACS,QAAQ,EAAE,QAAQ,CAAC;IAE/B;;;OAGG;IAEH,eAAe,EAAE,UAAU,GAAG,YAAY,CAAc;IAExD,eAAe;IAIf;;;OAGG;IACH,IAAI,UAAU,IAAI,UAAU,GAAG,YAAY,CAE1C;IAED,OAAO,CAAC,mBAAmB;IAI3B;;;OAGG;IACS,SAAS,EAAE,aAAa,EAAE,CAAoB;IAC1D;;;;;;OAMG;IACS,UAAU,EAAE,WAAW,CAAC;IACpC;;;OAGG;IAC0C,MAAM,EAAE,MAAM,CAAW;IAE7D,OAAO,CAAC,OAAO,CAAW;IACnC;;;OAGG;IACS,IAAI,EAAE,GAAG,CAAM;IAC3B;;;OAGG;IACS,KAAK,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,YAAY;IAIZ;;OAEG;IACM,SAAS,IAAI,IAAI;IAY1B;;OAEG;IACG,aAAa;IAmCnB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,WAAW;IAOrB,UAAU;IA0CV,YAAY;IA4BZ,iBAAiB;IAQjB,mBAAmB;IAsBzB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAW9C,cAAc,CAAC,SAAS,EAAE,MAAM;CAcvC"}

package/dist/dts/filters/filters.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters.styles.d.ts","sourceRoot":"","sources":["../../../src/filters/filters.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,uBAAuB,iDA4FnC,CAAC"}
+{"version":3,"file":"filters.styles.d.ts","sourceRoot":"","sources":["../../../src/filters/filters.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,uBAAuB,iDAgRnC,CAAC"}

package/dist/dts/filters/filters.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters.template.d.ts","sourceRoot":"","sources":["../../../src/filters/filters.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIzC,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,iEAoFhD,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,yBAAyB,8DAErC,CAAC"}
+{"version":3,"file":"filters.template.d.ts","sourceRoot":"","sources":["../../../src/filters/filters.template.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIzC,gBAAgB;AAChB,eAAO,MAAM,kBAAkB,GAAI,QAAQ,MAAM,iEAwFhD,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,yBAAyB,8DAErC,CAAC"}

package/dist/esm/filters/filters.js

@@ -15,6 +15,7 @@ import { FilterDateControlRendererEntry } from '../jsonforms/renderers/FilterDat
 import { FilterNumberControlRendererEntry } from '../jsonforms/renderers/FilterNumberControlRenderer';
 import { FilterTimeControlRendererEntry } from '../jsonforms/renderers/FilterTimeControlRenderer';
 import { InvisibleControlEntry } from '../jsonforms/renderers/InvisibleControlRenderer';
+import { LayoutHorizontalEntry } from '../jsonforms/renderers/LayoutHorizontalRenderer';
 import { LayoutRendererEntry } from '../jsonforms/renderers/LayoutRenderer';
 import { LayoutVertical2ColumnsEntry } from '../jsonforms/renderers/LayoutVertical2ColumnsRenderer';
 import { StringControlRendererTemplate } from '../jsonforms/renderers/StringControlRenderer';
@@ -43,6 +44,7 @@ export const filtersRenderers = [
     stringEntry,
     BooleanControlEntry,
     LayoutVertical2ColumnsEntry,
+    LayoutHorizontalEntry,
     LayoutRendererEntry,
     FilterNumberControlRendererEntry,
     ConnectedMultiselectControlRendererEntry,
@@ -67,6 +69,11 @@ let Filters = class Filters extends LifecycleMixin(FoundationElement) {
     constructor() {
         super(...arguments);
         this.allSavedFilters = [];
+        /**
+         * Reflects the root UI schema layout so filter chrome (scroll vs fixed actions) can adapt.
+         * @internal
+         */
+        this.layoutDirection = 'vertical';
         /**
          * Allows to provide the main set of renderers used by the form. If not provided, the built-in renderers will be used by default.
          * @public
@@ -107,6 +114,20 @@ let Filters = class Filters extends LifecycleMixin(FoundationElement) {
         this.value = '';
         this.filterName = '';
     }
+    uischemaChanged() {
+        this.syncLayoutDirection();
+    }
+    /**
+     * Root UI schema layout; used for container chrome (scroll axis, action placement).
+     * @internal
+     */
+    get layoutMode() {
+        var _a;
+        return ((_a = this.uischema) === null || _a === void 0 ? void 0 : _a.type) === 'HorizontalLayout' ? 'horizontal' : 'vertical';
+    }
+    syncLayoutDirection() {
+        this.layoutDirection = this.layoutMode;
+    }
     /**
      * @internal
      */
@@ -236,6 +257,7 @@ let Filters = class Filters extends LifecycleMixin(FoundationElement) {
         });
         return __awaiter(this, void 0, void 0, function* () {
             _super.connectedCallback.call(this);
+            this.syncLayoutDirection();
             if (this.showFilterPersistenceControls) {
                 yield this.loadAllSavedFilters();
             }
@@ -313,6 +335,9 @@ __decorate([
 __decorate([
     observable
 ], Filters.prototype, "uischema", void 0);
+__decorate([
+    attr({ attribute: 'layout-direction' })
+], Filters.prototype, "layoutDirection", void 0);
 __decorate([
     observable
 ], Filters.prototype, "renderers", void 0);
@@ -336,7 +361,6 @@ Filters = __decorate([
         name: 'foundation-filters',
         template,
         styles,
-        shadowOptions: null,
     })
 ], Filters);
 export { Filters };

package/dist/esm/filters/filters.styles.js

@@ -4,92 +4,272 @@ import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { controlWrapperStylesFor } from '../jsonforms/renderers/ControlWrapperRenderer';
 export const foundationFiltersStyles = css `
-  ${controlWrapperStylesFor('foundation-filters')}
+  ${controlWrapperStylesFor(':host')}
 
-  foundation-filters {
+  :host {
     display: flex;
+    flex-direction: column;
     height: 100%;
     width: 100%;
     border: calc(${strokeWidth} * 1px) solid transparent;
     margin: 0;
     border-radius: calc(${controlCornerRadius} * 1px);
     min-width: 64px;
+    min-height: 0;
+    overflow: hidden;
 
     --filter-persistence-controls-container-height: 145px;
+    --filter-horizontal-field-min-width: calc(var(--design-unit) * 30px);
+    --filter-forms-padding-inline: calc(var(--design-unit) * 4px);
+    --filter-forms-padding-scroll-end: calc(var(--design-unit) * 6px);
   }
 
-  foundation-filters .header {
+  .header {
     padding: calc(var(--design-unit) * 4px);
   }
 
-  foundation-filters .header h2 {
+  .header h2 {
     margin: 0;
   }
 
-  foundation-filters .container {
+  .container {
     width: 100%;
     display: flex;
     flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
   }
 
-  foundation-filters .container-forms {
+  .container-body {
+    display: flex;
     overflow: hidden;
-    overflow-y: scroll;
+  }
+
+  .container-forms {
+    --foundation-filters-scrollbar-thumb: var(--neutral-layer-2);
+  }
+
+  /* Vertical root layout: fields scroll, actions pinned below */
+  .container-body.vertical {
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .container-body.vertical .container-forms {
     display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
+    scrollbar-color: var(--foundation-filters-scrollbar-thumb) var(--neutral-layer-4);
+  }
+
+  .container-body.vertical .container-forms::-webkit-scrollbar {
+    width: calc((var(--base-height-multiplier) + var(--design-unit)) * 1px);
+  }
+
+  .container-body.vertical .container-forms::-webkit-scrollbar-track {
+    background: var(--neutral-layer-4);
   }
 
-  foundation-filters .container-forms json-forms {
+  .container-body.vertical .container-forms::-webkit-scrollbar-thumb {
+    background-color: var(--foundation-filters-scrollbar-thumb);
+    border-radius: calc(${controlCornerRadius} * 1px);
+  }
+
+  /* Horizontal root layout: fields scroll sideways, actions on the right (same row) */
+  .container-body.horizontal {
+    flex: 0 1 auto;
+    flex-direction: row;
+    align-items: flex-end;
     width: 100%;
-    padding: 0 15px;
+    min-height: 0;
+  }
+
+  .container-body.horizontal .container-forms {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--foundation-filters-scrollbar-thumb) var(--neutral-layer-4);
+  }
+
+  .container-body.horizontal .container-forms::-webkit-scrollbar {
+    height: calc((var(--base-height-multiplier) + var(--design-unit)) * 1px);
+  }
+
+  .container-body.horizontal .container-forms::-webkit-scrollbar-track {
+    background: var(--neutral-layer-4);
+  }
+
+  .container-body.horizontal .container-forms::-webkit-scrollbar-thumb {
+    background-color: var(--foundation-filters-scrollbar-thumb);
+    border-radius: calc(${controlCornerRadius} * 1px);
+  }
+
+  /*
+   * Opt-in: host class filters-dropdown-overflow lets absolutely-positioned popups
+   * (e.g. the multiselect dropdown) paint outside the filter card instead of being clipped.
+   * This trades away field scrolling for that instance, so only use it on short filter bars.
+   */
+  :host(.filters-dropdown-overflow),
+  :host(.filters-dropdown-overflow) .container,
+  :host(.filters-dropdown-overflow) .container-body,
+  :host(.filters-dropdown-overflow) .container-body.vertical .container-forms,
+  :host(.filters-dropdown-overflow) .container-body.horizontal .container-forms {
+    overflow: visible;
+  }
+
+  /*
+   * With scrolling disabled (overflow: visible), the vertical fields area must size to
+   * its content so the pinned actions flow below it instead of the fields overflowing
+   * their flex box and painting on top of the actions.
+   */
+  :host(.filters-dropdown-overflow) .container-body.vertical .container-forms {
+    flex: 0 0 auto;
+  }
+
+  .container-forms json-forms {
+    width: 100%;
+    padding: 0 var(--filter-forms-padding-inline);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
   }
 
-  foundation-filters .label {
+  .container-body.vertical .container-forms json-forms {
+    flex: 1 1 auto;
+    min-height: 0;
+    padding-right: var(--filter-forms-padding-scroll-end);
+  }
+
+  json-forms .clipboard-button {
+    align-self: flex-start;
+  }
+
+  dispatch-renderer {
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .fl-vertical-layout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: stretch;
+  }
+
+  .foundation-control-wrapper-root {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .foundation-control-wrapper {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .container-body.horizontal .container-forms json-forms {
+    width: 100%;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .fl-horizontal-layout {
+    display: flex;
+    flex-direction: row;
+    gap: calc(${designUnit} * 2px);
+  }
+
+  .fl-horizontal-layout-item {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .container-body.horizontal .fl-horizontal-layout {
+    flex-wrap: nowrap;
+    width: 100%;
+    min-width: min-content;
+    align-items: flex-end;
+  }
+
+  .container-body.horizontal .fl-horizontal-layout-item {
+    flex: 1 1 0;
+    min-width: var(--filter-horizontal-field-min-width);
+  }
+
+  .label {
     font-size: calc(${designUnit} * 1px + 0.7vmin);
   }
 
-  foundation-filters .actions {
+  .actions {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: flex-end;
     padding: calc(${designUnit} * 4px);
     gap: calc(${designUnit} * 2px);
+    flex-shrink: 0;
+  }
+
+  .container-body.horizontal .actions {
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    align-self: flex-end;
+    padding: 0 calc(${designUnit} * 4px) calc(${designUnit} * 4px);
+  }
+
+  .action-button {
+    width: 70px;
   }
 
-  foundation-filters .action-button {
+  .container-body.horizontal .action-button {
     width: 70px;
   }
 
-  foundation-filters .filter-persistence-controls-container {
+  .filter-persistence-controls-container {
     display: flex;
     flex-direction: column;
     height: var(--filter-persistence-controls-container-height);
     padding: 5px 15px;
+    flex-shrink: 0;
   }
 
-  foundation-filters .filter-persistence-controls {
+  .filter-persistence-controls {
     display: flex;
     flex-direction: column;
     width: 100%;
     padding-bottom: 10px;
   }
 
-  foundation-filters .filter-persistence-controls > rapid-label {
+  .filter-persistence-controls > rapid-label {
     margin-bottom: calc(var(--design-unit) * 1px);
     color: var(--neutral-foreground-hint);
   }
 
-  foundation-filters .filter-persistence-controls-components {
+  .filter-persistence-controls-components {
     display: flex;
     gap: 10px;
   }
 
-  foundation-filters .filter-persistence-controls-components > rapid-button {
+  .filter-persistence-controls-components > rapid-button {
     width: 100px;
     justify-content: center;
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    foundation-filters {
+    :host {
       background: ${SystemColors.Canvas};
       border-color: ${SystemColors.CanvasText};
     }

package/dist/esm/filters/filters.template.js

@@ -8,7 +8,10 @@ export const getPrefixedFilters = (prefix) => html `
   <template>
     <div class="container" part="container">
       ${when((x) => x.showFilterPersistenceControls, html `
-          <div class="filter-persistence-controls-container">
+          <div
+            class="filter-persistence-controls-container"
+            part="filter-persistence-controls-container"
+          >
             <div class="filter-persistence-controls">
               <rapid-label>Saved Filters</rapid-label>
               <rapid-select :value=${sync((x) => x.filterName)}>
@@ -49,36 +52,37 @@ export const getPrefixedFilters = (prefix) => html `
           </div>
           <rapid-divider></rapid-divider>
         `)}
-    
-      <div class="container-forms" part="container-forms">
-        <json-forms
-          :renderers=${(x) => x.renderers}
-          :uischema=${(x) => x.uischema}
-          :schema=${(x) => x.jsonSchema}
-          :data=${(x) => x.data}
-          :prefix=${(x) => x.prefix}
-          @data-change=${(x, c) => x.onChange(c.event)}
-        ></json-forms>
-      </div>
-      <div class="actions" part="actions">
-        <slot name="actions-start"></slot>
-        <${prefix}-button
-          @click="${(x) => x.clearFiltersData()}"
-          class="action-button"
-          appearance="neutral"
-          data-test-id="clear-filters-button"
-        >
-          Clear
-        </${prefix}-button>
-        <${prefix}-button
-          @click="${(x) => x.searchFilters()}"
-          data-test-id="search-filters-button"
-          class="action-button"
-          appearance="accent"
-        >
-          Search
-        </${prefix}-button>
-        <slot name="actions-end"></slot>
+      <div class="${(x) => `container-body ${x.layoutMode}`}" part="container-body">
+        <div class="container-forms" part="container-forms">
+          <json-forms
+            :renderers=${(x) => x.renderers}
+            :uischema=${(x) => x.uischema}
+            :schema=${(x) => x.jsonSchema}
+            :data=${(x) => x.data}
+            :prefix=${(x) => x.prefix}
+            @data-change=${(x, c) => x.onChange(c.event)}
+          ></json-forms>
+        </div>
+        <div class="actions" part="actions">
+          <slot name="actions-start"></slot>
+          <${prefix}-button
+            @click="${(x) => x.clearFiltersData()}"
+            class="action-button"
+            appearance="neutral"
+            data-test-id="clear-filters-button"
+          >
+            Clear
+          </${prefix}-button>
+          <${prefix}-button
+            @click="${(x) => x.searchFilters()}"
+            data-test-id="search-filters-button"
+            class="action-button"
+            appearance="accent"
+          >
+            Search
+          </${prefix}-button>
+          <slot name="actions-end"></slot>
+        </div>
       </div>
     </div>
   </template>

package/dist/foundation-forms.api.json

@@ -1734,7 +1734,7 @@
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-forms!Filters#showFilterPersistenceControls:member",
-              "docComment": "/**\n * Controls the visibility of the filter persistence controls UI.\n *\n * @public\n */\n",
+              "docComment": "/**\n * Controls the visibility of the filter persistence controls UI. When enabled, shows saved-filter select plus save/delete (KV storage). Customize layout from outside via `::part(filter-persistence-controls-container)` or `--filter-persistence-controls-container-height` on the host.\n *\n * @public\n */\n",
               "excerptTokens": [
                 {
                   "kind": "Content",
@@ -1792,6 +1792,37 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@genesislcap/foundation-forms!Filters#uischemaChanged:member(1)",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "uischemaChanged(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "void"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "uischemaChanged"
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-forms!Filters#value:member",

package/dist/foundation-forms.d.ts

@@ -549,6 +549,9 @@ export declare class Filters extends Filters_base {
     allSavedFilters: any[];
     /**
      * Controls the visibility of the filter persistence controls UI.
+     * When enabled, shows saved-filter select plus save/delete (KV storage).
+     * Customize layout from outside via `::part(filter-persistence-controls-container)` or
+     * `--filter-persistence-controls-container-height` on the host.
      * @public
      */
     showFilterPersistenceControls: boolean;
@@ -596,6 +599,18 @@ export declare class Filters extends Filters_base {
      * @public
      */
     uischema: UiSchema;
+    /**
+     * Reflects the root UI schema layout so filter chrome (scroll vs fixed actions) can adapt.
+     * @internal
+     */
+    layoutDirection: 'vertical' | 'horizontal';
+    uischemaChanged(): void;
+    /**
+     * Root UI schema layout; used for container chrome (scroll axis, action placement).
+     * @internal
+     */
+    get layoutMode(): 'vertical' | 'horizontal';
+    private syncLayoutDirection;
     /**
      * Allows to provide the main set of renderers used by the form. If not provided, the built-in renderers will be used by default.
      * @public

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-forms",
   "description": "Genesis Foundation Forms",
-  "version": "14.480.0",
+  "version": "14.481.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -59,13 +59,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.480.0",
-    "@genesislcap/genx": "14.480.0",
-    "@genesislcap/rollup-builder": "14.480.0",
-    "@genesislcap/ts-builder": "14.480.0",
-    "@genesislcap/uvu-playwright-builder": "14.480.0",
-    "@genesislcap/vite-builder": "14.480.0",
-    "@genesislcap/webpack-builder": "14.480.0",
+    "@genesislcap/foundation-testing": "14.481.0",
+    "@genesislcap/genx": "14.481.0",
+    "@genesislcap/rollup-builder": "14.481.0",
+    "@genesislcap/ts-builder": "14.481.0",
+    "@genesislcap/uvu-playwright-builder": "14.481.0",
+    "@genesislcap/vite-builder": "14.481.0",
+    "@genesislcap/webpack-builder": "14.481.0",
     "@types/json-schema": "^7.0.11",
     "@types/papaparse": "^5.3.14"
   },
@@ -82,12 +82,12 @@
     }
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.480.0",
-    "@genesislcap/foundation-criteria": "14.480.0",
-    "@genesislcap/foundation-logger": "14.480.0",
-    "@genesislcap/foundation-notifications": "14.480.0",
-    "@genesislcap/foundation-ui": "14.480.0",
-    "@genesislcap/foundation-utils": "14.480.0",
+    "@genesislcap/foundation-comms": "14.481.0",
+    "@genesislcap/foundation-criteria": "14.481.0",
+    "@genesislcap/foundation-logger": "14.481.0",
+    "@genesislcap/foundation-notifications": "14.481.0",
+    "@genesislcap/foundation-ui": "14.481.0",
+    "@genesislcap/foundation-utils": "14.481.0",
     "@json-schema-tools/dereferencer": "^1.6.1",
     "@jsonforms/core": "^3.2.1",
     "@microsoft/fast-components": "2.30.6",
@@ -109,5 +109,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "6d2bc60f9700ab9f5a6d8c1834baebbd66ae5e6b"
+  "gitHead": "b04758f893b431ad94aa651341b27e85d6d5bdbc"
 }