@patternfly/pfe-core 2.0.0-rc.1 → 2.0.0

package/controllers/internals-controller.d.ts

@@ -45,8 +45,14 @@ export declare class InternalsController implements ReactiveController, ARIAMixi
     /** True when the control is disabled via it's containing fieldset element */
     get formDisabled(): boolean;
     static protos: WeakMap<object, any>;
+    get labels(): NodeList;
+    get validity(): ValidityState;
     constructor(host: ReactiveControllerHost & HTMLElement, options?: Partial<ARIAMixin>);
     hostConnected?(): void;
+    setFormValue(...args: Parameters<ElementInternals['setFormValue']>): void;
+    setValidity(...args: Parameters<ElementInternals['setValidity']>): void;
+    checkValidity(...args: Parameters<ElementInternals['checkValidity']>): boolean;
+    reportValidity(...args: Parameters<ElementInternals['reportValidity']>): boolean;
     submit(): void;
     reset(): void;
 }

package/controllers/internals-controller.js

@@ -8,6 +8,12 @@ export class InternalsController {
     get formDisabled() {
         return this.host.matches(':disabled') || __classPrivateFieldGet(this, _InternalsController_formDisabled, "f");
     }
+    get labels() {
+        return __classPrivateFieldGet(this, _InternalsController_internals, "f").labels;
+    }
+    get validity() {
+        return __classPrivateFieldGet(this, _InternalsController_internals, "f").validity;
+    }
     constructor(host, options) {
         this.host = host;
         _InternalsController_internals.set(this, void 0);
@@ -40,6 +46,18 @@ export class InternalsController {
             }
         }
     }
+    setFormValue(...args) {
+        return __classPrivateFieldGet(this, _InternalsController_internals, "f").setFormValue(...args);
+    }
+    setValidity(...args) {
+        return __classPrivateFieldGet(this, _InternalsController_internals, "f").setValidity(...args);
+    }
+    checkValidity(...args) {
+        return __classPrivateFieldGet(this, _InternalsController_internals, "f").checkValidity(...args);
+    }
+    reportValidity(...args) {
+        return __classPrivateFieldGet(this, _InternalsController_internals, "f").reportValidity(...args);
+    }
     submit() {
         __classPrivateFieldGet(this, _InternalsController_internals, "f").form?.requestSubmit();
     }

