@patternfly/pfe-core - npm Package Compare versions

Comparing version 2.0.0-next.14 to 2.0.0-rc.1

controllers/cascade-controller.js

@@ -1,2 +0,136 @@
-var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var h=(a,t,e,s)=>{for(var i=s>1?void 0:s?l(t,e):t,o=a.length-1,r;o>=0;o--)(r=a[o])&&(i=(s?r(t,e,i):r(i))||i);return s&&i&&p(t,e,i),i};import{bound as f}from"../decorators/bound.js";import{debounce as d}from"../functions/debounce.js";import{Logger as g}from"./logger.js";var n=class{constructor(t,e){this.host=t;this.options=e;this.mo=new MutationObserver(this.parse);this.cache=new Map;this.class=t.constructor,this.logger=new g(this.host),n.instances.set(t,this);let s=this.options?.properties??{};for(let[i,o]of Object.entries(s))this.initProp(i,o);t.addController(this),this.cascadeProperties=d(this.cascadeProperties,1)}hostUpdated(){this.cascadeProperties()}hostConnected(){this.mo.observe(this.host,{attributes:!0,childList:!0}),this.cascadeProperties()}hostDisconnected(){this.mo.disconnect()}cascadeProperties(t=this.host.children){if(this.host.isConnected){let e=this.cache.keys();if(!t)return this._cascadeAttributes(e,this.cache);for(let s of t)if(s instanceof Element){for(let i of e)if(s.matches(i)){let o=this.cache.get(i);for(let r of o??[])this._copyAttribute(r,s)}}}}initProp(t,e){for(let s of[e].flat(1/0).filter(Boolean)){let{attribute:i}=this.class.getPropertyOptions(t),o=typeof i=="string"?i:t.toLowerCase();this.cache.get(s)?this.cache.get(s)?.push(o):this.cache.set(s,[o])}}parse(t){for(let e of t??[])e.type==="childList"&&e.addedNodes.length?this.cascadeProperties(e.addedNodes):e.type==="attributes"&&this._cascadeAttributes(this.cache.keys(),this.cache)}async _copyAttribute(t,e){this.logger.log(`copying ${t} to ${e}`);let s=this.host.getAttribute(t);e.isConnected&&(s==null?e.removeAttribute(t):e.setAttribute(t,s))}_cascadeAttributes(t,e){for(let s of t)for(let i of e.get(s)??[])this._cascadeAttribute(i,s)}_cascadeAttribute(t,e){let s=[...this.host.querySelectorAll(e),...this.host.shadowRoot?.querySelectorAll(e)??[]];for(let i of s)this._copyAttribute(t,i)}},c=n;c.instances=new WeakMap,h([f],c.prototype,"parse",1);export{c as CascadeController};
-//# sourceMappingURL=cascade-controller.js.map
+import { __decorate } from "tslib";
+import { bound } from '../decorators/bound.js';
+import { debounce } from '../functions/debounce.js';
+import { Logger } from './logger.js';
+export class CascadeController {
+    constructor(host, options) {
+        this.host = host;
+        this.options = options;
+        this.mo = new MutationObserver(this.parse);
+        this.cache = new Map();
+        this.class = host.constructor;
+        this.logger = new Logger(this.host);
+        CascadeController.instances.set(host, this);
+        const properties = this.options?.properties ?? {};
+        for (const [propName, cascade] of Object.entries(properties)) {
+            this.initProp(propName, cascade);
+        }
+        host.addController(this);
+        this.cascadeProperties = debounce(this.cascadeProperties, 1);
+    }
+    hostUpdated() {
+        this.cascadeProperties();
+    }
+    hostConnected() {
+        this.mo.observe(this.host, { attributes: true, childList: true });
+        this.cascadeProperties();
+    }
+    hostDisconnected() {
+        this.mo.disconnect();
+    }
+    /**
+     * Handles the cascading of properties to nested components when new elements are added
+     * Attribute updates/additions are handled by the attribute callback
+     */
+    cascadeProperties(nodeList = this.host.children) {
+        if (this.host.isConnected) {
+            const selectors = this.cache.keys();
+            // Find out if anything in the nodeList matches any of the observed selectors for cacading properties
+            if (!nodeList) {
+                return this._cascadeAttributes(selectors, this.cache);
+            }
+            for (const node of nodeList) {
+                // if this node has a match function (i.e., it's an HTMLElement, not a text node),
+                if (node instanceof Element) {
+                    // see if it matches one of the selectors, otherwise drop it (like it's hot).
+                    for (const selector of selectors) {
+                        // console.log('_copyAttribute', name, value, el.getAttribute(name));
+                        if (node.matches(selector)) {
+                            const attrNames = this.cache.get(selector);
+                            // each selector can match multiple properties/attributes, so
+                            // copy each of them
+                            for (const attrName of attrNames ?? []) {
+                                this._copyAttribute(attrName, node);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Gets the configured attribute name for the decorated property,
+     * falling back to the lowercased property name, and caches the attribute name
+     * with it's designated child selectors for value-propagation on change
+     */
+    initProp(propName, cascade) {
+        for (const nodeItem of [cascade].flat(Infinity).filter(Boolean)) {
+            const { attribute } = this.class.getPropertyOptions(propName);
+            const attr = typeof attribute === 'string' ? attribute
+                : propName.toLowerCase();
+            // Create an object with the node as the key and an array of attributes
+            // that are to be cascaded down to it
+            if (!this.cache.get(nodeItem)) {
+                this.cache.set(nodeItem, [attr]);
+            }
+            else {
+                this.cache.get(nodeItem)?.push(attr);
+            }
+        }
+    }
+    parse(mutations) {
+        // Iterate over the mutation list, look for cascade updates
+        for (const mutation of mutations ?? []) {
+            // If a new node is added, attempt to cascade attributes to it
+            if (mutation.type === 'childList' && mutation.addedNodes.length) {
+                this.cascadeProperties(mutation.addedNodes);
+            }
+            else if (mutation.type === 'attributes') {
+                this._cascadeAttributes(this.cache.keys(), this.cache);
+            }
+        }
+    }
+    /**
+     * Copy the named attribute to a target element.
+     */
+    async _copyAttribute(name, el) {
+        this.logger.log(`copying ${name} to ${el}`);
+        const value = this.host.getAttribute(name);
+        if (el.isConnected) {
+            if (value == null) {
+                el.removeAttribute(name);
+            }
+            else {
+                el.setAttribute(name, value);
+            }
+        }
+    }
+    _cascadeAttributes(selectors, set) {
+        for (const selector of selectors) {
+            for (const attr of set.get(selector) ?? []) {
+                this._cascadeAttribute(attr, selector);
+            }
+        }
+    }
+    /**
+     * Trigger a cascade of the named attribute to any child elements that match
+     * the `to` selector.  The selector can match elements in the light DOM and
+     * shadow DOM.
+     * @param  name The name of the attribute to cascade (not necessarily the same as the property name).
+     * @param  to A CSS selector that matches the elements that should received the cascaded attribute.  The selector will be applied within `this` element's light and shadow DOM trees.
+     */
+    _cascadeAttribute(name, to) {
+        const recipients = [
+            ...this.host.querySelectorAll(to),
+            ...this.host.shadowRoot?.querySelectorAll(to) ?? [],
+        ];
+        for (const node of recipients) {
+            this._copyAttribute(name, node);
+        }
+    }
+}
+CascadeController.instances = new WeakMap();
+__decorate([
+    bound
+], CascadeController.prototype, "parse", null);
+//# sourceMappingURL=cascade-controller.js.map

controllers/css-variable-controller.js

@@ -1,2 +0,13 @@
-var e=class{constructor(t){this.host=t;this.style=window.getComputedStyle(t)}parseProperty(t){return t.substr(0,2)!=="--"?`--${t}`:t}getVariable(t){return this.style.getPropertyValue(this.parseProperty(t)).trim()||null}};export{e as CssVariableController};
-//# sourceMappingURL=css-variable-controller.js.map
+export class CssVariableController {
+    constructor(host) {
+        this.host = host;
+        this.style = window.getComputedStyle(host);
+    }
+    parseProperty(name) {
+        return name.substr(0, 2) !== '--' ? `--${name}` : name;
+    }
+    getVariable(name) {
+        return this.style.getPropertyValue(this.parseProperty(name)).trim() || null;
+    }
+}
+//# sourceMappingURL=css-variable-controller.js.map

controllers/floating-dom-controller.js

@@ -1,2 +0,115 @@
-var C=(n,t,i)=>{if(!t.has(n))throw TypeError("Cannot "+i)};var e=(n,t,i)=>(C(n,t,"read from private field"),i?i.call(n):t.get(n)),s=(n,t,i)=>{if(t.has(n))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(n):t.set(n,i)},l=(n,t,i,o)=>(C(n,t,"write to private field"),o?o.call(n,i):t.set(n,i),i),M=(n,t,i,o)=>({set _(a){l(n,t,a,i)},get _(){return e(n,t,o)}}),P=(n,t,i)=>(C(n,t,"access private method"),i);import{autoUpdate as T,computePosition as D,offset as E,shift as F,flip as U}from"@floating-ui/dom";var c,p,f,d,g,y,m,r,w,x,v,A,O,b,q=class{constructor(t,i){this.host=t;s(this,w);s(this,v);s(this,O);s(this,c,!1);s(this,p,!1);s(this,f,void 0);s(this,d,void 0);s(this,g,void 0);s(this,y,void 0);s(this,m,void 0);s(this,r,void 0);var o,a,h,u;t.addController(this),l(this,r,i),(o=e(this,r)).invoker??(o.invoker=t),(a=e(this,r)).arrow??(a.arrow=!1),(h=e(this,r)).flip??(h.flip=!0),(u=e(this,r)).shift??(u.shift=!0)}get alignment(){return e(this,g)??"center"}get anchor(){return e(this,d)??""}get open(){return e(this,c)}get placement(){return e(this,m)??"top"}get styles(){return e(this,y)??{}}hostDisconnected(){var t;(t=e(this,f))==null||t.call(this)}async show({offset:t,placement:i}={}){let o=e(this,w,x),a=e(this,v,A);if(!(!o||!a)){if(!e(this,p)){l(this,p,!0);let h=P(this,O,b).call(this,i,t);e(this,f)??l(this,f,T(o,a,()=>P(this,O,b).call(this,i,t))),await h,l(this,p,!1)}l(this,c,!0),this.host.requestUpdate()}}async hide(){var t;for(await this.host.updateComplete;e(this,p)&&!this.open;)await new Promise(requestAnimationFrame);l(this,c,!1),(t=e(this,f))==null||t.call(this),this.host.requestUpdate(),await this.host.updateComplete}};c=new WeakMap,p=new WeakMap,f=new WeakMap,d=new WeakMap,g=new WeakMap,y=new WeakMap,m=new WeakMap,r=new WeakMap,w=new WeakSet,x=function(){let{invoker:t}=e(this,r);return typeof t=="function"?t():t},v=new WeakSet,A=function(){let{content:t}=e(this,r);return typeof t=="function"?t():t},O=new WeakSet,b=async function(t="top",i){let{flip:o,padding:a,shift:h}=e(this,r),u=e(this,w,x),k=e(this,v,A);if(!u||!k)return;let{x:R,y:L,placement:S}=await D(u,k,{strategy:"absolute",placement:t,middleware:[E(i),h&&F({padding:a}),o&&U({padding:a})].filter(Boolean)});l(this,m,S),[M(this,d)._,M(this,g)._]=e(this,m).split("-")??[],l(this,y,{"--_floating-content-translate":`${R}px ${L}px`}),this.host.requestUpdate()};export{q as FloatingDOMController};
-//# sourceMappingURL=floating-dom-controller.js.map
+var _FloatingDOMController_instances, _FloatingDOMController_open, _FloatingDOMController_opening, _FloatingDOMController_cleanup, _FloatingDOMController_anchor, _FloatingDOMController_alignment, _FloatingDOMController_styles, _FloatingDOMController_placement, _FloatingDOMController_options, _FloatingDOMController_invoker_get, _FloatingDOMController_content_get, _FloatingDOMController_update;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+import { autoUpdate, computePosition, offset as offsetMiddleware, shift as shiftMiddleware, flip as flipMiddleware, } from '@floating-ui/dom';
+/**
+ * Controls floating DOM within a web component, e.g. tooltips and popovers
+ */
+export class FloatingDOMController {
+    /** The crosswise alignment of the invoker on which to display the floating DOM */
+    get alignment() {
+        return __classPrivateFieldGet(this, _FloatingDOMController_alignment, "f") ?? 'center';
+    }
+    /** The side of the invoker on which to display the floating DOM */
+    get anchor() {
+        return __classPrivateFieldGet(this, _FloatingDOMController_anchor, "f") ?? '';
+    }
+    /**
+     * When true, the floating DOM is visible
+     */
+    get open() {
+        return __classPrivateFieldGet(this, _FloatingDOMController_open, "f");
+    }
+    /** The computed placement of the floating DOM */
+    get placement() {
+        return __classPrivateFieldGet(this, _FloatingDOMController_placement, "f") ?? 'top';
+    }
+    /**
+     * Styles to apply to your element's container
+     *
+     * - `--_floating-content-translate`: translate to apply to floating content.
+     */
+    get styles() {
+        return __classPrivateFieldGet(this, _FloatingDOMController_styles, "f") ?? {};
+    }
+    constructor(host, options) {
+        var _a, _b, _c, _d;
+        this.host = host;
+        _FloatingDOMController_instances.add(this);
+        _FloatingDOMController_open.set(this, false);
+        _FloatingDOMController_opening.set(this, false);
+        _FloatingDOMController_cleanup.set(this, void 0);
+        _FloatingDOMController_anchor.set(this, void 0);
+        _FloatingDOMController_alignment.set(this, void 0);
+        _FloatingDOMController_styles.set(this, void 0);
+        _FloatingDOMController_placement.set(this, void 0);
+        _FloatingDOMController_options.set(this, void 0);
+        host.addController(this);
+        __classPrivateFieldSet(this, _FloatingDOMController_options, options, "f");
+        (_a = __classPrivateFieldGet(this, _FloatingDOMController_options, "f")).invoker ?? (_a.invoker = host);
+        (_b = __classPrivateFieldGet(this, _FloatingDOMController_options, "f")).arrow ?? (_b.arrow = false);
+        (_c = __classPrivateFieldGet(this, _FloatingDOMController_options, "f")).flip ?? (_c.flip = true);
+        (_d = __classPrivateFieldGet(this, _FloatingDOMController_options, "f")).shift ?? (_d.shift = true);
+    }
+    hostDisconnected() {
+        __classPrivateFieldGet(this, _FloatingDOMController_cleanup, "f")?.call(this);
+    }
+    /** Show the floating DOM */
+    async show({ offset, placement } = {}) {
+        const invoker = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_invoker_get);
+        const content = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_content_get);
+        if (!invoker || !content) {
+            return;
+        }
+        if (!__classPrivateFieldGet(this, _FloatingDOMController_opening, "f")) {
+            __classPrivateFieldSet(this, _FloatingDOMController_opening, true, "f");
+            const p = __classPrivateFieldGet(this, _FloatingDOMController_instances, "m", _FloatingDOMController_update).call(this, placement, offset);
+            __classPrivateFieldSet(this, _FloatingDOMController_cleanup, __classPrivateFieldGet(this, _FloatingDOMController_cleanup, "f") ?? autoUpdate(invoker, content, () => __classPrivateFieldGet(this, _FloatingDOMController_instances, "m", _FloatingDOMController_update).call(this, placement, offset)), "f");
+            await p;
+            __classPrivateFieldSet(this, _FloatingDOMController_opening, false, "f");
+        }
+        __classPrivateFieldSet(this, _FloatingDOMController_open, true, "f");
+        this.host.requestUpdate();
+    }
+    /** Hide the floating DOM */
+    async hide() {
+        await this.host.updateComplete;
+        while (__classPrivateFieldGet(this, _FloatingDOMController_opening, "f") && !this.open) {
+            await new Promise(requestAnimationFrame);
+        }
+        __classPrivateFieldSet(this, _FloatingDOMController_open, false, "f");
+        __classPrivateFieldGet(this, _FloatingDOMController_cleanup, "f")?.call(this);
+        this.host.requestUpdate();
+        await this.host.updateComplete;
+    }
+}
+_FloatingDOMController_open = new WeakMap(), _FloatingDOMController_opening = new WeakMap(), _FloatingDOMController_cleanup = new WeakMap(), _FloatingDOMController_anchor = new WeakMap(), _FloatingDOMController_alignment = new WeakMap(), _FloatingDOMController_styles = new WeakMap(), _FloatingDOMController_placement = new WeakMap(), _FloatingDOMController_options = new WeakMap(), _FloatingDOMController_instances = new WeakSet(), _FloatingDOMController_invoker_get = function _FloatingDOMController_invoker_get() {
+    const { invoker } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
+    return typeof invoker === 'function' ? invoker() : invoker;
+}, _FloatingDOMController_content_get = function _FloatingDOMController_content_get() {
+    const { content } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
+    return typeof content === 'function' ? content() : content;
+}, _FloatingDOMController_update = async function _FloatingDOMController_update(placement = 'top', offset) {
+    var _a, _b;
+    const { flip, padding, shift } = __classPrivateFieldGet(this, _FloatingDOMController_options, "f");
+    const invoker = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_invoker_get);
+    const content = __classPrivateFieldGet(this, _FloatingDOMController_instances, "a", _FloatingDOMController_content_get);
+    if (!invoker || !content) {
+        return;
+    }
+    const { x, y, placement: _placement } = await computePosition(invoker, content, {
+        strategy: 'absolute',
+        placement,
+        middleware: [
+            offsetMiddleware(offset),
+            shift && shiftMiddleware({ padding }),
+            flip && flipMiddleware({ padding }),
+        ].filter(Boolean)
+    });
+    __classPrivateFieldSet(this, _FloatingDOMController_placement, _placement, "f");
+    _a = this, _b = this, [({ set value(_c) { __classPrivateFieldSet(_a, _FloatingDOMController_anchor, _c, "f"); } }).value, ({ set value(_c) { __classPrivateFieldSet(_b, _FloatingDOMController_alignment, _c, "f"); } }).value] = (__classPrivateFieldGet(this, _FloatingDOMController_placement, "f").split('-') ?? []);
+    __classPrivateFieldSet(this, _FloatingDOMController_styles, {
+        '--_floating-content-translate': `${x}px ${y}px`,
+    }, "f");
+    this.host.requestUpdate();
+};
+//# sourceMappingURL=floating-dom-controller.js.map

controllers/internals-controller.js

@@ -1,2 +0,52 @@
-var o=(a,i,e)=>{if(!i.has(a))throw TypeError("Cannot "+e)};var l=(a,i,e)=>(o(a,i,"read from private field"),e?e.call(a):i.get(a)),d=(a,i,e)=>{if(i.has(a))throw TypeError("Cannot add the same private member more than once");i instanceof WeakSet?i.add(a):i.set(a,e)},c=(a,i,e,r)=>(o(a,i,"write to private field"),r?r.call(a,e):i.set(a,e),e);function x(a){return a==="role"||a.startsWith("aria")}var t,A=class{constructor(i,e){this.host=i;d(this,t,void 0);c(this,t,i.attachInternals());for(let r of Object.keys(Object.getPrototypeOf(l(this,t))))x(r)&&Object.defineProperty(this,r,{get(){return l(this,t)[r]},set(n){l(this,t)[r]=n,this.host.requestUpdate()}});for(let[r,n]of Object.entries(e??{}))x(r)&&(this[r]=n)}get formDisabled(){return this.host.matches(":disabled")}submit(){l(this,t).form?.requestSubmit()}reset(){l(this,t).form?.reset()}};t=new WeakMap,A.protos=new WeakMap;export{A as InternalsController};
-//# sourceMappingURL=internals-controller.js.map
+var _InternalsController_internals, _InternalsController_formDisabled;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+function isARIAMixinProp(key) {
+    return key === 'role' || key.startsWith('aria');
+}
+export class InternalsController {
+    /** True when the control is disabled via it's containing fieldset element */
+    get formDisabled() {
+        return this.host.matches(':disabled') || __classPrivateFieldGet(this, _InternalsController_formDisabled, "f");
+    }
+    constructor(host, options) {
+        this.host = host;
+        _InternalsController_internals.set(this, void 0);
+        _InternalsController_formDisabled.set(this, false);
+        __classPrivateFieldSet(this, _InternalsController_internals, host.attachInternals(), "f");
+        // We need to polyfill :disabled
+        // see https://github.com/calebdwilliams/element-internals-polyfill/issues/88
+        const orig = host.formDisabledCallback;
+        host.formDisabledCallback = disabled => {
+            __classPrivateFieldSet(this, _InternalsController_formDisabled, disabled, "f");
+            orig?.call(host, disabled);
+        };
+        // proxy the internals object's aria prototype
+        for (const key of Object.keys(Object.getPrototypeOf(__classPrivateFieldGet(this, _InternalsController_internals, "f")))) {
+            if (isARIAMixinProp(key)) {
+                Object.defineProperty(this, key, {
+                    get() {
+                        return __classPrivateFieldGet(this, _InternalsController_internals, "f")[key];
+                    },
+                    set(value) {
+                        __classPrivateFieldGet(this, _InternalsController_internals, "f")[key] = value;
+                        this.host.requestUpdate();
+                    }
+                });
+            }
+        }
+        for (const [key, val] of Object.entries(options ?? {})) {
+            if (isARIAMixinProp(key)) {
+                this[key] = val;
+            }
+        }
+    }
+    submit() {
+        __classPrivateFieldGet(this, _InternalsController_internals, "f").form?.requestSubmit();
+    }
+    reset() {
+        __classPrivateFieldGet(this, _InternalsController_internals, "f").form?.reset();
+    }
+}
+_InternalsController_internals = new WeakMap(), _InternalsController_formDisabled = new WeakMap();
+InternalsController.protos = new WeakMap();
+//# sourceMappingURL=internals-controller.js.map

controllers/light-dom-controller.js

@@ -1,2 +0,38 @@
-import{Logger as o}from"./logger.js";var i=class{constructor(t,e,s){this.host=t;this.options=s;this.initializer=e.bind(t),this.mo=new MutationObserver(this.initializer),this.logger=new o(this.host),t.addController(this)}hostConnected(){this.hasLightDOM()?this.initializer():this.options?.emptyWarning&&this.logger.warn(this.options?.emptyWarning),this.initObserver()}hostDisconnected(){this.mo.disconnect()}initObserver(){(this.options?.observe??!0)&&this.mo.observe(this.host,typeof this.options?.observe!="object"?{childList:!0}:this.options?.observe)}hasLightDOM(){return this.host.children.length>0||(this.host.textContent??"").trim().length>0}};export{i as LightDOMController};
-//# sourceMappingURL=light-dom-controller.js.map
+import { Logger } from './logger.js';
+export class LightDOMController {
+    constructor(host, initializer, options) {
+        this.host = host;
+        this.options = options;
+        this.initializer = initializer.bind(host);
+        this.mo = new MutationObserver(this.initializer);
+        this.logger = new Logger(this.host);
+        host.addController(this);
+    }
+    hostConnected() {
+        if (this.hasLightDOM()) {
+            this.initializer();
+        }
+        else if (this.options?.emptyWarning) {
+            this.logger.warn(this.options?.emptyWarning);
+        }
+        this.initObserver();
+    }
+    hostDisconnected() {
+        this.mo.disconnect();
+    }
+    initObserver() {
+        if (this.options?.observe ?? true) {
+            // Use the provided options, or their defaults
+            this.mo.observe(this.host, typeof this.options?.observe !== 'object' ? { childList: true }
+                : this.options?.observe);
+        }
+    }
+    /**
+     * Returns a boolean statement of whether or not this component contains any light DOM.
+     */
+    hasLightDOM() {
+        return !!(this.host.children.length > 0 ||
+            (this.host.textContent ?? '').trim().length > 0);
+    }
+}
+//# sourceMappingURL=light-dom-controller.js.map

controllers/logger.js

@@ -1,2 +0,90 @@
-var e=class{constructor(t){this.host=t;if(e.instances.get(t))return e.instances.get(t);t.addController(this),e.instances.set(t,this)}get prefix(){return`[${this.host.localName}${this.host.id?`#${this.host.id}`:""}]`}static debugLog(t=null){try{return t!==null&&(e.logDebug=!!t,localStorage.pfeLog=!!t),localStorage.pfeLog==="true"}catch{return e.logDebug}}static log(...t){e.debugLog()&&console.log(...t)}static warn(...t){console.warn(...t)}static error(...t){console.error([...t].join(" "))}log(...t){e.log(this.prefix,...t)}warn(...t){e.warn(this.prefix,...t)}error(...t){e.error(this.prefix,...t)}hostConnected(){this.log("connected")}},n=e;n.instances=new WeakMap;export{n as Logger};
-//# sourceMappingURL=logger.js.map
+export class Logger {
+    get prefix() {
+        return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;
+    }
+    /**
+     * A boolean value that indicates if the logging should be printed to the console; used for debugging.
+     * For use in a JS file or script tag; can also be added in the constructor of a component during development.
+     * @example Logger.debugLog(true);
+     * @tags debug
+     */
+    static debugLog(preference = null) {
+        // wrap localStorage references in a try/catch; merely referencing it can
+        // throw errors in some locked down environments
+        try {
+            if (preference !== null) {
+                Logger.logDebug = !!preference;
+                localStorage.pfeLog = !!preference;
+            }
+            return localStorage.pfeLog === 'true';
+        }
+        catch (e) {
+            return Logger.logDebug;
+        }
+    }
+    /**
+     * A logging wrapper which checks the debugLog boolean and prints to the console if true.
+     *
+     * @example Logger.log("Hello");
+     */
+    static log(...msgs) {
+        if (Logger.debugLog()) {
+            // eslint-disable-next-line no-console
+            console.log(...msgs);
+        }
+    }
+    /**
+     * A console warning wrapper which formats your output with useful debugging information.
+     *
+     * @example Logger.warn("Hello");
+     */
+    static warn(...msgs) {
+        console.warn(...msgs); // eslint-disable-line no-console
+    }
+    /**
+     * A console error wrapper which formats your output with useful debugging information.
+     * For use inside a component's function.
+     * @example Logger.error("Hello");
+     */
+    static error(...msgs) {
+        console.error([...msgs].join(' ')); // eslint-disable-line no-console
+    }
+    /**
+     * Local logging that outputs the tag name as a prefix automatically
+     *
+     * @example this.logger.log("Hello");
+     */
+    log(...msgs) {
+        Logger.log(this.prefix, ...msgs);
+    }
+    /**
+     * Local warning wrapper that outputs the tag name as a prefix automatically.
+     * For use inside a component's function.
+     * @example this.logger.warn("Hello");
+     */
+    warn(...msgs) {
+        Logger.warn(this.prefix, ...msgs);
+    }
+    /**
+     * Local error wrapper that outputs the tag name as a prefix automatically.
+     * For use inside a component's function.
+     * @example this.logger.error("Hello");
+     */
+    error(...msgs) {
+        Logger.error(this.prefix, ...msgs);
+    }
+    constructor(host) {
+        this.host = host;
+        // We only need one logger instance per host
+        if (Logger.instances.get(host)) {
+            return Logger.instances.get(host);
+        }
+        host.addController(this);
+        Logger.instances.set(host, this);
+    }
+    hostConnected() {
+        this.log('connected');
+    }
+}
+Logger.instances = new WeakMap();
+//# sourceMappingURL=logger.js.map

controllers/perf-controller.js

@@ -1,2 +0,36 @@
-import{getRandomId as a}from"../functions/random.js";var r=class{constructor(e){this.host=e;this.hasMeasured=!1;e.addController(this),e.id?e.id.startsWith("pfe-")&&!e.id.startsWith(e.localName)?this.markId=e.id.replace("pfe",e.localName):this.markId=`${e.localName}-${e.id}`:this.markId=a(e.localName),performance.mark(`${this.markId}-defined`)}hostUpdate(){this.hasMeasured||this.measure()}measure(){this.hasMeasured=!0,performance.mark(`${this.markId}-rendered`),performance.measure(`${this.markId}-from-navigation-to-first-render`,void 0,`${this.markId}-rendered`),performance.measure(`${this.markId}-from-defined-to-first-render`,`${this.markId}-defined`,`${this.markId}-rendered`),this.host.removeController(this)}};export{r as PerfController};
-//# sourceMappingURL=perf-controller.js.map
+import { getRandomId } from '../functions/random.js';
+export class PerfController {
+    constructor(host) {
+        this.host = host;
+        this.hasMeasured = false;
+        host.addController(this);
+        // Set up the mark ID based on existing ID on component if it exists
+        if (!host.id) {
+            this.markId = getRandomId(host.localName);
+        }
+        else if (host.id.startsWith('pf-') && !host.id.startsWith(host.localName)) {
+            this.markId = host.id.replace('pf', host.localName);
+        }
+        else {
+            this.markId = `${host.localName}-${host.id}`;
+        }
+        performance.mark(`${this.markId}-defined`);
+    }
+    hostUpdate() {
+        if (!this.hasMeasured) {
+            this.measure();
+        }
+    }
+    measure() {
+        this.hasMeasured = true;
+        performance.mark(`${this.markId}-rendered`);
+        // Navigation start, i.e., the browser first sees that the user has navigated to the page
+        performance.measure(`${this.markId}-from-navigation-to-first-render`, undefined, `${this.markId}-rendered`);
+        // Render is run before connection unless delayRender is used
+        performance.measure(`${this.markId}-from-defined-to-first-render`, `${this.markId}-defined`, `${this.markId}-rendered`);
+        // Once we've measured time to render, we no longer need the controller,
+        // so we allow it to be garbage-collected
+        this.host.removeController(this);
+    }
+}
+//# sourceMappingURL=perf-controller.js.map

controllers/property-observer-controller.js

@@ -1,2 +0,33 @@
-var l=Symbol("observed properties controller"),t=class{constructor(e){this.host=e;this.values=new Map;if(t.hosts.get(e))return t.hosts.get(e);e.addController(this),e[l]=this}delete(e){this.values.delete(e)}hostUpdate(){for(let[e,[o,[r,s]]]of this.values)this.host[o]?.(r,s),this.delete(e)}hostUpdated(){this.host.removeController(this)}cache(e,o,...r){this.values.set(e,[o,r])}},a=t;a.hosts=new WeakMap;export{a as PropertyObserverController,l as observedController};
-//# sourceMappingURL=property-observer-controller.js.map
+export const observedController = Symbol('observed properties controller');
+/** This controller holds a cache of observed property values which were set before the element updated */
+export class PropertyObserverController {
+    delete(key) {
+        this.values.delete(key);
+    }
+    constructor(host) {
+        this.host = host;
+        this.values = new Map();
+        if (PropertyObserverController.hosts.get(host)) {
+            return PropertyObserverController.hosts.get(host);
+        }
+        host.addController(this);
+        host[observedController] = this;
+    }
+    /** Set any cached valued accumulated between constructor and connectedCallback */
+    hostUpdate() {
+        for (const [key, [methodName, [oldVal, newVal]]] of this.values) {
+            // @ts-expect-error: be cool, typescript
+            this.host[methodName]?.(oldVal, newVal);
+            this.delete(key);
+        }
+    }
+    /** Once the element has updated, we no longer need this controller, so we remove it */
+    hostUpdated() {
+        this.host.removeController(this);
+    }
+    cache(key, methodName, ...vals) {
+        this.values.set(key, [methodName, vals]);
+    }
+}
+PropertyObserverController.hosts = new WeakMap();
+//# sourceMappingURL=property-observer-controller.js.map

controllers/roving-tabindex-controller.d.ts

@@ -32,2 +32,6 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
     /**
+     * sets tabindex of item based on whether or not it is active
+     */
+    updateActiveItem(item?: HTMLElement): void;
+    /**
      * focuses on an item and sets it as active
@@ -34,0 +38,0 @@ */

controllers/roving-tabindex-controller.js

@@ -1,2 +0,166 @@
-var E=(s,t,i)=>{if(!t.has(s))throw TypeError("Cannot "+i)};var e=(s,t,i)=>(E(s,t,"read from private field"),i?i.call(s):t.get(s)),m=(s,t,i)=>{if(t.has(s))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(s):t.set(s,i)},I=(s,t,i,n)=>(E(s,t,"write to private field"),n?n.call(s,i):t.set(s,i),i);var H=(s,t,i)=>(E(s,t,"access private method"),i);var M=s=>!!s&&!s.hasAttribute("disabled")&&!s.ariaHidden&&!s.hasAttribute("hidden"),a,c,r,h,u,l,f,p,d,L,b,g,v=class{constructor(t){this.host=t;m(this,r);m(this,u);m(this,f);m(this,d);m(this,b);m(this,a,void 0);m(this,c,[]);this.host.addController(this)}get activeItem(){return e(this,a)}get firstItem(){return e(this,r,h)[0]}get lastItem(){return e(this,r,h).at(-1)}get nextItem(){return e(this,u,l)<e(this,r,h).length-1?e(this,r,h)[e(this,u,l)+1]:this.firstItem}get prevItem(){return e(this,u,l)>0?e(this,r,h)[e(this,u,l)-1]:this.lastItem}focusOnItem(t){H(this,b,g).call(this,t||this.firstItem),e(this,a)?.focus()}updateItems(t){let n=[...t.slice(e(this,f,p)),...t.slice(0,e(this,f,p))].find(o=>e(this,r,h).includes(o));this.focusOnItem(n||this.firstItem)}initItems(t){I(this,c,t??[]);let i=e(this,r,h),[n]=i;I(this,a,n);for(let o of i)o.tabIndex=e(this,a)===o?0:-1}hostConnected(){this.host.addEventListener("keydown",H(this,d,L).bind(this))}};a=new WeakMap,c=new WeakMap,r=new WeakSet,h=function(){return e(this,c).filter(M)},u=new WeakSet,l=function(){return!!e(this,r,h)&&!!this.activeItem?e(this,r,h).indexOf(this.activeItem):-1},f=new WeakSet,p=function(){return this.activeItem?e(this,c).indexOf(this.activeItem):-1},d=new WeakSet,L=function(t){if(t.ctrlKey||t.altKey||t.metaKey||e(this,r,h).length<1)return;let i=this.activeItem,n=!1,o=i?i.tagName==="SELECT"||i.getAttribute("aria-expanded")==="true"||i.getAttribute("role")==="spinbutton":!1;switch(t.key){case"ArrowLeft":this.focusOnItem(this.prevItem),n=!0;break;case"ArrowRight":this.focusOnItem(this.nextItem),n=!0;break;case"ArrowDown":if(o)return;this.focusOnItem(this.prevItem),n=!0;break;case"ArrowUp":if(o)return;this.focusOnItem(this.nextItem),n=!0;break;case"Home":this.focusOnItem(this.firstItem),n=!0;break;case"PageUp":if(o)return;this.focusOnItem(this.firstItem),n=!0;break;case"End":this.focusOnItem(this.lastItem),n=!0;break;case"PageDown":if(o)return;this.focusOnItem(this.lastItem),n=!0;break;default:break}n&&(t.stopPropagation(),t.preventDefault())},b=new WeakSet,g=function(t){t&&(!!e(this,a)&&t!==e(this,a)&&(e(this,a).tabIndex=-1),t.tabIndex=0,I(this,a,t))};export{v as RovingTabindexController};
-//# sourceMappingURL=roving-tabindex-controller.js.map
+var _RovingTabindexController_instances, _RovingTabindexController_activeItem, _RovingTabindexController_items, _RovingTabindexController_focusableItems_get, _RovingTabindexController_activeIndex_get, _RovingTabindexController_itemIndex_get, _RovingTabindexController_onKeydown;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+const isFocusableElement = (el) => !!el &&
+    !el.hasAttribute('disabled') &&
+    !el.ariaHidden &&
+    !el.hasAttribute('hidden');
+/**
+ * Implements roving tabindex, as described in WAI-ARIA practices, [Managing Focus Within
+ * Components Using a Roving
+ * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex)
+ */
+export class RovingTabindexController {
+    /**
+     * active item of array of items
+     */
+    get activeItem() {
+        return __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f");
+    }
+    /**
+     * first item in array of focusable items
+     */
+    get firstItem() {
+        return __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get)[0];
+    }
+    /**
+     * last item in array of focusable items
+     */
+    get lastItem() {
+        return __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).at(-1);
+    }
+    /**
+     * next item  after active item in array of focusable items
+     */
+    get nextItem() {
+        return (__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_activeIndex_get) < __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).length - 1 ? __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get)[__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_activeIndex_get) + 1]
+            : this.firstItem);
+    }
+    /**
+     * previous item  after active item in array of focusable items
+     */
+    get prevItem() {
+        return (__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_activeIndex_get) > 0 ? __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get)[__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_activeIndex_get) - 1]
+            : this.lastItem);
+    }
+    constructor(host) {
+        this.host = host;
+        _RovingTabindexController_instances.add(this);
+        /** active focusable element */
+        _RovingTabindexController_activeItem.set(this, void 0);
+        /** array of all focusable elements */
+        _RovingTabindexController_items.set(this, []);
+        this.host.addController(this);
+    }
+    /**
+     * sets tabindex of item based on whether or not it is active
+     */
+    updateActiveItem(item) {
+        if (item) {
+            if (!!__classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f") && item !== __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f")) {
+                __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f").tabIndex = -1;
+            }
+            item.tabIndex = 0;
+            __classPrivateFieldSet(this, _RovingTabindexController_activeItem, item, "f");
+        }
+    }
+    /**
+     * focuses on an item and sets it as active
+     */
+    focusOnItem(item) {
+        this.updateActiveItem(item || this.firstItem);
+        __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f")?.focus();
+    }
+    /**
+     * Focuses next focusable item
+     */
+    updateItems(items) {
+        const sequence = [...items.slice(__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_itemIndex_get)), ...items.slice(0, __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_itemIndex_get))];
+        const first = sequence.find(item => __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).includes(item));
+        this.focusOnItem(first || this.firstItem);
+    }
+    /**
+     * from array of HTML items, and sets active items
+     */
+    initItems(items) {
+        __classPrivateFieldSet(this, _RovingTabindexController_items, items ?? [], "f");
+        const focusableItems = __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get);
+        const [focusableItem] = focusableItems;
+        __classPrivateFieldSet(this, _RovingTabindexController_activeItem, focusableItem, "f");
+        for (const item of focusableItems) {
+            item.tabIndex = __classPrivateFieldGet(this, _RovingTabindexController_activeItem, "f") === item ? 0 : -1;
+        }
+    }
+    hostConnected() {
+        this.host.addEventListener('keydown', __classPrivateFieldGet(this, _RovingTabindexController_instances, "m", _RovingTabindexController_onKeydown).bind(this));
+    }
+}
+_RovingTabindexController_activeItem = new WeakMap(), _RovingTabindexController_items = new WeakMap(), _RovingTabindexController_instances = new WeakSet(), _RovingTabindexController_focusableItems_get = function _RovingTabindexController_focusableItems_get() {
+    return __classPrivateFieldGet(this, _RovingTabindexController_items, "f").filter(isFocusableElement);
+}, _RovingTabindexController_activeIndex_get = function _RovingTabindexController_activeIndex_get() {
+    return !!__classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get) && !!this.activeItem ? __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).indexOf(this.activeItem) : -1;
+}, _RovingTabindexController_itemIndex_get = function _RovingTabindexController_itemIndex_get() {
+    return this.activeItem ? __classPrivateFieldGet(this, _RovingTabindexController_items, "f").indexOf(this.activeItem) : -1;
+}, _RovingTabindexController_onKeydown = function _RovingTabindexController_onKeydown(event) {
+    if (event.ctrlKey || event.altKey || event.metaKey || __classPrivateFieldGet(this, _RovingTabindexController_instances, "a", _RovingTabindexController_focusableItems_get).length < 1) {
+        return;
+    }
+    const item = this.activeItem;
+    let shouldPreventDefault = false;
+    const horizontalOnly = !item ? false
+        : item.tagName === 'SELECT' ||
+            item.getAttribute('aria-expanded') === 'true' ||
+            item.getAttribute('role') === 'spinbutton';
+    switch (event.key) {
+        case 'ArrowLeft':
+            this.focusOnItem(this.prevItem);
+            shouldPreventDefault = true;
+            break;
+        case 'ArrowRight':
+            this.focusOnItem(this.nextItem);
+            shouldPreventDefault = true;
+            break;
+        case 'ArrowUp':
+            if (horizontalOnly) {
+                return;
+            }
+            this.focusOnItem(this.prevItem);
+            shouldPreventDefault = true;
+            break;
+        case 'ArrowDown':
+            if (horizontalOnly) {
+                return;
+            }
+            this.focusOnItem(this.nextItem);
+            shouldPreventDefault = true;
+            break;
+        case 'Home':
+            this.focusOnItem(this.firstItem);
+            shouldPreventDefault = true;
+            break;
+        case 'PageUp':
+            if (horizontalOnly) {
+                return;
+            }
+            this.focusOnItem(this.firstItem);
+            shouldPreventDefault = true;
+            break;
+        case 'End':
+            this.focusOnItem(this.lastItem);
+            shouldPreventDefault = true;
+            break;
+        case 'PageDown':
+            if (horizontalOnly) {
+                return;
+            }
+            this.focusOnItem(this.lastItem);
+            shouldPreventDefault = true;
+            break;
+        default:
+            break;
+    }
+    if (shouldPreventDefault) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+};
+//# sourceMappingURL=roving-tabindex-controller.js.map