package/controllers/internals-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"internals-controller.js","sourceRoot":"","sources":["internals-controller.ts"],"names":[],"mappings":";;AAEA,SAAS,eAAe,CAAC,GAAW;IAClC,OAAO,GAAG,KAAK,MAAM,IAAI,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAClD,CAAC;AAED,MAAM,OAAO,mBAAmB;IA8C9B,6EAA6E;IAC7E,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,uBAAA,IAAI,yCAAc,CAAC;IAC9D,CAAC;IAID,YACS,IAA0C,EACjD,OAA4B;QADrB,SAAI,GAAJ,IAAI,CAAsC;QAZnD,iDAA6B;QAE7B,4CAAgB,KAAK,EAAC;QAapB,uBAAA,IAAI,kCAAc,IAAI,CAAC,eAAe,EAAE,MAAA,CAAC;QACzC,gCAAgC;QAChC,6EAA6E;QAC7E,MAAM,IAAI,GAAI,IAAyE,CAAC,oBAAoB,CAAC;QAC5G,IAAyE,CAAC,oBAAoB,GAAG,QAAQ,CAAC,EAAE;YAC3G,uBAAA,IAAI,qCAAiB,QAAQ,MAAA,CAAC;YAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC7B,CAAC,CAAC;QACF,8CAA8C;QAC9C,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,uBAAA,IAAI,sCAAW,CAAC,CAAC,EAAE;YACrE,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;gBACxB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE;oBAC/B,GAAG;wBACD,OAAO,uBAAA,IAAI,sCAAW,CAAC,GAAG,CAAC,CAAC;oBAC9B,CAAC;oBACD,GAAG,CAAC,KAAK;wBACP,uBAAA,IAAI,sCAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;wBAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;oBAC5B,CAAC;iBACF,CAAC,CAAC;aACJ;SACF;QAED,KAAK,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE;YACtD,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;gBACxB,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;aACjB;SACF;IACH,CAAC;IAID,MAAM;QACJ,uBAAA,IAAI,sCAAW,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,KAAK;QACH,uBAAA,IAAI,sCAAW,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChC,CAAC;;;AA5CM,0BAAM,GAAG,IAAI,OAAO,EAAE,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nfunction isARIAMixinProp(key: string): key is keyof ARIAMixin {\n  return key === 'role' || key.startsWith('aria');\n}\n\nexport class InternalsController implements ReactiveController, ARIAMixin {\n  declare role: ARIAMixin['role'];\n  declare ariaAtomic: ARIAMixin['ariaAtomic'];\n  declare ariaAutoComplete: ARIAMixin['ariaAutoComplete'];\n  declare ariaBusy: ARIAMixin['ariaBusy'];\n  declare ariaChecked: ARIAMixin['ariaChecked'];\n  declare ariaColCount: ARIAMixin['ariaColCount'];\n  declare ariaColIndex: ARIAMixin['ariaColIndex'];\n  declare ariaColIndexText: ARIAMixin['ariaColIndexText'];\n  declare ariaColSpan: ARIAMixin['ariaColSpan'];\n  declare ariaCurrent: ARIAMixin['ariaCurrent'];\n  declare ariaDisabled: ARIAMixin['ariaDisabled'];\n  declare ariaExpanded: ARIAMixin['ariaExpanded'];\n  declare ariaHasPopup: ARIAMixin['ariaHasPopup'];\n  declare ariaHidden: ARIAMixin['ariaHidden'];\n  declare ariaInvalid: ARIAMixin['ariaInvalid'];\n  declare ariaKeyShortcuts: ARIAMixin['ariaKeyShortcuts'];\n  declare ariaLabel: ARIAMixin['ariaLabel'];\n  declare ariaLevel: ARIAMixin['ariaLevel'];\n  declare ariaLive: ARIAMixin['ariaLive'];\n  declare ariaModal: ARIAMixin['ariaModal'];\n  declare ariaMultiLine: ARIAMixin['ariaMultiLine'];\n  declare ariaMultiSelectable: ARIAMixin['ariaMultiSelectable'];\n  declare ariaOrientation: ARIAMixin['ariaOrientation'];\n  declare ariaPlaceholder: ARIAMixin['ariaPlaceholder'];\n  declare ariaPosInSet: ARIAMixin['ariaPosInSet'];\n  declare ariaPressed: ARIAMixin['ariaPressed'];\n  declare ariaReadOnly: ARIAMixin['ariaReadOnly'];\n  declare ariaRequired: ARIAMixin['ariaRequired'];\n  declare ariaRoleDescription: ARIAMixin['ariaRoleDescription'];\n  declare ariaRowCount: ARIAMixin['ariaRowCount'];\n  declare ariaRowIndex: ARIAMixin['ariaRowIndex'];\n  declare ariaRowIndexText: ARIAMixin['ariaRowIndexText'];\n  declare ariaRowSpan: ARIAMixin['ariaRowSpan'];\n  declare ariaSelected: ARIAMixin['ariaSelected'];\n  declare ariaSetSize: ARIAMixin['ariaSetSize'];\n  declare ariaSort: ARIAMixin['ariaSort'];\n  declare ariaValueMax: ARIAMixin['ariaValueMax'];\n  declare ariaValueMin: ARIAMixin['ariaValueMin'];\n  declare ariaValueNow: ARIAMixin['ariaValueNow'];\n  declare ariaValueText: ARIAMixin['ariaValueText'];\n\n  #internals: ElementInternals;\n\n  #formDisabled = false;\n\n  /** True when the control is disabled via it's containing fieldset element */\n  get formDisabled() {\n    return this.host.matches(':disabled') || this.#formDisabled;\n  }\n\n  static protos = new WeakMap();\n\n  constructor(\n    public host: ReactiveControllerHost & HTMLElement,\n    options?: Partial<ARIAMixin>\n  ) {\n    this.#internals = host.attachInternals();\n    // We need to polyfill :disabled\n    // see https://github.com/calebdwilliams/element-internals-polyfill/issues/88\n    const orig = (host as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback;\n    (host as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback = disabled => {\n      this.#formDisabled = disabled;\n      orig?.call(host, disabled);\n    };\n    // proxy the internals object's aria prototype\n    for (const key of Object.keys(Object.getPrototypeOf(this.#internals))) {\n      if (isARIAMixinProp(key)) {\n        Object.defineProperty(this, key, {\n          get() {\n            return this.#internals[key];\n          },\n          set(value) {\n            this.#internals[key] = value;\n            this.host.requestUpdate();\n          }\n        });\n      }\n    }\n\n    for (const [key, val] of Object.entries(options ?? {})) {\n      if (isARIAMixinProp(key)) {\n        this[key] = val;\n      }\n    }\n  }\n\n  hostConnected?(): void\n\n  submit() {\n    this.#internals.form?.requestSubmit();\n  }\n\n  reset() {\n    this.#internals.form?.reset();\n  }\n}\n"]}
+{"version":3,"file":"internals-controller.js","sourceRoot":"","sources":["internals-controller.ts"],"names":[],"mappings":";;AAEA,SAAS,eAAe,CAAC,GAAW;IAClC,OAAO,GAAG,KAAK,MAAM,IAAI,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;AAClD,CAAC;AAED,MAAM,OAAO,mBAAmB;IA8C9B,6EAA6E;IAC7E,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,uBAAA,IAAI,yCAAc,CAAC;IAC9D,CAAC;IAID,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,sCAAW,CAAC,MAAM,CAAC;IAChC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,uBAAA,IAAI,sCAAW,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,YACS,IAA0C,EACjD,OAA4B;QADrB,SAAI,GAAJ,IAAI,CAAsC;QApBnD,iDAA6B;QAE7B,4CAAgB,KAAK,EAAC;QAqBpB,uBAAA,IAAI,kCAAc,IAAI,CAAC,eAAe,EAAE,MAAA,CAAC;QACzC,gCAAgC;QAChC,6EAA6E;QAC7E,MAAM,IAAI,GAAI,IAAyE,CAAC,oBAAoB,CAAC;QAC5G,IAAyE,CAAC,oBAAoB,GAAG,QAAQ,CAAC,EAAE;YAC3G,uBAAA,IAAI,qCAAiB,QAAQ,MAAA,CAAC;YAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC7B,CAAC,CAAC;QACF,8CAA8C;QAC9C,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,uBAAA,IAAI,sCAAW,CAAC,CAAC,EAAE;YACrE,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;gBACxB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE;oBAC/B,GAAG;wBACD,OAAO,uBAAA,IAAI,sCAAW,CAAC,GAAG,CAAC,CAAC;oBAC9B,CAAC;oBACD,GAAG,CAAC,KAAK;wBACP,uBAAA,IAAI,sCAAW,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;wBAC7B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;oBAC5B,CAAC;iBACF,CAAC,CAAC;aACJ;SACF;QAED,KAAK,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,EAAE;YACtD,IAAI,eAAe,CAAC,GAAG,CAAC,EAAE;gBACxB,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;aACjB;SACF;IACH,CAAC;IAID,YAAY,CAAC,GAAG,IAAkD;QAChE,OAAO,uBAAA,IAAI,sCAAW,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/C,CAAC;IAED,WAAW,CAAC,GAAG,IAAiD;QAC9D,OAAO,uBAAA,IAAI,sCAAW,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,aAAa,CAAC,GAAG,IAAmD;QAClE,OAAO,uBAAA,IAAI,sCAAW,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;IAChD,CAAC;IAED,cAAc,CAAC,GAAG,IAAoD;QACpE,OAAO,uBAAA,IAAI,sCAAW,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,uBAAA,IAAI,sCAAW,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,KAAK;QACH,uBAAA,IAAI,sCAAW,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;IAChC,CAAC;;;AApEM,0BAAM,GAAG,IAAI,OAAO,EAAE,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nfunction isARIAMixinProp(key: string): key is keyof ARIAMixin {\n  return key === 'role' || key.startsWith('aria');\n}\n\nexport class InternalsController implements ReactiveController, ARIAMixin {\n  declare role: ARIAMixin['role'];\n  declare ariaAtomic: ARIAMixin['ariaAtomic'];\n  declare ariaAutoComplete: ARIAMixin['ariaAutoComplete'];\n  declare ariaBusy: ARIAMixin['ariaBusy'];\n  declare ariaChecked: ARIAMixin['ariaChecked'];\n  declare ariaColCount: ARIAMixin['ariaColCount'];\n  declare ariaColIndex: ARIAMixin['ariaColIndex'];\n  declare ariaColIndexText: ARIAMixin['ariaColIndexText'];\n  declare ariaColSpan: ARIAMixin['ariaColSpan'];\n  declare ariaCurrent: ARIAMixin['ariaCurrent'];\n  declare ariaDisabled: ARIAMixin['ariaDisabled'];\n  declare ariaExpanded: ARIAMixin['ariaExpanded'];\n  declare ariaHasPopup: ARIAMixin['ariaHasPopup'];\n  declare ariaHidden: ARIAMixin['ariaHidden'];\n  declare ariaInvalid: ARIAMixin['ariaInvalid'];\n  declare ariaKeyShortcuts: ARIAMixin['ariaKeyShortcuts'];\n  declare ariaLabel: ARIAMixin['ariaLabel'];\n  declare ariaLevel: ARIAMixin['ariaLevel'];\n  declare ariaLive: ARIAMixin['ariaLive'];\n  declare ariaModal: ARIAMixin['ariaModal'];\n  declare ariaMultiLine: ARIAMixin['ariaMultiLine'];\n  declare ariaMultiSelectable: ARIAMixin['ariaMultiSelectable'];\n  declare ariaOrientation: ARIAMixin['ariaOrientation'];\n  declare ariaPlaceholder: ARIAMixin['ariaPlaceholder'];\n  declare ariaPosInSet: ARIAMixin['ariaPosInSet'];\n  declare ariaPressed: ARIAMixin['ariaPressed'];\n  declare ariaReadOnly: ARIAMixin['ariaReadOnly'];\n  declare ariaRequired: ARIAMixin['ariaRequired'];\n  declare ariaRoleDescription: ARIAMixin['ariaRoleDescription'];\n  declare ariaRowCount: ARIAMixin['ariaRowCount'];\n  declare ariaRowIndex: ARIAMixin['ariaRowIndex'];\n  declare ariaRowIndexText: ARIAMixin['ariaRowIndexText'];\n  declare ariaRowSpan: ARIAMixin['ariaRowSpan'];\n  declare ariaSelected: ARIAMixin['ariaSelected'];\n  declare ariaSetSize: ARIAMixin['ariaSetSize'];\n  declare ariaSort: ARIAMixin['ariaSort'];\n  declare ariaValueMax: ARIAMixin['ariaValueMax'];\n  declare ariaValueMin: ARIAMixin['ariaValueMin'];\n  declare ariaValueNow: ARIAMixin['ariaValueNow'];\n  declare ariaValueText: ARIAMixin['ariaValueText'];\n\n  #internals: ElementInternals;\n\n  #formDisabled = false;\n\n  /** True when the control is disabled via it's containing fieldset element */\n  get formDisabled() {\n    return this.host.matches(':disabled') || this.#formDisabled;\n  }\n\n  static protos = new WeakMap();\n\n  get labels() {\n    return this.#internals.labels;\n  }\n\n  get validity() {\n    return this.#internals.validity;\n  }\n\n  constructor(\n    public host: ReactiveControllerHost & HTMLElement,\n    options?: Partial<ARIAMixin>\n  ) {\n    this.#internals = host.attachInternals();\n    // We need to polyfill :disabled\n    // see https://github.com/calebdwilliams/element-internals-polyfill/issues/88\n    const orig = (host as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback;\n    (host as HTMLElement & { formDisabledCallback?(disabled: boolean): void }).formDisabledCallback = disabled => {\n      this.#formDisabled = disabled;\n      orig?.call(host, disabled);\n    };\n    // proxy the internals object's aria prototype\n    for (const key of Object.keys(Object.getPrototypeOf(this.#internals))) {\n      if (isARIAMixinProp(key)) {\n        Object.defineProperty(this, key, {\n          get() {\n            return this.#internals[key];\n          },\n          set(value) {\n            this.#internals[key] = value;\n            this.host.requestUpdate();\n          }\n        });\n      }\n    }\n\n    for (const [key, val] of Object.entries(options ?? {})) {\n      if (isARIAMixinProp(key)) {\n        this[key] = val;\n      }\n    }\n  }\n\n  hostConnected?(): void\n\n  setFormValue(...args: Parameters<ElementInternals['setFormValue']>) {\n    return this.#internals.setFormValue(...args);\n  }\n\n  setValidity(...args: Parameters<ElementInternals['setValidity']>) {\n    return this.#internals.setValidity(...args);\n  }\n\n  checkValidity(...args: Parameters<ElementInternals['checkValidity']>) {\n    return this.#internals.checkValidity(...args);\n  }\n\n  reportValidity(...args: Parameters<ElementInternals['reportValidity']>) {\n    return this.#internals.reportValidity(...args);\n  }\n\n  submit() {\n    this.#internals.form?.requestSubmit();\n  }\n\n  reset() {\n    this.#internals.form?.reset();\n  }\n}\n"]}