controllers/scroll-spy-controller.js

@@ -1,2 +0,120 @@
-var M=(o,t,e)=>{if(!t.has(o))throw TypeError("Cannot "+e)};var s=(o,t,e)=>(M(o,t,"read from private field"),e?e.call(o):t.get(o)),i=(o,t,e)=>{if(t.has(o))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(o):t.set(o,e)},r=(o,t,e,h)=>(M(o,t,"write to private field"),h?h.call(o,e):t.set(o,e),e);var l=(o,t,e)=>(M(o,t,"access private method"),e);var f,C,a,m,u,c,v,b,E,N,p,d,y,g,A,I,O,w,x,R,q,S,L,k=class{constructor(t,e){this.host=t;i(this,d);i(this,g);i(this,I);i(this,w);i(this,R);i(this,S);i(this,f,void 0);i(this,C,void 0);i(this,a,void 0);i(this,m,new Set);i(this,u,!1);i(this,c,!1);i(this,v,void 0);i(this,b,void 0);i(this,E,void 0);i(this,N,void 0);i(this,p,void 0);t.addController(this),r(this,f,e.tagNames),r(this,v,e.root),r(this,b,e.rootMargin),r(this,C,e.activeAttribute??"active"),r(this,E,e.threshold??.85),r(this,N,e.rootNode??t.getRootNode()),r(this,p,e?.getHash??(h=>h.getAttribute("href")))}get root(){return s(this,v)}set root(t){r(this,v,t),s(this,a)?.disconnect(),l(this,g,A).call(this)}get rootMargin(){return s(this,b)}set rootMargin(t){r(this,b,t),s(this,a)?.disconnect(),l(this,g,A).call(this)}get threshold(){return s(this,E)}set threshold(t){r(this,E,t),s(this,a)?.disconnect(),l(this,g,A).call(this)}hostConnected(){l(this,g,A).call(this)}async setActive(t){r(this,u,!0),l(this,w,x).call(this,t);let e=!1;for(let h of s(this,d,y))l(this,I,O).call(this,h,!e),h===t&&(e=!0);await l(this,R,q).call(this),r(this,u,!1)}};f=new WeakMap,C=new WeakMap,a=new WeakMap,m=new WeakMap,u=new WeakMap,c=new WeakMap,v=new WeakMap,b=new WeakMap,E=new WeakMap,N=new WeakMap,p=new WeakMap,d=new WeakSet,y=function(){return Array.from(this.host.querySelectorAll(s(this,f).join(","))).filter(s(this,p))},g=new WeakSet,A=function(){let t=s(this,N);if(t instanceof Document||t instanceof ShadowRoot){let{rootMargin:e,threshold:h,root:H}=this;r(this,a,new IntersectionObserver(n=>l(this,S,L).call(this,n),{root:H,rootMargin:e,threshold:h})),s(this,d,y).map(n=>s(this,p).call(this,n)).filter(n=>!!n).map(n=>t.getElementById(n.replace("#",""))).filter(n=>!!n).forEach(n=>s(this,a)?.observe(n))}},I=new WeakSet,O=function(t,e){e?s(this,m).add(t):s(this,m).delete(t)},w=new WeakSet,x=function(t){for(let e of s(this,d,y))e.toggleAttribute(s(this,C),e===t)},R=new WeakSet,q=async function(){for(r(this,c,!1),setTimeout(()=>r(this,c,!1),3e3);!s(this,c);)await new Promise(requestAnimationFrame)},S=new WeakSet,L=async function(t){if(!s(this,u)){for(let{target:H,boundingClientRect:n,intersectionRect:j}of t){let P=`:is(${s(this,f).join(",")})[href="#${H.id}"]`,T=this.host.querySelector(P);T&&l(this,I,O).call(this,T,n.top<j.top)}let h=[...s(this,m)].at(-1);l(this,w,x).call(this,h??s(this,d,y).at(0))}r(this,c,!0)};export{k as ScrollSpyController};
-//# sourceMappingURL=scroll-spy-controller.js.map
+var _ScrollSpyController_instances, _ScrollSpyController_tagNames, _ScrollSpyController_activeAttribute, _ScrollSpyController_io, _ScrollSpyController_passedLinks, _ScrollSpyController_force, _ScrollSpyController_intersected, _ScrollSpyController_root, _ScrollSpyController_rootMargin, _ScrollSpyController_threshold, _ScrollSpyController_rootNode, _ScrollSpyController_getHash, _ScrollSpyController_linkChildren_get, _ScrollSpyController_initIo, _ScrollSpyController_markPassed, _ScrollSpyController_setActive, _ScrollSpyController_nextIntersection, _ScrollSpyController_onIo;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+export class ScrollSpyController {
+    get root() {
+        return __classPrivateFieldGet(this, _ScrollSpyController_root, "f");
+    }
+    set root(v) {
+        __classPrivateFieldSet(this, _ScrollSpyController_root, v, "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_io, "f")?.disconnect();
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_initIo).call(this);
+    }
+    get rootMargin() {
+        return __classPrivateFieldGet(this, _ScrollSpyController_rootMargin, "f");
+    }
+    set rootMargin(v) {
+        __classPrivateFieldSet(this, _ScrollSpyController_rootMargin, v, "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_io, "f")?.disconnect();
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_initIo).call(this);
+    }
+    get threshold() {
+        return __classPrivateFieldGet(this, _ScrollSpyController_threshold, "f");
+    }
+    set threshold(v) {
+        __classPrivateFieldSet(this, _ScrollSpyController_threshold, v, "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_io, "f")?.disconnect();
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_initIo).call(this);
+    }
+    constructor(host, options) {
+        this.host = host;
+        _ScrollSpyController_instances.add(this);
+        _ScrollSpyController_tagNames.set(this, void 0);
+        _ScrollSpyController_activeAttribute.set(this, void 0);
+        _ScrollSpyController_io.set(this, void 0);
+        /** Which link's targets have already scrolled past? */
+        _ScrollSpyController_passedLinks.set(this, new Set());
+        /** Ignore intersections? */
+        _ScrollSpyController_force.set(this, false);
+        /** Has the intersection observer found an element? */
+        _ScrollSpyController_intersected.set(this, false);
+        _ScrollSpyController_root.set(this, void 0);
+        _ScrollSpyController_rootMargin.set(this, void 0);
+        _ScrollSpyController_threshold.set(this, void 0);
+        _ScrollSpyController_rootNode.set(this, void 0);
+        _ScrollSpyController_getHash.set(this, void 0);
+        host.addController(this);
+        __classPrivateFieldSet(this, _ScrollSpyController_tagNames, options.tagNames, "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_root, options.root, "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_rootMargin, options.rootMargin, "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_activeAttribute, options.activeAttribute ?? 'active', "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_threshold, options.threshold ?? 0.85, "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_rootNode, options.rootNode ?? host.getRootNode(), "f");
+        __classPrivateFieldSet(this, _ScrollSpyController_getHash, options?.getHash ?? ((el) => el.getAttribute('href')), "f");
+    }
+    hostConnected() {
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_initIo).call(this);
+    }
+    /** Explicitly set the active item */
+    async setActive(link) {
+        __classPrivateFieldSet(this, _ScrollSpyController_force, true, "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_setActive).call(this, link);
+        let sawActive = false;
+        for (const child of __classPrivateFieldGet(this, _ScrollSpyController_instances, "a", _ScrollSpyController_linkChildren_get)) {
+            __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_markPassed).call(this, child, !sawActive);
+            if (child === link) {
+                sawActive = true;
+            }
+        }
+        await __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_nextIntersection).call(this);
+        __classPrivateFieldSet(this, _ScrollSpyController_force, false, "f");
+    }
+}
+_ScrollSpyController_tagNames = new WeakMap(), _ScrollSpyController_activeAttribute = new WeakMap(), _ScrollSpyController_io = new WeakMap(), _ScrollSpyController_passedLinks = new WeakMap(), _ScrollSpyController_force = new WeakMap(), _ScrollSpyController_intersected = new WeakMap(), _ScrollSpyController_root = new WeakMap(), _ScrollSpyController_rootMargin = new WeakMap(), _ScrollSpyController_threshold = new WeakMap(), _ScrollSpyController_rootNode = new WeakMap(), _ScrollSpyController_getHash = new WeakMap(), _ScrollSpyController_instances = new WeakSet(), _ScrollSpyController_linkChildren_get = function _ScrollSpyController_linkChildren_get() {
+    return Array.from(this.host.querySelectorAll(__classPrivateFieldGet(this, _ScrollSpyController_tagNames, "f").join(',')))
+        .filter(__classPrivateFieldGet(this, _ScrollSpyController_getHash, "f"));
+}, _ScrollSpyController_initIo = function _ScrollSpyController_initIo() {
+    const rootNode = __classPrivateFieldGet(this, _ScrollSpyController_rootNode, "f");
+    if (rootNode instanceof Document || rootNode instanceof ShadowRoot) {
+        const { rootMargin, threshold, root } = this;
+        __classPrivateFieldSet(this, _ScrollSpyController_io, new IntersectionObserver(r => __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_onIo).call(this, r), { root, rootMargin, threshold }), "f");
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "a", _ScrollSpyController_linkChildren_get)
+            .map(x => __classPrivateFieldGet(this, _ScrollSpyController_getHash, "f").call(this, x))
+            .filter((x) => !!x)
+            .map(x => rootNode.getElementById(x.replace('#', '')))
+            .filter((x) => !!x)
+            .forEach(target => __classPrivateFieldGet(this, _ScrollSpyController_io, "f")?.observe(target));
+    }
+}, _ScrollSpyController_markPassed = function _ScrollSpyController_markPassed(link, force) {
+    if (force) {
+        __classPrivateFieldGet(this, _ScrollSpyController_passedLinks, "f").add(link);
+    }
+    else {
+        __classPrivateFieldGet(this, _ScrollSpyController_passedLinks, "f").delete(link);
+    }
+}, _ScrollSpyController_setActive = function _ScrollSpyController_setActive(link) {
+    for (const child of __classPrivateFieldGet(this, _ScrollSpyController_instances, "a", _ScrollSpyController_linkChildren_get)) {
+        child.toggleAttribute(__classPrivateFieldGet(this, _ScrollSpyController_activeAttribute, "f"), child === link);
+    }
+}, _ScrollSpyController_nextIntersection = async function _ScrollSpyController_nextIntersection() {
+    __classPrivateFieldSet(this, _ScrollSpyController_intersected, false, "f");
+    // safeguard the loop
+    setTimeout(() => __classPrivateFieldSet(this, _ScrollSpyController_intersected, false, "f"), 3000);
+    while (!__classPrivateFieldGet(this, _ScrollSpyController_intersected, "f")) {
+        await new Promise(requestAnimationFrame);
+    }
+}, _ScrollSpyController_onIo = async function _ScrollSpyController_onIo(entries) {
+    if (!__classPrivateFieldGet(this, _ScrollSpyController_force, "f")) {
+        for (const { target, boundingClientRect, intersectionRect } of entries) {
+            const selector = `:is(${__classPrivateFieldGet(this, _ScrollSpyController_tagNames, "f").join(',')})[href="#${target.id}"]`;
+            const link = this.host.querySelector(selector);
+            if (link) {
+                __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_markPassed).call(this, link, boundingClientRect.top < intersectionRect.top);
+            }
+        }
+        const link = [...__classPrivateFieldGet(this, _ScrollSpyController_passedLinks, "f")];
+        const last = link.at(-1);
+        __classPrivateFieldGet(this, _ScrollSpyController_instances, "m", _ScrollSpyController_setActive).call(this, last ?? __classPrivateFieldGet(this, _ScrollSpyController_instances, "a", _ScrollSpyController_linkChildren_get).at(0));
+    }
+    __classPrivateFieldSet(this, _ScrollSpyController_intersected, true, "f");
+};
+//# sourceMappingURL=scroll-spy-controller.js.map

controllers/slot-controller.d.ts

@@ -16,3 +16,3 @@ import type { ReactiveController, ReactiveElement } from 'lit';
      * Object mapping new slot name keys to deprecated slot name values
-     * @example `pfe-modal--header` is deprecated in favour of `header`
+     * @example `pf-modal--header` is deprecated in favour of `header`
      * ```js
@@ -22,3 +22,3 @@ * new SlotController(this, {
      *   deprecations: {
-     *     'header': 'pfe-modal--header'
+     *     'header': 'pf-modal--header'
      *   }
@@ -25,0 +25,0 @@ * })

controllers/slot-controller.js

@@ -1,2 +0,148 @@
-var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(i,t,e,o)=>{for(var s=o>1?void 0:o?m(t,e):t,n=i.length-1,r;n>=0;n--)(r=i[n])&&(s=(o?r(t,e,s):r(s))||s);return o&&s&&c(t,e,s),s};import{bound as h}from"../decorators/bound.js";import{Logger as g}from"./logger.js";function u(i){return i.length===1&&typeof i[0]=="object"&&i[0]!==null}var p=i=>t=>i===l.anonymous?!t.hasAttribute("slot"):t.getAttribute("slot")===i,d=class{constructor(t,...e){this.host=t;this.nodes=new Map;this.firstUpdated=!1;this.mo=new MutationObserver(this.onMutation);this.deprecations={};if(this.logger=new g(this.host),u(e)){let[{slots:o,deprecations:s}]=e;this.slotNames=o,this.deprecations=s??{}}else e.length>=1?(this.slotNames=e,this.deprecations={}):this.slotNames=[null];t.addController(this)}hostConnected(){this.host.addEventListener("slotchange",this.onSlotChange),this.firstUpdated=!1,this.mo.observe(this.host,{childList:!0}),this.init()}hostUpdated(){this.firstUpdated||(this.slotNames.forEach(this.initSlot),this.firstUpdated=!0)}hostDisconnected(){this.mo.disconnect()}hasSlotted(...t){return t.length?t.some(e=>this.nodes.get(e)?.hasContent??!1):(this.logger.warn("Please provide at least one slot name for which to search."),!1)}getSlotted(...t){return t.length?t.flatMap(e=>this.nodes.get(e)?.elements??[]):this.nodes.get(d.anonymous)?.elements??[]}onSlotChange(t){let e=t.target.name;this.initSlot(e),this.host.requestUpdate()}async onMutation(t){let e=[];for(let{addedNodes:o,removedNodes:s}of t)for(let n of[...o,...s])n instanceof HTMLElement&&n.slot&&(this.initSlot(n.slot),e.push(n.slot));e.length&&this.host.requestUpdate()}getChildrenForSlot(t){return Array.from(this.host.children).filter(p(t))}initSlot(t){let e=t||d.anonymous,o=this.nodes.get(e)?.slot?.assignedElements?.()??this.getChildrenForSlot(e),s=t?`slot[name="${t}"]`:"slot:not([name])",n=this.host.shadowRoot?.querySelector?.(s)??null,r=!!o.length;this.nodes.set(e,{elements:o,name:t??"",hasContent:r,slot:n}),this.logger.log(t,r)}init(){this.nodes.clear(),this.slotNames.forEach(this.initSlot),Object.values(this.deprecations).forEach(this.initSlot),this.host.requestUpdate()}},l=d;l.anonymous=Symbol("anonymous slot"),a([h],l.prototype,"onSlotChange",1),a([h],l.prototype,"onMutation",1),a([h],l.prototype,"initSlot",1),a([h],l.prototype,"init",1);export{l as SlotController};
-//# sourceMappingURL=slot-controller.js.map
+import { __decorate } from "tslib";
+import { bound } from '../decorators/bound.js';
+import { Logger } from './logger.js';
+function isObjectConfigSpread(config) {
+    return config.length === 1 && typeof config[0] === 'object' && config[0] !== null;
+}
+/**
+ * If it's a named slot, return its children,
+ * for the default slot, look for direct children not assigned to a slot
+ */
+const isSlot = (n) => (child) => n === SlotController.anonymous ? !child.hasAttribute('slot')
+    : child.getAttribute('slot') === n;
+export class SlotController {
+    constructor(host, ...config) {
+        this.host = host;
+        this.nodes = new Map();
+        this.firstUpdated = false;
+        this.mo = new MutationObserver(this.onMutation);
+        this.deprecations = {};
+        this.logger = new Logger(this.host);
+        if (isObjectConfigSpread(config)) {
+            const [{ slots, deprecations }] = config;
+            this.slotNames = slots;
+            this.deprecations = deprecations ?? {};
+        }
+        else if (config.length >= 1) {
+            this.slotNames = config;
+            this.deprecations = {};
+        }
+        else {
+            this.slotNames = [null];
+        }
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host.addEventListener('slotchange', this.onSlotChange);
+        this.firstUpdated = false;
+        this.mo.observe(this.host, { childList: true });
+        this.init();
+    }
+    hostUpdated() {
+        if (!this.firstUpdated) {
+            this.slotNames.forEach(this.initSlot);
+            this.firstUpdated = true;
+        }
+    }
+    hostDisconnected() {
+        this.mo.disconnect();
+    }
+    /**
+     * Returns a boolean statement of whether or not any of those slots exists in the light DOM.
+     *
+     * @param {String|Array} name The slot name.
+     * @example this.hasSlotted("header");
+     */
+    hasSlotted(...names) {
+        if (!names.length) {
+            this.logger.warn(`Please provide at least one slot name for which to search.`);
+            return false;
+        }
+        else {
+            return names.some(x => this.nodes.get(x)?.hasContent ?? false);
+        }
+    }
+    /**
+     * Given a slot name or slot names, returns elements assigned to the requested slots as an array.
+     * If no value is provided, it returns all children not assigned to a slot (without a slot attribute).
+     *
+     * @example Get header-slotted elements
+     * ```js
+     * this.getSlotted('header')
+     * ```
+     *
+     * @example Get header- and footer-slotted elements
+     * ```js
+     * this.getSlotted('header', 'footer')
+     * ```
+     *
+     * @example Get default-slotted elements
+     * ```js
+     * this.getSlotted();
+     * ```
+     */
+    getSlotted(...slotNames) {
+        if (!slotNames.length) {
+            return (this.nodes.get(SlotController.anonymous)?.elements ?? []);
+        }
+        else {
+            return slotNames.flatMap(slotName => this.nodes.get(slotName)?.elements ?? []);
+        }
+    }
+    onSlotChange(event) {
+        const slotName = event.target.name;
+        this.initSlot(slotName);
+        this.host.requestUpdate();
+    }
+    async onMutation(records) {
+        const changed = [];
+        for (const { addedNodes, removedNodes } of records) {
+            for (const node of [...addedNodes, ...removedNodes]) {
+                if (node instanceof HTMLElement && node.slot) {
+                    this.initSlot(node.slot);
+                    changed.push(node.slot);
+                }
+            }
+        }
+        if (changed.length) {
+            this.host.requestUpdate();
+        }
+    }
+    getChildrenForSlot(name) {
+        const children = Array.from(this.host.children);
+        return children.filter(isSlot(name));
+    }
+    initSlot(slotName) {
+        const name = slotName || SlotController.anonymous;
+        const elements = this.nodes.get(name)?.slot?.assignedElements?.() ?? this.getChildrenForSlot(name);
+        const selector = slotName ? `slot[name="${slotName}"]` : 'slot:not([name])';
+        const slot = this.host.shadowRoot?.querySelector?.(selector) ?? null;
+        const hasContent = !!elements.length;
+        this.nodes.set(name, { elements, name: slotName ?? '', hasContent, slot });
+        this.logger.log(slotName, hasContent);
+    }
+    /**
+     * Maps the defined slots into an object that is easier to query
+     */
+    init() {
+        this.nodes.clear();
+        // Loop over the properties provided by the schema
+        this.slotNames.forEach(this.initSlot);
+        Object.values(this.deprecations).forEach(this.initSlot);
+        this.host.requestUpdate();
+    }
+}
+SlotController.anonymous = Symbol('anonymous slot');
+__decorate([
+    bound
+], SlotController.prototype, "onSlotChange", null);
+__decorate([
+    bound
+], SlotController.prototype, "onMutation", null);
+__decorate([
+    bound
+], SlotController.prototype, "initSlot", null);
+__decorate([
+    bound
+], SlotController.prototype, "init", null);
+//# sourceMappingURL=slot-controller.js.map

controllers/style-controller.js

@@ -1,2 +0,42 @@
-import{getCompatibleStyle as i,supportsAdoptingStyleSheets as n}from"lit";var l=class{constructor(t,e){this.host=t;this.styles=e;this.stylesAdopted=!1;t.addController(this)}hostConnected(){if(this.stylesAdopted||!(this.host.renderRoot instanceof ShadowRoot))return;let t=[this.styles].flatMap(e=>i(e)).filter(e=>!!e);n?this.host.renderRoot.adoptedStyleSheets=[...t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet),...this.host.renderRoot.adoptedStyleSheets??[]]:t.forEach(e=>{let s=document.createElement("style"),o=window.litNonce;o!==void 0&&s.setAttribute("nonce",o),s.textContent=e.cssText,this.host.renderRoot.appendChild(s)}),this.stylesAdopted=!0}};export{l as StyleController};
-//# sourceMappingURL=style-controller.js.map
+import { getCompatibleStyle, supportsAdoptingStyleSheets } from 'lit';
+/**
+ * Controller which adds styles to it's host element.
+ * Like `static styles = []`, except a controller.
+ * Should typically only be used within other controllers.
+ */
+export class StyleController {
+    constructor(host, 
+    /** These styles will be applied to the host element */
+    styles) {
+        this.host = host;
+        this.styles = styles;
+        this.stylesAdopted = false;
+        host.addController(this);
+    }
+    hostConnected() {
+        if (this.stylesAdopted || !(this.host.renderRoot instanceof ShadowRoot)) {
+            return;
+        }
+        const styles = [this.styles].flatMap(x => getCompatibleStyle(x)).filter(x => !!x);
+        if (supportsAdoptingStyleSheets) {
+            this.host.renderRoot.adoptedStyleSheets = [
+                ...styles.map(x => x instanceof CSSStyleSheet ? x : x.styleSheet),
+                ...this.host.renderRoot.adoptedStyleSheets ?? [],
+            ];
+        }
+        else {
+            styles.forEach(s => {
+                const style = document.createElement('style');
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const nonce = window['litNonce'];
+                if (nonce !== undefined) {
+                    style.setAttribute('nonce', nonce);
+                }
+                style.textContent = s.cssText;
+                this.host.renderRoot.appendChild(style);
+            });
+        }
+        this.stylesAdopted = true;
+    }
+}
+//# sourceMappingURL=style-controller.js.map

core.d.ts

 import type { ComplexAttributeConverter } from 'lit';
-export type { ColorPalette, ColorTheme } from './controllers/color-context.js';
 /** PatternFly Elements global config object */
@@ -37,1 +36,2 @@ export interface PfeConfig {
 }
+export {};

core.js

@@ -1,2 +0,68 @@
-var o=Symbol();function r(e){return document.head.querySelector(`meta[name="${e}"]`)?.content}function l(e=o){return e!==o&&(window.PfeConfig.trackPerformance=!!e),window.PfeConfig.trackPerformance}var i={fromAttribute(e){return typeof e!="string"?null:e.split(",").map(t=>t.trim()).map(t=>parseInt(t,10))},toAttribute(e){return e.join(",")}},n=class extends Event{constructor(t,f){super(t,{bubbles:!0,composed:!0,...f})}},a=document.body.hasAttribute("no-auto-reveal");window.PfeConfig=Object.assign(window.PfeConfig??{},{trackPerformance:window.PfeConfig?.trackPerformance??r("pfe-track-performance")==="true",autoReveal:window.PfeConfig?.autoReveal??(a?!a:r("pfe-auto-reveal")==="true"),get log(){return!!localStorage.pfeLog},set log(e){e?localStorage.setItem("pfeLog",`${!0}`):localStorage.removeItem("pfeLog")}});export{n as ComposedEvent,i as NumberListConverter,l as trackPerformance};
-//# sourceMappingURL=core.js.map
+const noPref = Symbol();
+/** Retrieve an HTML metadata item */
+function getMeta(name) {
+    return document.head.querySelector(`meta[name="${name}"]`)?.content;
+}
+/**
+ * A boolean value that indicates if the performance should be tracked.
+ * For use in a JS file or script tag; can also be added in the constructor of a component during development.
+ * @example trackPerformance(true);
+ */
+export function trackPerformance(preference = noPref) {
+    if (preference !== noPref) {
+        window.PfeConfig.trackPerformance = !!preference;
+    }
+    return window.PfeConfig.trackPerformance;
+}
+/**
+ * A LitElement property converter which represents a list of numbers as a comma separated string
+ * @see https://lit.dev/docs/components/properties/#conversion-converter
+ */
+export const NumberListConverter = {
+    fromAttribute(value) {
+        if (typeof value !== 'string') {
+            return null;
+        }
+        else {
+            return value.split(',').map(x => x.trim()).map(x => parseInt(x, 10));
+        }
+    },
+    toAttribute(value) {
+        return value.join(',');
+    },
+};
+/**
+ * A composed, bubbling event for UI interactions
+ * e.g. when an accordion panel opens.
+ */
+export class ComposedEvent extends Event {
+    constructor(type, init) {
+        super(type, {
+            bubbles: true,
+            composed: true,
+            ...init
+        });
+    }
+}
+const bodyNoAutoReveal = document.body.hasAttribute('no-auto-reveal');
+/** Global patternfly elements config */
+window.PfeConfig = Object.assign(window.PfeConfig ?? {}, {
+    trackPerformance: window.PfeConfig?.trackPerformance ?? getMeta('pf-track-performance') === 'true',
+    // if the body tag has `no-auto-reveal` attribute, reveal immediately
+    // if `<meta name="pf-auto-reveal">` exists, and it's `content` is 'true',
+    // then auto-reveal the body
+    autoReveal: window.PfeConfig?.autoReveal ?? (bodyNoAutoReveal ? !bodyNoAutoReveal
+        : getMeta('pf-auto-reveal') === 'true'),
+    get log() {
+        return !!localStorage.pfeLog;
+    },
+    set log(v) {
+        if (v) {
+            localStorage.setItem('pfeLog', `${true}`);
+        }
+        else {
+            localStorage.removeItem('pfeLog');
+        }
+    },
+});
+//# sourceMappingURL=core.js.map

decorators.d.ts

 export * from './decorators/bound.js';
 export * from './decorators/cascades.js';
-export * from './decorators/color-context.js';
 export * from './decorators/deprecation.js';
 export * from './decorators/initializer.js';
 export * from './decorators/observed.js';
-export * from './decorators/pfelement.js';
 export * from './decorators/time.js';
 export * from './decorators/trace.js';

decorators.js

@@ -1,2 +0,8 @@
-export*from"./decorators/bound.js";export*from"./decorators/cascades.js";export*from"./decorators/color-context.js";export*from"./decorators/deprecation.js";export*from"./decorators/initializer.js";export*from"./decorators/observed.js";export*from"./decorators/pfelement.js";export*from"./decorators/time.js";export*from"./decorators/trace.js";
-//# sourceMappingURL=decorators.js.map
+export * from './decorators/bound.js';
+export * from './decorators/cascades.js';
+export * from './decorators/deprecation.js';
+export * from './decorators/initializer.js';
+export * from './decorators/observed.js';
+export * from './decorators/time.js';
+export * from './decorators/trace.js';
+//# sourceMappingURL=decorators.js.map

decorators/bound.js

@@ -1,2 +0,27 @@
-function o(n,e,t){if(typeof t?.value!="function")throw new TypeError(`Only methods can be decorated with @bound. <${e??n.name}> is not a method!`);return{configurable:!0,get(){let r=t.value.bind(this);return Object.defineProperty(this,e,{value:r,configurable:!0,writable:!0}),r}}}export{o as bound};
-//# sourceMappingURL=bound.js.map
+const configurable = true;
+/**
+ * Binds a class method to the instance
+ *
+ * @example Binding an event listener
+ *     ```ts
+ *     private mo = new MutationObserver(this.onMutation);
+ *
+ *     @bound onMutation(records: MutationRecord[]) {
+ *       this.count = this.children.length;
+ *     }
+ *     ```
+ */
+export function bound(_, key, descriptor) {
+    if (typeof descriptor?.value !== 'function') {
+        throw new TypeError(`Only methods can be decorated with @bound. <${key ?? _.name}> is not a method!`);
+    } /* c8 ignore next */
+    return {
+        configurable,
+        get() {
+            const value = descriptor.value.bind(this);
+            Object.defineProperty(this, key, { value, configurable, writable: true });
+            return value;
+        },
+    };
+}
+//# sourceMappingURL=bound.js.map

decorators/cascades.js

@@ -1,2 +0,18 @@
-import{CascadeController as t}from"../controllers/cascade-controller.js";function s(...n){return function(r,i){r.constructor.addInitializer(o=>{let e=o;t.instances.has(e)||t.instances.set(e,new t(e)),t.instances.get(e)?.initProp(i,n)})}}export{s as cascades};
-//# sourceMappingURL=cascades.js.map
+import { CascadeController } from '../controllers/cascade-controller.js';
+/**
+ * Cascades the decorated attribute to children
+ */
+export function cascades(...items) {
+    return function (proto, key) {
+        proto.constructor.addInitializer(x => {
+            const instance = x;
+            // You can have multiple `@cascades` decorators on an element
+            // and it will only get one CascadeController for all of them
+            if (!CascadeController.instances.has(instance)) {
+                CascadeController.instances.set(instance, new CascadeController(instance));
+            }
+            CascadeController.instances.get(instance)?.initProp(key, items);
+        });
+    };
+}
+//# sourceMappingURL=cascades.js.map

decorators/deprecation.js

@@ -1,2 +0,44 @@
-import{Logger as p}from"../controllers/logger.js";function d(r){return function(e,t){let{alias:a,...n}=r,o=e.constructor,l=o.getPropertyOptions(a);o.createProperty(t,{...l,...n}),o.addInitializer(s=>{s.addController(new i(s,r,t))})}}var i=class{constructor(e,t,a){this.host=e;this.options=t;this.deprecatedKey=a;this.logged=!1;this.logger=new p(e)}hostUpdate(){let{deprecatedKey:e,options:{alias:t}}=this;this.host[e]&&this.host[t]!==this.host[e]&&(this.logged||(this.logger.warn(`${e} is deprecated, use ${t} instead`),this.logged=!0),this.host[t]=this.host[e])}};export{d as deprecation};
-//# sourceMappingURL=deprecation.js.map
+import { Logger } from '../controllers/logger.js';
+/**
+ * Aliases the decorated field to an existing property, and logs a warning if it is used
+ * @example deprecating an attribute
+ * ```ts
+ * @property({ reflect: true, attribute: 'color-palette'})
+ * colorPalette: ColorPalette = 'base';
+ *
+ * @deprecation('colorPalette') color?: ColorPalette;
+ * ```
+ */
+export function deprecation(options) {
+    return function (proto, key) {
+        const { alias, ...deprecationOptions } = options;
+        const klass = proto.constructor;
+        const declaration = klass.getPropertyOptions(alias);
+        klass.createProperty(key, { ...declaration, ...deprecationOptions });
+        klass.addInitializer(instance => {
+            instance.addController(new Deprecation(instance, options, key));
+        });
+    };
+}
+class Deprecation {
+    constructor(host, options, deprecatedKey) {
+        this.host = host;
+        this.options = options;
+        this.deprecatedKey = deprecatedKey;
+        this.logged = false;
+        this.logger = new Logger(host);
+    }
+    hostUpdate() {
+        const { deprecatedKey, options: { alias } } = this;
+        if (this.host[deprecatedKey]) {
+            if (this.host[alias] !== this.host[deprecatedKey]) {
+                if (!this.logged) {
+                    this.logger.warn(`${deprecatedKey} is deprecated, use ${alias} instead`);
+                    this.logged = true;
+                }
+                this.host[alias] = this.host[deprecatedKey];
+            }
+        }
+    }
+}
+//# sourceMappingURL=deprecation.js.map

decorators/initializer.js

@@ -1,2 +0,21 @@
-import{LightDOMController as l}from"../controllers/light-dom-controller.js";function c(n){return function(t,o){t.constructor.addInitializer(e=>{let i=t[o],r=new l(e,i,n);e.isConnected&&r.hostConnected()})}}export{c as initializer};
-//# sourceMappingURL=initializer.js.map
+import { LightDOMController } from '../controllers/light-dom-controller.js';
+/**
+ * Runs the decorated method in `connectedCallback`,
+ * provided the element has light children, and sets
+ * up a mutation observer to re-run the callback,
+ * unless opted-out with `{ observe: false }`
+ * @param  options        Set `observe` to `false` to skip mutation observer setup, or pass a MutationObserverInit as options
+ */
+export function initializer(options) {
+    return function (proto, key) {
+        // @TODO: allow multiple initializers
+        proto.constructor.addInitializer(instance => {
+            const initializer = proto[key];
+            const controller = new LightDOMController(instance, initializer, options);
+            if (instance.isConnected) {
+                controller.hostConnected();
+            }
+        });
+    };
+}
+//# sourceMappingURL=initializer.js.map

decorators/observed.js

@@ -1,2 +0,52 @@
-import{observedController as l,PropertyObserverController as a}from"../controllers/property-observer-controller.js";function p(...o){if(o.length===1){let[e]=o;return function(t,r){t.constructor.addInitializer(n=>new a(n)),c(t,r,e)}}else{let[e,t]=o;e.constructor.addInitializer(r=>new a(r)),c(e,t)}}function c(o,e,t){let r=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(o,e,{...r,configurable:!0,set(n){let i=this[e];if(r?.set?.call(this,n),typeof t=="function")t.call(this,i,n);else{let s=t||`_${e}Changed`;this.hasUpdated?this[s]?.(i,n):this[l].cache(e,s,i,n)}}})}export{c as observeProperty,p as observed};
-//# sourceMappingURL=observed.js.map
+import { observedController, PropertyObserverController, } from '../controllers/property-observer-controller.js';
+export function observed(...as) {
+    /** @observed('_myCustomChangeCallback') */
+    if (as.length === 1) {
+        const [methodNameOrCallback] = as;
+        return function (proto, key) {
+            proto.constructor
+                .addInitializer(x => new PropertyObserverController(x));
+            observeProperty(proto, key, methodNameOrCallback);
+        };
+    }
+    else {
+        const [proto, key] = as;
+        proto.constructor
+            .addInitializer(x => new PropertyObserverController(x));
+        observeProperty(proto, key);
+    }
+}
+export function observeProperty(proto, key, callbackOrMethod) {
+    const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+    Object.defineProperty(proto, key, {
+        ...descriptor,
+        configurable: true,
+        set(newVal) {
+            const oldVal = this[key];
+            // first, call any pre-existing setters, e.g. `@property`
+            descriptor?.set?.call(this, newVal);
+            // if the user passed a callback, call it
+            // e.g. `@observed((_, newVal) => console.log(newVal))`
+            // safe to call before connectedCallback, because it's impossible to get a `this` ref.
+            if (typeof callbackOrMethod === 'function') {
+                callbackOrMethod.call(this, oldVal, newVal);
+            }
+            else {
+                // if the user passed a string method name, call it on `this`
+                // e.g. `@observed('_renderOptions')`
+                // otherwise, use a default method name e.g. `_fooChanged`
+                const actualMethodName = callbackOrMethod || `_${key}Changed`;
+                // if the component has already connected to the DOM, run the callback
+                // otherwise, If the component has not yet connected to the DOM,
+                // cache the old and new values. See PropertyObserverController above
+                if (this.hasUpdated) {
+                    this[actualMethodName]?.(oldVal, newVal);
+                }
+                else {
+                    this[observedController].cache(key, actualMethodName, oldVal, newVal);
+                }
+            }
+        },
+    });
+}
+//# sourceMappingURL=observed.js.map

decorators/time.js

@@ -1,2 +0,36 @@
-function u(f){return function(m,i,e){let{value:o}=e??{};if(typeof o!="function")throw new Error("@time() may only decorate class methods");e.value=function(...s){let n=f??`${this.constructor.name}-${i}`,t=`start-${n}`,c=`end-${n}`;window.PfeConfig.trackPerformance&&performance.mark(t);let r=o.call(this,...s),a=()=>(window.PfeConfig.trackPerformance&&(performance.mark(c),performance.measure(n,t,c),console.log(Array.from(performance.getEntriesByName(n)).pop())),r);return r instanceof Promise?r.then(a):a()}}}export{u as time};
-//# sourceMappingURL=time.js.map
+/**
+ * Tracks the time a method takes to complete using the [performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
+ */
+export function time(tag) {
+    return function (_, key, descriptor) {
+        const { value: f } = descriptor ?? {};
+        if (!(typeof f === 'function')) {
+            throw new Error('@time() may only decorate class methods');
+        }
+        descriptor.value = function (...args) {
+            const TAG = tag ?? `${this.constructor.name}-${key}`;
+            const START_TAG = `start-${TAG}`;
+            const END_TAG = `end-${TAG}`;
+            if (window.PfeConfig.trackPerformance) {
+                performance.mark(START_TAG);
+            }
+            const x = f.call(this, ...args);
+            const ret = () => {
+                if (window.PfeConfig.trackPerformance) {
+                    performance.mark(END_TAG);
+                    performance.measure(TAG, START_TAG, END_TAG);
+                    // eslint-disable-next-line no-console
+                    console.log(Array.from(performance.getEntriesByName(TAG)).pop());
+                }
+                return x;
+            };
+            if (x instanceof Promise) {
+                return x.then(ret);
+            }
+            else {
+                return ret();
+            }
+        };
+    };
+}
+//# sourceMappingURL=time.js.map

decorators/trace.js

@@ -1,2 +0,21 @@
-function i(r){return function(u,o,t){let{value:c}=t;t.value=function(...s){let n=c.call(this,...s),e=()=>(console.log(r??o,n),n);return n instanceof Promise?n.then(e):e()}}}export{i as trace};
-//# sourceMappingURL=trace.js.map
+/** Logs the result of a class method */
+export function trace(tag) {
+    return function (_, key, descriptor) {
+        const { value: f } = descriptor;
+        descriptor.value = function (...args) {
+            const x = f.call(this, ...args);
+            const ret = () => {
+                // eslint-disable-next-line no-console
+                console.log(tag ?? key, x);
+                return x;
+            };
+            if (x instanceof Promise) {
+                return x.then(ret);
+            }
+            else {
+                return ret();
+            }
+        };
+    };
+}
+//# sourceMappingURL=trace.js.map

functions/debounce.js

@@ -1,2 +0,28 @@
-function a(t,l,o=!1){let n;return function(...e){let u=this,c=function(){n=null,o||t.apply(u,e)},i=o&&!n;clearTimeout(n),n=window.setTimeout(c,l),i&&t.apply(u,e)}}export{a as debounce};
-//# sourceMappingURL=debounce.js.map
+/**
+ * Debounce helper function
+ * @see https://davidwalsh.name/javascript-debounce-function
+ *
+ * @param  func Function to be debounced
+ * @param  delay How long until it will be run
+ * @param  immediate Whether it should be run at the start instead of the end of the debounce
+ */
+export function debounce(func, delay, immediate = false) {
+    let timeout;
+    return function (...args) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const context = this;
+        const later = function () {
+            timeout = null;
+            if (!immediate) {
+                func.apply(context, args);
+            }
+        };
+        const callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = window.setTimeout(later, delay);
+        if (callNow) {
+            func.apply(context, args);
+        }
+    };
+}
+//# sourceMappingURL=debounce.js.map

functions/deprecatedCustomEvent.js

@@ -1,2 +0,12 @@
-function n(e,t){return new CustomEvent(e,{bubbles:!0,composed:!0,detail:t})}export{n as deprecatedCustomEvent};
-//# sourceMappingURL=deprecatedCustomEvent.js.map
+/**
+ * Construct a CustomEvent with the given name and detail.
+ * The event bubbles and is composed.
+ */
+export function deprecatedCustomEvent(name, detail) {
+    return new CustomEvent(name, {
+        bubbles: true,
+        composed: true,
+        detail,
+    });
+}
+//# sourceMappingURL=deprecatedCustomEvent.js.map

functions/isElementInView.js

@@ -1,2 +0,31 @@
-function d(s,c,a=!1,r=!1){if(!s||!c)return!1;let t=s.getBoundingClientRect(),n=c.getBoundingClientRect(),e=Math.ceil(t.left),o=Math.floor(t.right),i=Math.ceil(n.left),l=Math.floor(n.right),f=i>=e&&l<=o,u=(a||!r&&t.width<n.width)&&(i<e&&l>e||l>o&&i<o);return f||u}export{d as isElementInView};
-//# sourceMappingURL=isElementInView.js.map
+/**
+ * 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
+ *
+ * @returns True if the component is in View.
+ */
+export function isElementInView(container, element, partial = false, strict = false) {
+    if (!container || !element) {
+        return false;
+    }
+    const containerBounds = container.getBoundingClientRect();
+    const elementBounds = element.getBoundingClientRect();
+    const containerBoundsLeft = Math.ceil(containerBounds.left);
+    const containerBoundsRight = Math.floor(containerBounds.right);
+    const elementBoundsLeft = Math.ceil(elementBounds.left);
+    const elementBoundsRight = Math.floor(elementBounds.right);
+    // Check if in view
+    const isTotallyInView = elementBoundsLeft >= containerBoundsLeft &&
+        elementBoundsRight <= containerBoundsRight;
+    const isPartiallyInView = (partial || (!strict && containerBounds.width < elementBounds.width)) &&
+        ((elementBoundsLeft < containerBoundsLeft && elementBoundsRight > containerBoundsLeft) ||
+            (elementBoundsRight > containerBoundsRight && elementBoundsLeft < containerBoundsRight));
+    // Return outcome
+    return isTotallyInView || isPartiallyInView;
+}
+//# sourceMappingURL=isElementInView.js.map

functions/random.js

@@ -1,2 +0,9 @@
-function n(t="pfe"){return`${t}-${Math.random().toString(36).substr(2,9)}`}export{n as getRandomId};
-//# sourceMappingURL=random.js.map
+/**
+ * A quick way to fetch a random ID value.
+ * _Note:_ All values are prefixed automatically to ensure an ID-safe value is returned.
+ * @param  prefix id-safe string prefix
+ */
+export function getRandomId(prefix = 'pfe') {
+    return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+//# sourceMappingURL=random.js.map

package.json

 {
   "name": "@patternfly/pfe-core",
-  "version": "2.0.0-next.14",
+  "version": "2.0.0-rc.1",
   "license": "MIT",
@@ -13,7 +13,9 @@ "description": "PatternFly Elements Core Library",
     ".": "./core.js",
+    "./*": "./*",
+    "./controllers/*": "./controllers/*",
+    "./decorators/*": "./decorators/*",
+    "./functions/*": "./functions/*",
     "./core.js": "./core.js",
-    "./context.js": "./context.js",
     "./decorators.js": "./decorators.js",
     "./controllers/cascade-controller.js": "./controllers/cascade-controller.js",
-    "./controllers/color-context.js": "./controllers/color-context.js",
     "./controllers/css-variable-controller.js": "./controllers/css-variable-controller.js",
@@ -32,7 +34,5 @@ "./controllers/floating-dom-controller.js": "./controllers/floating-dom-controller.js",
     "./decorators/cascades.js": "./decorators/cascades.js",
-    "./decorators/color-context.js": "./decorators/color-context.js",
     "./decorators/deprecation.js": "./decorators/deprecation.js",
     "./decorators/initializer.js": "./decorators/initializer.js",
     "./decorators/observed.js": "./decorators/observed.js",
-    "./decorators/pfelement.js": "./decorators/pfelement.js",
     "./decorators/time.js": "./decorators/time.js",
@@ -50,22 +50,8 @@ "./decorators/trace.js": "./decorators/trace.js",
   "scripts": {
-    "⚙️-----UTIL-------⚙️": "❓ Manages the repo",
     "clean": "git clean -fX -e node_modules -e tsconfig.tsbuildinfo",
-    "🚚-----DIST-------🚚": "❓ Publish packages",
-    "prepublishOnly": "npm run build",
-    "👷‍♀️-----BUILD------👷‍♀️": "❓ Prepare dist artifacts",
     "analyze": "cem analyze",
-    "build": "run-s build:*",
-    "build:clean": "npm run clean",
-    "build:esbuild": "node ../../scripts/build.js --include pfe-core --workspace core",
-    "build:analyze": "npm run analyze",
-    "build:types": "tsc -b .",
-    "🧑‍🔬-----TEST-------🧑‍🔬": "❓ Test packages",
-    "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js",
-    "👷‍♀️-----DEV--------👷‍♀️": "❓ Development aids",
-    "test:watch": "npm test -- --watch",
-    "watch:analyze": "npm run analyze -- --watch",
-    "watch:types": "tsc -w"
+    "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.5",
+    "@floating-ui/dom": "^1.1.0",
     "lit": "2.3.0"
@@ -83,3 +69,2 @@ },
     "**/*.LEGAL.txt",
-    "**/*.scss",
     "**/*.css",
@@ -86,0 +71,0 @@ "!*.ts",

README.md

@@ -22,4 +22,4 @@ # `@patternfly/pfe-core`
 - `@observed` - runs a callback when the decorated property changes
-- `@pfelement` - enabled body auto-reveal as well as colour context and other PFE features
-- `@time` - tracks the time a method takes to complete using the [performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
+- `@time` - tracks the time a method takes to complete using the [performance 
+  API](https://developer.mozilla.org/en-US/docs/Web/API/Performance)
 - `@trace` - debug decorator which logs the name and result of a class method whenever it runs
@@ -26,0 +26,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

359672

increased by96.85%

Lines of code

8266

increased by786.91%

Worsened metrics

Number of package files

79

decreased by-14.13%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@floating-ui/dom@^1.1.0