package/controllers/overflow-controller.d.ts

@@ -0,0 +1,21 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export interface Options {
+    hideOverflowButtons?: boolean;
+}
+export declare class OverflowController implements ReactiveController {
+    #private;
+    host: ReactiveControllerHost & Element;
+    private options?;
+    showScrollButtons: boolean;
+    overflowLeft: boolean;
+    overflowRight: boolean;
+    get firstItem(): HTMLElement | undefined;
+    get lastItem(): HTMLElement | undefined;
+    constructor(host: ReactiveControllerHost & Element, options?: Options | undefined);
+    init(container: HTMLElement, items: HTMLElement[]): void;
+    onScroll: () => void;
+    scrollLeft(): void;
+    scrollRight(): void;
+    update(): void;
+    hostConnected(): void;
+}

package/controllers/overflow-controller.js

@@ -0,0 +1,91 @@
+var _OverflowController_instances, _OverflowController_container, _OverflowController_items, _OverflowController_scrollTimeoutDelay, _OverflowController_scrollTimeout, _OverflowController_hideOverflowButtons, _OverflowController_setOverflowState;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+import { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';
+export class OverflowController {
+    get firstItem() {
+        return __classPrivateFieldGet(this, _OverflowController_items, "f").at(0);
+    }
+    get lastItem() {
+        return __classPrivateFieldGet(this, _OverflowController_items, "f").at(-1);
+    }
+    constructor(host, options) {
+        this.host = host;
+        this.options = options;
+        _OverflowController_instances.add(this);
+        /** Overflow container */
+        _OverflowController_container.set(this, void 0);
+        /** Children that can overflow */
+        _OverflowController_items.set(this, []);
+        _OverflowController_scrollTimeoutDelay.set(this, 0);
+        _OverflowController_scrollTimeout.set(this, void 0);
+        /** Default state */
+        _OverflowController_hideOverflowButtons.set(this, false);
+        this.showScrollButtons = false;
+        this.overflowLeft = false;
+        this.overflowRight = false;
+        this.onScroll = () => {
+            clearTimeout(__classPrivateFieldGet(this, _OverflowController_scrollTimeout, "f"));
+            __classPrivateFieldSet(this, _OverflowController_scrollTimeout, setTimeout(() => __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this), __classPrivateFieldGet(this, _OverflowController_scrollTimeoutDelay, "f")), "f");
+        };
+        this.host.addController(this);
+        if (options?.hideOverflowButtons) {
+            __classPrivateFieldSet(this, _OverflowController_hideOverflowButtons, options?.hideOverflowButtons, "f");
+        }
+    }
+    init(container, items) {
+        __classPrivateFieldSet(this, _OverflowController_container, container, "f");
+        // convert HTMLCollection to HTMLElement[]
+        __classPrivateFieldSet(this, _OverflowController_items, items, "f");
+    }
+    scrollLeft() {
+        if (!__classPrivateFieldGet(this, _OverflowController_container, "f")) {
+            return;
+        }
+        let firstElementInView;
+        let lastElementOutOfView;
+        for (let i = 0; i < __classPrivateFieldGet(this, _OverflowController_items, "f").length && !firstElementInView; i++) {
+            if (isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), __classPrivateFieldGet(this, _OverflowController_items, "f")[i], false)) {
+                firstElementInView = __classPrivateFieldGet(this, _OverflowController_items, "f")[i];
+                lastElementOutOfView = __classPrivateFieldGet(this, _OverflowController_items, "f")[i - 1];
+            }
+        }
+        if (lastElementOutOfView) {
+            __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft -= lastElementOutOfView.scrollWidth;
+        }
+        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+    }
+    scrollRight() {
+        if (!__classPrivateFieldGet(this, _OverflowController_container, "f")) {
+            return;
+        }
+        let lastElementInView;
+        let firstElementOutOfView;
+        for (let i = __classPrivateFieldGet(this, _OverflowController_items, "f").length - 1; i >= 0 && !lastElementInView; i--) {
+            if (isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), __classPrivateFieldGet(this, _OverflowController_items, "f")[i], false)) {
+                lastElementInView = __classPrivateFieldGet(this, _OverflowController_items, "f")[i];
+                firstElementOutOfView = __classPrivateFieldGet(this, _OverflowController_items, "f")[i + 1];
+            }
+        }
+        if (firstElementOutOfView) {
+            __classPrivateFieldGet(this, _OverflowController_container, "f").scrollLeft += firstElementOutOfView.scrollWidth;
+        }
+        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+    }
+    update() {
+        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+    }
+    hostConnected() {
+        this.onScroll();
+        __classPrivateFieldGet(this, _OverflowController_instances, "m", _OverflowController_setOverflowState).call(this);
+    }
+}
+_OverflowController_container = new WeakMap(), _OverflowController_items = new WeakMap(), _OverflowController_scrollTimeoutDelay = new WeakMap(), _OverflowController_scrollTimeout = new WeakMap(), _OverflowController_hideOverflowButtons = new WeakMap(), _OverflowController_instances = new WeakSet(), _OverflowController_setOverflowState = function _OverflowController_setOverflowState() {
+    if (!this.firstItem || !this.lastItem || !__classPrivateFieldGet(this, _OverflowController_container, "f")) {
+        return;
+    }
+    this.overflowLeft = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") && !isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), this.firstItem);
+    this.overflowRight = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") && !isElementInView(__classPrivateFieldGet(this, _OverflowController_container, "f"), this.lastItem);
+    this.showScrollButtons = !__classPrivateFieldGet(this, _OverflowController_hideOverflowButtons, "f") && (this.overflowLeft || this.overflowRight);
+    this.host.requestUpdate();
+};
+//# sourceMappingURL=overflow-controller.js.map

package/controllers/overflow-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-controller.js","sourceRoot":"","sources":["overflow-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nexport interface Options {\n  hideOverflowButtons?: boolean;\n}\n\nexport class OverflowController implements ReactiveController {\n  /** Overflow container */\n  #container?: HTMLElement;\n  /** Children that can overflow */\n  #items: HTMLElement[] = [];\n\n  #scrollTimeoutDelay = 0;\n  #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n  /** Default state */\n  #hideOverflowButtons = false;\n  showScrollButtons = false;\n  overflowLeft = false;\n  overflowRight = false;\n\n  get firstItem(): HTMLElement | undefined {\n    return this.#items.at(0);\n  }\n\n  get lastItem(): HTMLElement | undefined {\n    return this.#items.at(-1);\n  }\n\n  constructor(public host: ReactiveControllerHost & Element, private options?: Options) {\n    this.host.addController(this);\n    if (options?.hideOverflowButtons) {\n      this.#hideOverflowButtons = options?.hideOverflowButtons;\n    }\n  }\n\n  #setOverflowState(): void {\n    if (!this.firstItem || !this.lastItem || !this.#container) {\n      return;\n    }\n    this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);\n    this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);\n    this.showScrollButtons = !this.#hideOverflowButtons && (this.overflowLeft || this.overflowRight);\n    this.host.requestUpdate();\n  }\n\n  init(container: HTMLElement, items: HTMLElement[]) {\n    this.#container = container;\n    // convert HTMLCollection to HTMLElement[]\n    this.#items = items;\n  }\n\n  onScroll = () => {\n    clearTimeout(this.#scrollTimeout);\n    this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), this.#scrollTimeoutDelay);\n  };\n\n  scrollLeft() {\n    if (!this.#container) {\n      return;\n    }\n    let firstElementInView: HTMLElement | undefined;\n    let lastElementOutOfView: HTMLElement | undefined;\n    for (let i = 0; i < this.#items.length && !firstElementInView; i++) {\n      if (isElementInView(this.#container, this.#items[i] as HTMLElement, false)) {\n        firstElementInView = this.#items[i];\n        lastElementOutOfView = this.#items[i - 1];\n      }\n    }\n    if (lastElementOutOfView) {\n      this.#container.scrollLeft -= lastElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n\n  scrollRight() {\n    if (!this.#container) {\n      return;\n    }\n    let lastElementInView: HTMLElement | undefined;\n    let firstElementOutOfView: HTMLElement | undefined;\n    for (let i = this.#items.length - 1; i >= 0 && !lastElementInView; i--) {\n      if (isElementInView(this.#container, this.#items[i] as HTMLElement, false)) {\n        lastElementInView = this.#items[i];\n        firstElementOutOfView = this.#items[i + 1];\n      }\n    }\n    if (firstElementOutOfView) {\n      this.#container.scrollLeft += firstElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n\n  update() {\n    this.#setOverflowState();\n  }\n\n  hostConnected(): void {\n    this.onScroll();\n    this.#setOverflowState();\n  }\n}\n"]}

package/custom-elements.json

@@ -1839,6 +1839,20 @@
               },
               "static": true
             },
+            {
+              "kind": "field",
+              "name": "labels",
+              "type": {
+                "text": "NodeList"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              }
+            },
             {
               "kind": "method",
               "name": "hostConnected",
@@ -1848,6 +1862,74 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "setFormValue",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "Parameters<ElementInternals['setFormValue']>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "Parameters<ElementInternals['setValidity']>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "Parameters<ElementInternals['checkValidity']>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "Parameters<ElementInternals['reportValidity']>"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "submit",
@@ -1894,6 +1976,50 @@
               "name": "formDisabled",
               "description": "True when the control is disabled via it's containing fieldset element"
             },
+            {
+              "kind": "field",
+              "name": "labels"
+            },
+            {
+              "kind": "field",
+              "name": "validity"
+            },
+            {
+              "kind": "method",
+              "name": "setFormValue",
+              "parameters": [
+                {
+                  "name": "args"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "parameters": [
+                {
+                  "name": "args"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "parameters": [
+                {
+                  "name": "args"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "parameters": [
+                {
+                  "name": "args"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "submit"
@@ -2242,6 +2368,14 @@
               "static": true,
               "default": "new WeakMap()"
             },
+            {
+              "kind": "field",
+              "name": "labels"
+            },
+            {
+              "kind": "field",
+              "name": "validity"
+            },
             {
               "kind": "method",
               "name": "hostConnected",
@@ -2251,6 +2385,54 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "setFormValue",
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "Parameters<ElementInternals['setFormValue']>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "Parameters<ElementInternals['setValidity']>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "Parameters<ElementInternals['checkValidity']>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "parameters": [
+                {
+                  "name": "args",
+                  "type": {
+                    "text": "Parameters<ElementInternals['reportValidity']>"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "submit"
@@ -2756,44 +2938,403 @@
             },
             {
               "kind": "method",
-              "name": "error",
-              "static": true,
+              "name": "error",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "msgs"
+                }
+              ],
+              "description": "A console error wrapper which formats your output with useful debugging information.\nFor use inside a component's function."
+            },
+            {
+              "kind": "method",
+              "name": "log",
+              "parameters": [
+                {
+                  "name": "msgs"
+                }
+              ],
+              "description": "Local logging that outputs the tag name as a prefix automatically"
+            },
+            {
+              "kind": "method",
+              "name": "warn",
+              "parameters": [
+                {
+                  "name": "msgs"
+                }
+              ],
+              "description": "Local warning wrapper that outputs the tag name as a prefix automatically.\nFor use inside a component's function."
+            },
+            {
+              "kind": "method",
+              "name": "error",
+              "parameters": [
+                {
+                  "name": "msgs"
+                }
+              ],
+              "description": "Local error wrapper that outputs the tag name as a prefix automatically.\nFor use inside a component's function."
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "default": "host"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Logger",
+          "declaration": {
+            "name": "Logger",
+            "module": "controllers/logger.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "controllers/logger.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Logger",
+          "members": [
+            {
+              "kind": "field",
+              "name": "logDebug",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true
+            },
+            {
+              "kind": "field",
+              "name": "instances",
+              "type": {
+                "text": "WeakMap<HTMLElement, Logger>"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "new WeakMap()"
+            },
+            {
+              "kind": "field",
+              "name": "prefix",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "debugLog",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "preference",
+                  "default": "null"
+                }
+              ],
+              "description": "A boolean value that indicates if the logging should be printed to the console; used for debugging.\nFor use in a JS file or script tag; can also be added in the constructor of a component during development."
+            },
+            {
+              "kind": "method",
+              "name": "log",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "msgs",
+                  "type": {
+                    "text": "unknown[]"
+                  }
+                }
+              ],
+              "description": "A logging wrapper which checks the debugLog boolean and prints to the console if true."
+            },
+            {
+              "kind": "method",
+              "name": "warn",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "msgs",
+                  "type": {
+                    "text": "unknown[]"
+                  }
+                }
+              ],
+              "description": "A console warning wrapper which formats your output with useful debugging information."
+            },
+            {
+              "kind": "method",
+              "name": "error",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "msgs",
+                  "type": {
+                    "text": "unknown[]"
+                  }
+                }
+              ],
+              "description": "A console error wrapper which formats your output with useful debugging information.\nFor use inside a component's function."
+            },
+            {
+              "kind": "method",
+              "name": "log",
+              "parameters": [
+                {
+                  "name": "msgs",
+                  "type": {
+                    "text": "unknown[]"
+                  }
+                }
+              ],
+              "description": "Local logging that outputs the tag name as a prefix automatically"
+            },
+            {
+              "kind": "method",
+              "name": "warn",
+              "parameters": [
+                {
+                  "name": "msgs",
+                  "type": {
+                    "text": "unknown[]"
+                  }
+                }
+              ],
+              "description": "Local warning wrapper that outputs the tag name as a prefix automatically.\nFor use inside a component's function."
+            },
+            {
+              "kind": "method",
+              "name": "error",
+              "parameters": [
+                {
+                  "name": "msgs",
+                  "type": {
+                    "text": "unknown[]"
+                  }
+                }
+              ],
+              "description": "Local error wrapper that outputs the tag name as a prefix automatically.\nFor use inside a component's function."
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected"
+            },
+            {
+              "kind": "field",
+              "type": {
+                "text": "ReactiveElement",
+                "name": "ReactiveElement",
+                "package": "lit"
+              },
+              "name": "host",
+              "privacy": "private"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Logger",
+          "declaration": {
+            "name": "Logger",
+            "module": "controllers/logger.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "controllers/overflow-controller.d.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "OverflowController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#private",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "host",
+              "type": {
+                "text": "ReactiveControllerHost & Element"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "showScrollButtons",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "overflowLeft",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "overflowRight",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "firstItem",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "lastItem",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "init",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "container",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "HTMLElement[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "onScroll",
+              "type": {
+                "text": "() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "scrollLeft",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "scrollRight",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "update",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "OverflowController",
+          "declaration": {
+            "name": "OverflowController",
+            "module": "controllers/overflow-controller.d.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "controllers/overflow-controller.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "OverflowController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "firstItem"
+            },
+            {
+              "kind": "field",
+              "name": "lastItem"
+            },
+            {
+              "kind": "method",
+              "name": "init",
               "parameters": [
                 {
-                  "name": "msgs"
+                  "name": "container"
+                },
+                {
+                  "name": "items"
                 }
-              ],
-              "description": "A console error wrapper which formats your output with useful debugging information.\nFor use inside a component's function."
+              ]
             },
             {
               "kind": "method",
-              "name": "log",
-              "parameters": [
-                {
-                  "name": "msgs"
-                }
-              ],
-              "description": "Local logging that outputs the tag name as a prefix automatically"
+              "name": "scrollLeft"
             },
             {
               "kind": "method",
-              "name": "warn",
-              "parameters": [
-                {
-                  "name": "msgs"
-                }
-              ],
-              "description": "Local warning wrapper that outputs the tag name as a prefix automatically.\nFor use inside a component's function."
+              "name": "scrollRight"
             },
             {
               "kind": "method",
-              "name": "error",
-              "parameters": [
-                {
-                  "name": "msgs"
-                }
-              ],
-              "description": "Local error wrapper that outputs the tag name as a prefix automatically.\nFor use inside a component's function."
+              "name": "update"
             },
             {
               "kind": "method",
@@ -2803,6 +3344,39 @@
               "kind": "field",
               "name": "host",
               "default": "host"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "default": "options"
+            },
+            {
+              "kind": "field",
+              "name": "showScrollButtons",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "overflowLeft",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "overflowRight",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "onScroll"
             }
           ]
         }
@@ -2810,152 +3384,175 @@
       "exports": [
         {
           "kind": "js",
-          "name": "Logger",
+          "name": "OverflowController",
           "declaration": {
-            "name": "Logger",
-            "module": "controllers/logger.js"
+            "name": "OverflowController",
+            "module": "controllers/overflow-controller.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "controllers/logger.ts",
+      "path": "controllers/overflow-controller.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "Logger",
+          "name": "OverflowController",
           "members": [
             {
               "kind": "field",
-              "name": "logDebug",
+              "name": "#container",
+              "privacy": "private",
               "type": {
-                "text": "boolean"
+                "text": "HTMLElement | undefined"
               },
+              "description": "Overflow container"
+            },
+            {
+              "kind": "field",
+              "name": "#items",
               "privacy": "private",
-              "static": true
+              "type": {
+                "text": "HTMLElement[]"
+              },
+              "default": "[]",
+              "description": "Children that can overflow"
             },
             {
               "kind": "field",
-              "name": "instances",
+              "name": "#scrollTimeoutDelay",
+              "privacy": "private",
               "type": {
-                "text": "WeakMap<HTMLElement, Logger>"
+                "text": "number"
               },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "#scrollTimeout",
               "privacy": "private",
-              "static": true,
-              "default": "new WeakMap()"
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "prefix",
-              "privacy": "private"
+              "name": "#hideOverflowButtons",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Default state"
             },
             {
-              "kind": "method",
-              "name": "debugLog",
-              "static": true,
-              "parameters": [
-                {
-                  "name": "preference",
-                  "default": "null"
-                }
-              ],
-              "description": "A boolean value that indicates if the logging should be printed to the console; used for debugging.\nFor use in a JS file or script tag; can also be added in the constructor of a component during development."
+              "kind": "field",
+              "name": "showScrollButtons",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "overflowLeft",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "overflowRight",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "firstItem",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "lastItem",
+              "type": {
+                "text": "HTMLElement | undefined"
+              }
             },
             {
               "kind": "method",
-              "name": "log",
-              "static": true,
-              "parameters": [
-                {
-                  "name": "msgs",
-                  "type": {
-                    "text": "unknown[]"
-                  }
+              "name": "#setOverflowState",
+              "return": {
+                "type": {
+                  "text": "void"
                 }
-              ],
-              "description": "A logging wrapper which checks the debugLog boolean and prints to the console if true."
+              }
             },
             {
               "kind": "method",
-              "name": "warn",
-              "static": true,
+              "name": "init",
               "parameters": [
                 {
-                  "name": "msgs",
+                  "name": "container",
                   "type": {
-                    "text": "unknown[]"
+                    "text": "HTMLElement"
                   }
-                }
-              ],
-              "description": "A console warning wrapper which formats your output with useful debugging information."
-            },
-            {
-              "kind": "method",
-              "name": "error",
-              "static": true,
-              "parameters": [
+                },
                 {
-                  "name": "msgs",
+                  "name": "items",
                   "type": {
-                    "text": "unknown[]"
+                    "text": "HTMLElement[]"
                   }
                 }
-              ],
-              "description": "A console error wrapper which formats your output with useful debugging information.\nFor use inside a component's function."
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "onScroll"
             },
             {
               "kind": "method",
-              "name": "log",
-              "parameters": [
-                {
-                  "name": "msgs",
-                  "type": {
-                    "text": "unknown[]"
-                  }
-                }
-              ],
-              "description": "Local logging that outputs the tag name as a prefix automatically"
+              "name": "scrollLeft"
             },
             {
               "kind": "method",
-              "name": "warn",
-              "parameters": [
-                {
-                  "name": "msgs",
-                  "type": {
-                    "text": "unknown[]"
-                  }
-                }
-              ],
-              "description": "Local warning wrapper that outputs the tag name as a prefix automatically.\nFor use inside a component's function."
+              "name": "scrollRight"
             },
             {
               "kind": "method",
-              "name": "error",
-              "parameters": [
-                {
-                  "name": "msgs",
-                  "type": {
-                    "text": "unknown[]"
-                  }
-                }
-              ],
-              "description": "Local error wrapper that outputs the tag name as a prefix automatically.\nFor use inside a component's function."
+              "name": "update"
             },
             {
               "kind": "method",
-              "name": "hostConnected"
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "field",
               "type": {
-                "text": "ReactiveElement",
-                "name": "ReactiveElement",
-                "package": "lit"
+                "text": "ReactiveControllerHost & Element",
+                "name": "ReactiveControllerHost & Element"
               },
               "name": "host",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "type": {
+                "text": "Options",
+                "name": "Options"
+              },
+              "name": "options",
               "privacy": "private"
             }
           ]
@@ -2964,10 +3561,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "Logger",
+          "name": "OverflowController",
           "declaration": {
-            "name": "Logger",
-            "module": "controllers/logger.ts"
+            "name": "OverflowController",
+            "module": "controllers/overflow-controller.ts"
           }
         }
       ]
@@ -6117,21 +6714,33 @@
           "parameters": [
             {
               "name": "container",
-              "description": "The container to check if the element is in view of."
+              "description": "The container to check if the element is in view of.",
+              "type": {
+                "text": "HTMLElement"
+              }
             },
             {
               "name": "element",
-              "description": "The element to check if it is view"
+              "description": "The element to check if it is view",
+              "type": {
+                "text": "HTMLElement"
+              }
             },
             {
               "name": "partial",
               "default": "false",
-              "description": "true if partial view is allowed"
+              "description": "true if partial view is allowed",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
               "name": "strict",
               "default": "false",
-              "description": "true if strict mode is set, never consider the container width and element width"
+              "description": "true if strict mode is set, never consider the container width and element width",
+              "type": {
+                "text": "boolean"
+              }
             }
           ],
           "description": "This function returns whether or not an element is within the viewable area of a container. If partial is true,\nthen this function will return true even if only part of the element is in view.",
@@ -6183,12 +6792,18 @@
             {
               "name": "partial",
               "default": "false",
-              "description": "true if partial view is allowed"
+              "description": "true if partial view is allowed",
+              "type": {
+                "text": "boolean"
+              }
             },
             {
               "name": "strict",
               "default": "false",
-              "description": "true if strict mode is set, never consider the container width and element width"
+              "description": "true if strict mode is set, never consider the container width and element width",
+              "type": {
+                "text": "boolean"
+              }
             }
           ],
           "description": "This function returns whether or not an element is within the viewable area of a container. If partial is true,\nthen this function will return true even if only part of the element is in view."
@@ -6299,19 +6914,19 @@
     },
     {
       "kind": "javascript-module",
-      "path": "test/kitchen-sink.e2e.spec.d.ts",
+      "path": "test/kitchen-sink.e2e.d.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "test/kitchen-sink.e2e.spec.js",
+      "path": "test/kitchen-sink.e2e.js",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "test/kitchen-sink.e2e.spec.ts",
+      "path": "test/kitchen-sink.e2e.ts",
       "declarations": [],
       "exports": []
     }

package/functions/isElementInView.d.ts

@@ -2,10 +2,10 @@
  * This function returns whether or not an element is within the viewable area of a container. If partial is true,
  * then this function will return true even if only part of the element is in view.
  *
- * @param container  The container to check if the element is in view of.
- * @param element    The element to check if it is view
- * @param partial   true if partial view is allowed
- * @param strict    true if strict mode is set, never consider the container width and element width
+ * @param {HTMLElement} container  The container to check if the element is in view of.
+ * @param {HTMLElement} element    The element to check if it is view
+ * @param {boolean} partial   true if partial view is allowed
+ * @param {boolean} strict    true if strict mode is set, never consider the container width and element width
  *
  * @returns True if the component is in View.
  */

package/functions/isElementInView.js

@@ -2,10 +2,10 @@
  * This function returns whether or not an element is within the viewable area of a container. If partial is true,
  * then this function will return true even if only part of the element is in view.
  *
- * @param container  The container to check if the element is in view of.
- * @param element    The element to check if it is view
- * @param partial   true if partial view is allowed
- * @param strict    true if strict mode is set, never consider the container width and element width
+ * @param {HTMLElement} container  The container to check if the element is in view of.
+ * @param {HTMLElement} element    The element to check if it is view
+ * @param {boolean} partial   true if partial view is allowed
+ * @param {boolean} strict    true if strict mode is set, never consider the container width and element width
  *
  * @returns True if the component is in View.
  */

package/functions/isElementInView.js.map

@@ -1 +1 @@
-{"version":3,"file":"isElementInView.js","sourceRoot":"","sources":["isElementInView.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAC7B,SAAsB,EACtB,OAAoB,EACpB,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,KAAK;IAEd,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE;QAC1B,OAAO,KAAK,CAAC;KACd;IACD,MAAM,eAAe,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IAC1D,MAAM,aAAa,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACtD,MAAM,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5D,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE3D,mBAAmB;IACnB,MAAM,eAAe,GACnB,iBAAiB,IAAI,mBAAmB;QACxC,kBAAkB,IAAI,oBAAoB,CAAC;IAC7C,MAAM,iBAAiB,GACrB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,IAAI,eAAe,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QACrE,CAAC,CAAC,iBAAiB,GAAG,mBAAmB,IAAI,kBAAkB,GAAG,mBAAmB,CAAC;YACpF,CAAC,kBAAkB,GAAG,oBAAoB,IAAI,iBAAiB,GAAG,oBAAoB,CAAC,CAAC,CAAC;IAE7F,iBAAiB;IACjB,OAAO,eAAe,IAAI,iBAAiB,CAAC;AAC9C,CAAC","sourcesContent":["/**\n * This function returns whether or not an element is within the viewable area of a container. If partial is true,\n * then this function will return true even if only part of the element is in view.\n *\n * @param container  The container to check if the element is in view of.\n * @param element    The element to check if it is view\n * @param partial   true if partial view is allowed\n * @param strict    true if strict mode is set, never consider the container width and element width\n *\n * @returns True if the component is in View.\n */\nexport function isElementInView(\n  container: HTMLElement,\n  element: HTMLElement,\n  partial = false,\n  strict = false\n): boolean {\n  if (!container || !element) {\n    return false;\n  }\n  const containerBounds = container.getBoundingClientRect();\n  const elementBounds = element.getBoundingClientRect();\n  const containerBoundsLeft = Math.ceil(containerBounds.left);\n  const containerBoundsRight = Math.floor(containerBounds.right);\n  const elementBoundsLeft = Math.ceil(elementBounds.left);\n  const elementBoundsRight = Math.floor(elementBounds.right);\n\n  // Check if in view\n  const isTotallyInView =\n    elementBoundsLeft >= containerBoundsLeft &&\n    elementBoundsRight <= containerBoundsRight;\n  const isPartiallyInView =\n    (partial || (!strict && containerBounds.width < elementBounds.width)) &&\n    ((elementBoundsLeft < containerBoundsLeft && elementBoundsRight > containerBoundsLeft) ||\n      (elementBoundsRight > containerBoundsRight && elementBoundsLeft < containerBoundsRight));\n\n  // Return outcome\n  return isTotallyInView || isPartiallyInView;\n}\n"]}
+{"version":3,"file":"isElementInView.js","sourceRoot":"","sources":["isElementInView.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAC7B,SAAsB,EACtB,OAAoB,EACpB,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,KAAK;IAEd,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE;QAC1B,OAAO,KAAK,CAAC;KACd;IACD,MAAM,eAAe,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IAC1D,MAAM,aAAa,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACtD,MAAM,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5D,MAAM,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE3D,mBAAmB;IACnB,MAAM,eAAe,GACnB,iBAAiB,IAAI,mBAAmB;QACxC,kBAAkB,IAAI,oBAAoB,CAAC;IAC7C,MAAM,iBAAiB,GACrB,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,IAAI,eAAe,CAAC,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;QACrE,CAAC,CAAC,iBAAiB,GAAG,mBAAmB,IAAI,kBAAkB,GAAG,mBAAmB,CAAC;YACpF,CAAC,kBAAkB,GAAG,oBAAoB,IAAI,iBAAiB,GAAG,oBAAoB,CAAC,CAAC,CAAC;IAE7F,iBAAiB;IACjB,OAAO,eAAe,IAAI,iBAAiB,CAAC;AAC9C,CAAC","sourcesContent":["/**\n * This function returns whether or not an element is within the viewable area of a container. If partial is true,\n * then this function will return true even if only part of the element is in view.\n *\n * @param {HTMLElement} container  The container to check if the element is in view of.\n * @param {HTMLElement} element    The element to check if it is view\n * @param {boolean} partial   true if partial view is allowed\n * @param {boolean} strict    true if strict mode is set, never consider the container width and element width\n *\n * @returns True if the component is in View.\n */\nexport function isElementInView(\n  container: HTMLElement,\n  element: HTMLElement,\n  partial = false,\n  strict = false\n): boolean {\n  if (!container || !element) {\n    return false;\n  }\n  const containerBounds = container.getBoundingClientRect();\n  const elementBounds = element.getBoundingClientRect();\n  const containerBoundsLeft = Math.ceil(containerBounds.left);\n  const containerBoundsRight = Math.floor(containerBounds.right);\n  const elementBoundsLeft = Math.ceil(elementBounds.left);\n  const elementBoundsRight = Math.floor(elementBounds.right);\n\n  // Check if in view\n  const isTotallyInView =\n    elementBoundsLeft >= containerBoundsLeft &&\n    elementBoundsRight <= containerBoundsRight;\n  const isPartiallyInView =\n    (partial || (!strict && containerBounds.width < elementBounds.width)) &&\n    ((elementBoundsLeft < containerBoundsLeft && elementBoundsRight > containerBoundsLeft) ||\n      (elementBoundsRight > containerBoundsRight && elementBoundsLeft < containerBoundsRight));\n\n  // Return outcome\n  return isTotallyInView || isPartiallyInView;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/pfe-core",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "license": "MIT",
   "description": "PatternFly Elements Core Library",
   "customElements": "custom-elements.json",
@@ -50,8 +50,8 @@
     "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.1.0",
-    "lit": "2.3.0"
+    "@floating-ui/dom": "^1.2.3",
+    "lit": "2.6.1"
   },
   "repository": {
     "type": "git",