@patternfly/pfe-core 2.0.0-next.0

package/LICENSE.txt

@@ -0,0 +1,19 @@
+Copyright 2021 Red Hat, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+# `@patternfly/pfe-core`
+
+Utilities for building PatternFly elements.
+
+## Controllers
+
+- `CascadeController` - cascades configured properties/attributes to child elements
+- `ColorContextController` - enables colour context detection
+- `CssVariableController` - caches computed styles
+- `LightDOMController` - controls a light-DOM mutation observer
+- `Logger` - logging utilities
+- `PerfController` - measures element upgrading performance
+- `PropertyObserverController` - caches set values for observed properties until element is updated
+- `SlotController` - utilities for managing slots and slotted content
+
+## Decorators
+
+- `@bound` - binds a decorated method to the object instance
+- `@cascades` - cascades the decorated property to configured light and shadow child elements
+- `@initializer` - executes a decorated method when the element upgrades and on DOM mutations (opt-out)
+- `@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)
+- `@trace` - debug decorator which logs the name and result of a class method whenever it runs
+
+## Directives
+
+- `when` - element-position directive which adds or removes an element depending on a condition
+
+## Functions
+
+- `debounce` - debounce a function
+- `deprecatedCustomEvent` - create (deprecated) composed `CustomEvent`s
+- `getRandomId` - generate a random element ID, optionally with a given prefix

package/context.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Context Protocol
+ * @link https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md
+ */
+/**
+ * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.
+ */
+export declare type Context<T> = {
+    name: string;
+    initialValue?: T;
+};
+/**
+ * An unknown context typeU
+ */
+export declare type UnknownContext = Context<unknown>;
+/**
+ * A helper type which can extract a Context value type from a Context type
+ */
+export declare type ContextType<T extends UnknownContext> = T extends Context<infer Y> ? Y : never;
+/**
+ * A function which creates a Context value object
+ */
+export declare function createContext<T>(name: string, initialValue?: T): Readonly<Context<T>>;
+/**
+ * A callback which is provided by a context requester and is called with the value satisfying the request.
+ * This callback can be called multiple times by context providers as the requested value is changed.
+ */
+export declare type ContextCallback<ValueType> = (value: ValueType, dispose?: () => void) => void;
+/**
+ * An event fired by a context requester to signal it desires a named context.
+ *
+ * A provider should inspect the `context` property of the event to determine if it has a value that can
+ * satisfy the request, calling the `callback` with the requested value if so.
+ *
+ * If the requested context event contains a truthy `multiple` value, then a provider can call the callback
+ * multiple times if the value is changed, if this is the case the provider should pass a `dispose`
+ * method to the callback which requesters can invoke to indicate they no longer wish to receive these updates.
+ */
+export declare class ContextEvent<T extends UnknownContext> extends Event {
+    readonly context: T;
+    readonly callback: ContextCallback<ContextType<T>>;
+    readonly multiple?: boolean | undefined;
+    constructor(context: T, callback: ContextCallback<ContextType<T>>, multiple?: boolean | undefined);
+}
+declare global {
+    interface HTMLElementEventMap {
+        /**
+         * A 'context-request' event can be emitted by any element which desires
+         * a context value to be injected by an external provider.
+         */
+        'context-request': ContextEvent<UnknownContext>;
+    }
+}

package/context.js

@@ -0,0 +1,2 @@
+function x(e,t){return{name:e,initialValue:t}}var n=class extends Event{constructor(t,o,l){super("context-request",{bubbles:!0,composed:!0});this.context=t;this.callback=o;this.multiple=l}};export{n as ContextEvent,x as createContext};
+//# sourceMappingURL=context.js.map

package/context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["context.ts"],
+  "sourcesContent": ["/**\n * Context Protocol\n * @link https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md\n */\n\n/**\n * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.\n */\nexport type Context<T> = {\n  name: string;\n  initialValue?: T;\n};\n\n/**\n * An unknown context typeU\n */\nexport type UnknownContext = Context<unknown>;\n\n/**\n * A helper type which can extract a Context value type from a Context type\n */\nexport type ContextType<T extends UnknownContext> = T extends Context<infer Y>\n  ? Y\n  : never;\n\n/**\n * A function which creates a Context value object\n */\nexport function createContext<T>(\n  name: string,\n  initialValue?: T\n): Readonly<Context<T>> {\n  return {\n    name,\n    initialValue,\n  };\n}\n\n/**\n * A callback which is provided by a context requester and is called with the value satisfying the request.\n * This callback can be called multiple times by context providers as the requested value is changed.\n */\nexport type ContextCallback<ValueType> = (\n  value: ValueType,\n  dispose?: () => void\n) => void;\n\n/**\n * An event fired by a context requester to signal it desires a named context.\n *\n * A provider should inspect the `context` property of the event to determine if it has a value that can\n * satisfy the request, calling the `callback` with the requested value if so.\n *\n * If the requested context event contains a truthy `multiple` value, then a provider can call the callback\n * multiple times if the value is changed, if this is the case the provider should pass a `dispose`\n * method to the callback which requesters can invoke to indicate they no longer wish to receive these updates.\n */\nexport class ContextEvent<T extends UnknownContext> extends Event {\n  public constructor(\n    public readonly context: T,\n    public readonly callback: ContextCallback<ContextType<T>>,\n    public readonly multiple?: boolean\n  ) {\n    super('context-request', { bubbles: true, composed: true });\n  }\n}\n\ndeclare global {\n  interface HTMLElementEventMap {\n    /**\n     * A 'context-request' event can be emitted by any element which desires\n     * a context value to be injected by an external provider.\n     */\n    'context-request': ContextEvent<UnknownContext>;\n  }\n}\n"],
+  "mappings": "AA4BO,WACL,EACA,EACsB,CACtB,MAAO,CACL,OACA,gBAuBG,mBAAqD,MAAM,CACzD,YACW,EACA,EACA,EAChB,CACA,MAAM,kBAAmB,CAAE,QAAS,GAAM,SAAU,KAJpC,eACA,gBACA",
+  "names": []
+}

package/controllers/cascade-controller.d.ts

@@ -0,0 +1,43 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+export interface Options<E extends ReactiveElement> {
+    properties: Partial<Record<keyof E, string | string[]>>;
+    prefix?: string;
+}
+export declare class CascadeController<E extends ReactiveElement> implements ReactiveController {
+    host: E;
+    options?: Options<E> | undefined;
+    private class;
+    private logger;
+    static instances: WeakMap<ReactiveElement, CascadeController<ReactiveElement>>;
+    mo: MutationObserver;
+    cache: Map<string, string[]>;
+    constructor(host: E, options?: Options<E> | undefined);
+    hostUpdated(): void;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handles the cascading of properties to nested components when new elements are added
+     * Attribute updates/additions are handled by the attribute callback
+     */
+    cascadeProperties(nodeList?: HTMLCollection | NodeList): void;
+    /**
+     * 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: string, cascade: string | string[]): void;
+    private parse;
+    /**
+     * Copy the named attribute to a target element.
+     */
+    private _copyAttribute;
+    private _cascadeAttributes;
+    /**
+     * 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.
+     */
+    private _cascadeAttribute;
+}

package/controllers/cascade-controller.js

@@ -0,0 +1,2 @@
+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 d}from"../decorators/bound.js";import{debounce as f}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=f(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([d],c.prototype,"parse",1);export{c as CascadeController};
+//# sourceMappingURL=cascade-controller.js.map

package/controllers/cascade-controller.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["cascade-controller.ts"],
+  "sourcesContent": ["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { bound } from '../decorators/bound.js';\nimport { debounce } from '../functions/debounce.js';\nimport { Logger } from './logger.js';\n\nexport interface Options<E extends ReactiveElement> {\n  properties: Partial<Record<keyof E, string|string[]>>;\n  prefix?: string;\n}\n\nexport class CascadeController<E extends ReactiveElement> implements ReactiveController {\n  private class: typeof ReactiveElement;\n\n  private logger: Logger;\n\n  static instances: WeakMap<ReactiveElement, CascadeController<ReactiveElement>> = new WeakMap();\n\n  mo = new MutationObserver(this.parse);\n\n  cache = new Map<string, string[]>();\n\n  constructor(public host: E, public options?: Options<E>) {\n    this.class = host.constructor as typeof ReactiveElement;\n    this.logger = new Logger(this.host);\n    CascadeController.instances.set(host, this);\n    const properties = this.options?.properties ?? {} as Options<E>['properties'];\n    for (const [propName, cascade] of Object.entries(properties)) {\n      this.initProp(propName, cascade);\n    }\n    host.addController(this);\n    this.cascadeProperties = debounce(this.cascadeProperties, 1);\n  }\n\n  hostUpdated() {\n    this.cascadeProperties();\n  }\n\n  hostConnected() {\n    this.mo.observe(this.host, { attributes: true, childList: true });\n    this.cascadeProperties();\n  }\n\n  hostDisconnected() {\n    this.mo.disconnect();\n  }\n\n  /**\n   * Handles the cascading of properties to nested components when new elements are added\n   * Attribute updates/additions are handled by the attribute callback\n   */\n  cascadeProperties(nodeList: HTMLCollection|NodeList = this.host.children) {\n    if (this.host.isConnected) {\n      const selectors = this.cache.keys();\n\n      // Find out if anything in the nodeList matches any of the observed selectors for cacading properties\n      if (!nodeList) {\n        return this._cascadeAttributes(selectors, this.cache);\n      }\n\n\n      for (const node of nodeList) {\n        // if this node has a match function (i.e., it's an HTMLElement, not a text node),\n        if (node instanceof Element) {\n          // see if it matches one of the selectors, otherwise drop it (like it's hot).\n          for (const selector of selectors) {\n            // console.log('_copyAttribute', name, value, el.getAttribute(name));\n            if (node.matches(selector)) {\n              const attrNames = this.cache.get(selector);\n              // each selector can match multiple properties/attributes, so\n              // copy each of them\n              for (const attrName of attrNames ?? []) {\n                this._copyAttribute(attrName, node);\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n\n  /**\n   * Gets the configured attribute name for the decorated property,\n   * falling back to the lowercased property name, and caches the attribute name\n   * with it's designated child selectors for value-propagation on change\n   */\n  initProp(propName: string, cascade: string|string[]) {\n    for (const nodeItem of [cascade].flat(Infinity).filter(Boolean) as string[]) {\n      const { attribute } = this.class.getPropertyOptions(propName);\n\n      const attr =\n          typeof attribute === 'string' ? attribute\n        : propName.toLowerCase();\n\n      // Create an object with the node as the key and an array of attributes\n      // that are to be cascaded down to it\n      if (!this.cache.get(nodeItem)) {\n        this.cache.set(nodeItem, [attr]);\n      } else {\n        this.cache.get(nodeItem)?.push(attr);\n      }\n    }\n  }\n\n  @bound private parse(mutations: MutationRecord[]) {\n    // Iterate over the mutation list, look for cascade updates\n    for (const mutation of mutations ?? []) {\n      // If a new node is added, attempt to cascade attributes to it\n      if (mutation.type === 'childList' && mutation.addedNodes.length) {\n        this.cascadeProperties(mutation.addedNodes);\n      } else if (mutation.type === 'attributes') {\n        this._cascadeAttributes(this.cache.keys(), this.cache);\n      }\n    }\n  }\n\n  /**\n   * Copy the named attribute to a target element.\n   */\n  private async _copyAttribute(name: string, el: Element) {\n    this.logger.log(`copying ${name} to ${el}`);\n    const value = this.host.getAttribute(name);\n    if (el.isConnected) {\n      if (value == null) {\n        el.removeAttribute(name);\n      } else {\n        el.setAttribute(name, value);\n      }\n    }\n  }\n\n  private _cascadeAttributes(selectors: IterableIterator<string>, set: this['cache']) {\n    for (const selector of selectors) {\n      for (const attr of set.get(selector) ?? []) {\n        this._cascadeAttribute(attr, selector);\n      }\n    }\n  }\n\n  /**\n   * Trigger a cascade of the named attribute to any child elements that match\n   * the `to` selector.  The selector can match elements in the light DOM and\n   * shadow DOM.\n   * @param  name The name of the attribute to cascade (not necessarily the same as the property name).\n   * @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.\n   */\n  private _cascadeAttribute(name: string, to: string) {\n    const recipients = [\n      ...this.host.querySelectorAll(to),\n      ...this.host.shadowRoot?.querySelectorAll(to) ?? [],\n    ];\n\n    for (const node of recipients) {\n      this._copyAttribute(name, node);\n    }\n  }\n}\n"],
+  "mappings": "wMAEA,+CACA,oDACA,qCAOO,WAAiF,CAWtF,YAAmB,EAAgB,EAAsB,CAAtC,YAAgB,eAJnC,QAAK,GAAI,kBAAiB,KAAK,OAE/B,WAAQ,GAAI,KAGV,KAAK,MAAQ,EAAK,YAClB,KAAK,OAAS,GAAI,GAAO,KAAK,MAC9B,EAAkB,UAAU,IAAI,EAAM,MACtC,GAAM,GAAa,KAAK,SAAS,YAAc,GAC/C,OAAW,CAAC,EAAU,IAAY,QAAO,QAAQ,GAC/C,KAAK,SAAS,EAAU,GAE1B,EAAK,cAAc,MACnB,KAAK,kBAAoB,EAAS,KAAK,kBAAmB,GAG5D,aAAc,CACZ,KAAK,oBAGP,eAAgB,CACd,KAAK,GAAG,QAAQ,KAAK,KAAM,CAAE,WAAY,GAAM,UAAW,KAC1D,KAAK,oBAGP,kBAAmB,CACjB,KAAK,GAAG,aAOV,kBAAkB,EAAoC,KAAK,KAAK,SAAU,CACxE,GAAI,KAAK,KAAK,YAAa,CACzB,GAAM,GAAY,KAAK,MAAM,OAG7B,GAAI,CAAC,EACH,MAAO,MAAK,mBAAmB,EAAW,KAAK,OAIjD,OAAW,KAAQ,GAEjB,GAAI,YAAgB,UAElB,OAAW,KAAY,GAErB,GAAI,EAAK,QAAQ,GAAW,CAC1B,GAAM,GAAY,KAAK,MAAM,IAAI,GAGjC,OAAW,KAAY,IAAa,GAClC,KAAK,eAAe,EAAU,MAc5C,SAAS,EAAkB,EAA0B,CACnD,OAAW,KAAY,CAAC,GAAS,KAAK,KAAU,OAAO,SAAsB,CAC3E,GAAM,CAAE,aAAc,KAAK,MAAM,mBAAmB,GAE9C,EACF,MAAO,IAAc,SAAW,EAChC,EAAS,cAIb,AAAK,KAAK,MAAM,IAAI,GAGlB,KAAK,MAAM,IAAI,IAAW,KAAK,GAF/B,KAAK,MAAM,IAAI,EAAU,CAAC,KAOjB,MAAM,EAA6B,CAEhD,OAAW,KAAY,IAAa,GAElC,AAAI,EAAS,OAAS,aAAe,EAAS,WAAW,OACvD,KAAK,kBAAkB,EAAS,YACvB,EAAS,OAAS,cAC3B,KAAK,mBAAmB,KAAK,MAAM,OAAQ,KAAK,YAQxC,gBAAe,EAAc,EAAa,CACtD,KAAK,OAAO,IAAI,WAAW,QAAW,KACtC,GAAM,GAAQ,KAAK,KAAK,aAAa,GACrC,AAAI,EAAG,aACL,CAAI,GAAS,KACX,EAAG,gBAAgB,GAEnB,EAAG,aAAa,EAAM,IAKpB,mBAAmB,EAAqC,EAAoB,CAClF,OAAW,KAAY,GACrB,OAAW,KAAQ,GAAI,IAAI,IAAa,GACtC,KAAK,kBAAkB,EAAM,GAY3B,kBAAkB,EAAc,EAAY,CAClD,GAAM,GAAa,CACjB,GAAG,KAAK,KAAK,iBAAiB,GAC9B,GAAG,KAAK,KAAK,YAAY,iBAAiB,IAAO,IAGnD,OAAW,KAAQ,GACjB,KAAK,eAAe,EAAM,KA9IzB,IAKE,AALF,EAKE,UAA0E,GAAI,SAwFtE,GAAd,GAAc,AA7FV,EA6FU",
+  "names": []
+}

package/controllers/color-context-controller.d.ts

@@ -0,0 +1,41 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import type { ContextTheme } from '../core.js';
+export declare class ColorContextController implements ReactiveController {
+    protected host: ReactiveElement;
+    private prefix;
+    private callbacks;
+    private context;
+    private style;
+    private logger;
+    private dispose?;
+    constructor(host: ReactiveElement, prefix?: string);
+    /**
+     * When a context-aware component connects:
+     * 1. Request Context from the closest context provider (being another context-aware component)
+     * 2. Listen for child components' context-request events (become a provider)
+     */
+    hostConnected(): void;
+    /**
+     * When a context-aware component disconnects:
+     * 1. Remove all the components children from the cache of connected components
+     */
+    hostDisconnected(): void;
+    /**
+     * On every host update (i.e. render), update the host's and all it's children's context
+     */
+    hostUpdate(): void;
+    /** Was the context event fired requesting our colour-context context? */
+    private isColorContextEvent;
+    /** Return the current CSS `--context` value, or null */
+    private get contextVariable();
+    /** Register the dispose callback for hosts that requested multiple updates, then update the colour-context */
+    private contextCallback;
+    /**
+     * Provider part of context API
+     * When a child connects, claim its context-request event
+     * and add its callback to the Set of children if it requests multiple updates
+     */
+    private onChildContextEvent;
+    /** Sets the `on` attribute on the host and any children that requested multiple updates */
+    update(fallback?: ContextTheme | null): void;
+}

package/controllers/color-context-controller.js

@@ -0,0 +1,55 @@
+var f=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var r=(d,e,t,n)=>{for(var o=n>1?void 0:n?p(e,t):e,a=d.length-1,s;a>=0;a--)(s=d[a])&&(o=(n?s(e,t,o):s(o))||o);return n&&o&&f(e,t,o),o};import"lit";import{ContextEvent as k,createContext as m}from"../context.js";import{bound as c}from"../decorators/bound.js";import{Logger as u}from"./logger.js";import{StyleController as x}from"./style-controller.js";import{css as h}from"lit";var v=h`:host([context=dark]) {
+  --context: dark;
+}
+
+:host([context=light]) {
+  --context: light;
+}
+
+:host([context=accent]) {
+  --context: saturated;
+}
+
+:host([context=saturated]) {
+  --context: saturated;
+}
+
+:host([on=dark]) {
+  --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);
+  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);
+  --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);
+  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);
+  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);
+  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);
+  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);
+  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);
+  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);
+  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);
+}
+
+:host([on=saturated]) {
+  --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);
+  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);
+  --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);
+  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);
+  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);
+  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);
+  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);
+  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);
+  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);
+  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);
+}
+
+:host([on=light]) {
+  --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);
+  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);
+  --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);
+  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);
+  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);
+  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);
+  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);
+  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);
+  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);
+  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);
+}`,l=v;var i=class{constructor(e,t="pfe"){this.host=e;this.prefix=t;this.callbacks=new Set;this.style=window.getComputedStyle(e),this.context=m(`${this.prefix}-color-context`,this.contextVariable),this.logger=new u(e),new x(e,l),e.addController(this)}hostConnected(){this.host.dispatchEvent(new k(this.context,this.contextCallback,!0)),this.host.addEventListener("context-request",this.onChildContextEvent),this.update()}hostDisconnected(){this.dispose?.(),this.dispose=void 0,this.callbacks.forEach(e=>this.callbacks.delete(e))}hostUpdate(){this.update()}isColorContextEvent(e){return e.context.name===`${this.prefix}-color-context`}get contextVariable(){return this.style.getPropertyValue("--context").trim()||null}contextCallback(e,t){t&&t!==this.dispose&&this.dispose?.(),this.update(e),this.dispose=t}onChildContextEvent(e){this.isColorContextEvent(e)&&(e.stopPropagation(),e.multiple&&this.callbacks.add(e.callback),e.callback(this.host.getAttribute("on")))}update(e){let t=this.contextVariable||e,n=this.host.getAttribute("on");if(t!==n){let o=t;this.logger.log(`Resetting context from ${n} to ${o}`),o!=null?this.host.setAttribute("on",o):this.host.removeAttribute("on");for(let a of this.callbacks)a(t)}}};r([c],i.prototype,"contextCallback",1),r([c],i.prototype,"onChildContextEvent",1),r([c],i.prototype,"update",1);export{i as ColorContextController};
+//# sourceMappingURL=color-context-controller.js.map

package/controllers/color-context-controller.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["color-context-controller.ts", "color-context-controller.scss"],
+  "sourcesContent": ["import { ReactiveController, ReactiveElement } from 'lit';\nimport type { ContextTheme } from '../core.js';\nimport type { Context, UnknownContext } from '../context.js';\n\nimport { ContextEvent, createContext } from '../context.js';\nimport { bound } from '../decorators/bound.js';\nimport { Logger } from './logger.js';\nimport { StyleController } from './style-controller.js';\n\nimport CONTEXT_BASE_STYLES from './color-context-controller.scss';\n\nexport class ColorContextController implements ReactiveController {\n  private callbacks = new Set<ColorContextController['update']>();\n\n  private context: Context<ContextTheme|null>;\n\n  private style: CSSStyleDeclaration;\n\n  private logger: Logger;\n\n  private dispose?: () => void;\n\n  constructor(protected host: ReactiveElement, private prefix = 'pfe') {\n    this.style = window.getComputedStyle(host);\n    this.context = createContext(`${this.prefix}-color-context`, this.contextVariable);\n    this.logger = new Logger(host);\n    new StyleController(host, CONTEXT_BASE_STYLES);\n    host.addController(this);\n  }\n\n  /**\n   * When a context-aware component connects:\n   * 1. Request Context from the closest context provider (being another context-aware component)\n   * 2. Listen for child components' context-request events (become a provider)\n   */\n  hostConnected() {\n    // register as a context consumer on the nearest context-aware ancestor\n    this.host.dispatchEvent(new ContextEvent(this.context, this.contextCallback, true));\n    // become a context provider\n    this.host.addEventListener('context-request', this.onChildContextEvent);\n    // \uD83D\uDC83 \uD83D\uDD7A\n    this.update();\n  }\n\n  /**\n   * When a context-aware component disconnects:\n   * 1. Remove all the components children from the cache of connected components\n   */\n  hostDisconnected() {\n    this.dispose?.();\n    this.dispose = undefined;\n    this.callbacks.forEach(x => this.callbacks.delete(x));\n  }\n\n  /**\n   * On every host update (i.e. render), update the host's and all it's children's context\n   */\n  hostUpdate() {\n    this.update();\n  }\n\n  /** Was the context event fired requesting our colour-context context? */\n  private isColorContextEvent(\n    event: ContextEvent<UnknownContext>\n  ): event is ContextEvent<Context<ContextTheme|null>> {\n    return event.context.name === `${this.prefix}-color-context`;\n  }\n\n  /** Return the current CSS `--context` value, or null */\n  private get contextVariable(): ContextTheme | null {\n    return this.style.getPropertyValue('--context').trim() as ContextTheme || null;\n  }\n\n  /** Register the dispose callback for hosts that requested multiple updates, then update the colour-context */\n  @bound private contextCallback(value?: ContextTheme|null, dispose?: () => void) {\n    // protect against changing providers\n    if (dispose && dispose !== this.dispose) {\n      this.dispose?.();\n    }\n    this.update(value);\n    this.dispose = dispose;\n  }\n\n  /**\n   * Provider part of context API\n   * When a child connects, claim its context-request event\n   * and add its callback to the Set of children if it requests multiple updates\n   */\n  @bound private onChildContextEvent(event: ContextEvent<UnknownContext>) {\n    // only handle ContextEvents relevant to colour context\n    if (this.isColorContextEvent(event)) {\n      // claim the context-request event for ourselves (required by context protocol)\n      event.stopPropagation();\n      // Cache the callback for future updates, if requested\n      if (event.multiple) {\n        this.callbacks.add(event.callback);\n      }\n\n      // Run the callback to initialize the child's colour-context\n      event.callback(this.host.getAttribute('on') as ContextTheme);\n    }\n  }\n\n  /** Sets the `on` attribute on the host and any children that requested multiple updates */\n  @bound public update(fallback?: ContextTheme|null) {\n    // NB: We query the existing CSSStyleDeclaration on _every_. _single_. _update_.\n    const incoming = this.contextVariable || fallback;\n    const current = this.host.getAttribute('on');\n    if (incoming !== current) {\n      const next = incoming;\n      this.logger.log(`Resetting context from ${current} to ${next}`);\n\n      if (next != null) {\n        this.host.setAttribute('on', next);\n      } else {\n        this.host.removeAttribute('on');\n      }\n\n      for (const cb of this.callbacks) {\n        cb(incoming);\n      }\n    }\n  }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host([context=dark]) {\n  --context: dark;\n}\n\n:host([context=light]) {\n  --context: light;\n}\n\n:host([context=accent]) {\n  --context: saturated;\n}\n\n:host([context=saturated]) {\n  --context: saturated;\n}\n\n:host([on=dark]) {\n  --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);\n  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);\n  --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);\n  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);\n  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);\n  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);\n  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);\n  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);\n  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark, underline);\n  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);\n}\n\n:host([on=saturated]) {\n  --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);\n  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);\n  --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);\n  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);\n  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);\n  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);\n  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);\n  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);\n  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);\n  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);\n}\n\n:host([on=light]) {\n  --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);\n  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);\n  --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);\n  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);\n  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);\n  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);\n  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);\n  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);\n  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);\n  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);\n}`;\nexport default styles;\n"],
+  "mappings": "wMAAA,YAIA,gEACA,+CACA,qCACA,wDCPA,0BACO,GAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAsDf,EAAQ,ED5CR,WAA2D,CAWhE,YAAsB,EAA+B,EAAS,MAAO,CAA/C,YAA+B,cAV7C,eAAY,GAAI,KAWtB,KAAK,MAAQ,OAAO,iBAAiB,GACrC,KAAK,QAAU,EAAc,GAAG,KAAK,uBAAwB,KAAK,iBAClE,KAAK,OAAS,GAAI,GAAO,GACzB,GAAI,GAAgB,EAAM,GAC1B,EAAK,cAAc,MAQrB,eAAgB,CAEd,KAAK,KAAK,cAAc,GAAI,GAAa,KAAK,QAAS,KAAK,gBAAiB,KAE7E,KAAK,KAAK,iBAAiB,kBAAmB,KAAK,qBAEnD,KAAK,SAOP,kBAAmB,CACjB,KAAK,YACL,KAAK,QAAU,OACf,KAAK,UAAU,QAAQ,GAAK,KAAK,UAAU,OAAO,IAMpD,YAAa,CACX,KAAK,SAIC,oBACN,EACmD,CACnD,MAAO,GAAM,QAAQ,OAAS,GAAG,KAAK,0BAI5B,kBAAuC,CACjD,MAAO,MAAK,MAAM,iBAAiB,aAAa,QAA0B,KAI7D,gBAAgB,EAA2B,EAAsB,CAE9E,AAAI,GAAW,IAAY,KAAK,SAC9B,KAAK,YAEP,KAAK,OAAO,GACZ,KAAK,QAAU,EAQF,oBAAoB,EAAqC,CAEtE,AAAI,KAAK,oBAAoB,IAE3B,GAAM,kBAEF,EAAM,UACR,KAAK,UAAU,IAAI,EAAM,UAI3B,EAAM,SAAS,KAAK,KAAK,aAAa,QAK5B,OAAO,EAA8B,CAEjD,GAAM,GAAW,KAAK,iBAAmB,EACnC,EAAU,KAAK,KAAK,aAAa,MACvC,GAAI,IAAa,EAAS,CACxB,GAAM,GAAO,EACb,KAAK,OAAO,IAAI,0BAA0B,QAAc,KAExD,AAAI,GAAQ,KACV,KAAK,KAAK,aAAa,KAAM,GAE7B,KAAK,KAAK,gBAAgB,MAG5B,OAAW,KAAM,MAAK,UACpB,EAAG,MA7CM,GAAd,GAAc,AA/DV,EA+DU,+BAcA,GAAd,GAAc,AA7EV,EA6EU,mCAgBD,GAAb,GAAa,AA7FT,EA6FS",
+  "names": []
+}

package/controllers/color-context-controller.scss

@@ -0,0 +1,43 @@
+:host([context=dark]) { --context: dark; }
+:host([context=light]) { --context: light; }
+:host([context=accent]) { --context: saturated; }
+:host([context=saturated]) { --context: saturated; }
+
+:host([on=dark]) {
+  --pfe-broadcasted--text: var(--pfe-theme--color--text--on-dark, #fff);
+  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);
+  --pfe-broadcasted--link: var(--pfe-theme--color--link--on-dark, #73bcf7);
+  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-dark, #bee1f4);
+  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-dark, #bee1f4);
+  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-dark, #bee1f4);
+  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-dark, none);
+  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-dark, underline);
+  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-dark,  underline);
+  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);
+}
+
+:host([on=saturated]) {
+  --pfe-broadcasted--text: var(--pfe-theme--color--text--on-saturated, #fff);
+  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2);
+  --pfe-broadcasted--link: var(--pfe-theme--color--link--on-saturated, #fff);
+  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover--on-saturated, #fafafa);
+  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus--on-saturated, #fafafa);
+  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited--on-saturated, #d2d2d2);
+  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration--on-saturated, underline);
+  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover--on-saturated, underline);
+  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus--on-saturated, underline);
+  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-saturated, underline);
+}
+
+:host([on=light]) {
+  --pfe-broadcasted--text: var(--pfe-theme--color--text, #151515);
+  --pfe-broadcasted--text--muted: var(--pfe-theme--color--text--muted, #6a6e73);
+  --pfe-broadcasted--link: var(--pfe-theme--color--link, #06c);
+  --pfe-broadcasted--link--hover: var(--pfe-theme--color--link--hover, #004080);
+  --pfe-broadcasted--link--focus: var(--pfe-theme--color--link--focus, #004080);
+  --pfe-broadcasted--link--visited: var(--pfe-theme--color--link--visited, #6753ac);
+  --pfe-broadcasted--link-decoration: var(--pfe-theme--link-decoration, none);
+  --pfe-broadcasted--link-decoration--hover: var(--pfe-theme--link-decoration--hover, underline);
+  --pfe-broadcasted--link-decoration--focus: var(--pfe-theme--link-decoration--focus, underline);
+  --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited, none);
+}

package/controllers/css-variable-controller.d.ts

@@ -0,0 +1,9 @@
+import type { ReactiveElement, ReactiveController } from 'lit';
+export declare class CssVariableController implements ReactiveController {
+    host: ReactiveElement;
+    style: CSSStyleDeclaration;
+    constructor(host: ReactiveElement);
+    private parseProperty;
+    getVariable(name: string): string | null;
+    hostConnected?(): void;
+}

package/controllers/css-variable-controller.js

@@ -0,0 +1,2 @@
+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

package/controllers/css-variable-controller.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["css-variable-controller.ts"],
+  "sourcesContent": ["import type { ReactiveElement, ReactiveController } from 'lit';\n\nexport class CssVariableController implements ReactiveController {\n  style: CSSStyleDeclaration;\n\n  constructor(public host: ReactiveElement) {\n    this.style = window.getComputedStyle(host);\n  }\n\n  private parseProperty(name: string) {\n    return name.substr(0, 2) !== '--' ? `--${name}` : name;\n  }\n\n  getVariable(name: string) {\n    return this.style.getPropertyValue(this.parseProperty(name)).trim() || null;\n  }\n\n  hostConnected?(): void\n}\n"],
+  "mappings": "AAEO,WAA0D,CAG/D,YAAmB,EAAuB,CAAvB,YACjB,KAAK,MAAQ,OAAO,iBAAiB,GAG/B,cAAc,EAAc,CAClC,MAAO,GAAK,OAAO,EAAG,KAAO,KAAO,KAAK,IAAS,EAGpD,YAAY,EAAc,CACxB,MAAO,MAAK,MAAM,iBAAiB,KAAK,cAAc,IAAO,QAAU",
+  "names": []
+}

package/controllers/light-dom-controller.d.ts

@@ -0,0 +1,20 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+export interface Options {
+    observe?: boolean | MutationObserverInit;
+    emptyWarning?: string;
+}
+export declare class LightDOMController implements ReactiveController {
+    private host;
+    private options?;
+    private mo;
+    private logger;
+    private initializer;
+    constructor(host: ReactiveElement, initializer: () => void, options?: Options | undefined);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private initObserver;
+    /**
+     * Returns a boolean statement of whether or not this component contains any light DOM.
+     */
+    hasLightDOM(): boolean;
+}

package/controllers/light-dom-controller.js

@@ -0,0 +1,2 @@
+import{Logger as e}from"./logger.js";var o=class{constructor(t,i,s){this.host=t;this.options=s;this.initializer=i.bind(t),this.mo=new MutationObserver(this.initializer),this.logger=new e(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{o as LightDOMController};
+//# sourceMappingURL=light-dom-controller.js.map

package/controllers/light-dom-controller.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["light-dom-controller.ts"],
+  "sourcesContent": ["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { Logger } from './logger.js';\n\nexport interface Options {\n  observe?: boolean|MutationObserverInit;\n  emptyWarning?: string;\n}\n\nexport class LightDOMController implements ReactiveController {\n  private mo: MutationObserver;\n  private logger: Logger;\n  private initializer: () => void;\n\n  constructor(private host: ReactiveElement, initializer: () => void, private options?: Options) {\n    this.initializer = initializer.bind(host);\n    this.mo = new MutationObserver(this.initializer);\n    this.logger = new Logger(this.host);\n    host.addController(this);\n  }\n\n  hostConnected() {\n    if (this.hasLightDOM()) {\n      this.initializer();\n    } else if (this.options?.emptyWarning) {\n      this.logger.warn(this.options?.emptyWarning);\n    }\n\n    this.initObserver();\n  }\n\n  hostDisconnected() {\n    this.mo.disconnect();\n  }\n\n  private initObserver() {\n    if (this.options?.observe ?? true) {\n      // Use the provided options, or their defaults\n      this.mo.observe(\n        this.host,\n          typeof this.options?.observe !== 'object' ? { childList: true }\n        : this.options?.observe as MutationObserverInit\n      );\n    }\n  }\n\n  /**\n   * Returns a boolean statement of whether or not this component contains any light DOM.\n   */\n  hasLightDOM(): boolean {\n    return !!(\n      this.host.children.length > 0 ||\n      (this.host.textContent ?? '').trim().length > 0\n    );\n  }\n}\n"],
+  "mappings": "AAEA,qCAOO,WAAuD,CAK5D,YAAoB,EAAuB,EAAiC,EAAmB,CAA3E,YAAwD,eAC1E,KAAK,YAAc,EAAY,KAAK,GACpC,KAAK,GAAK,GAAI,kBAAiB,KAAK,aACpC,KAAK,OAAS,GAAI,GAAO,KAAK,MAC9B,EAAK,cAAc,MAGrB,eAAgB,CACd,AAAI,KAAK,cACP,KAAK,cACI,KAAK,SAAS,cACvB,KAAK,OAAO,KAAK,KAAK,SAAS,cAGjC,KAAK,eAGP,kBAAmB,CACjB,KAAK,GAAG,aAGF,cAAe,CACrB,AAAI,MAAK,SAAS,SAAW,KAE3B,KAAK,GAAG,QACN,KAAK,KACH,MAAO,MAAK,SAAS,SAAY,SAAW,CAAE,UAAW,IACzD,KAAK,SAAS,SAQtB,aAAuB,CACrB,MACE,MAAK,KAAK,SAAS,OAAS,GAC3B,MAAK,KAAK,aAAe,IAAI,OAAO,OAAS",
+  "names": []
+}

package/controllers/logger.d.ts

@@ -0,0 +1,52 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+export declare class Logger implements ReactiveController {
+    private host;
+    private static logDebug;
+    private static instances;
+    private get prefix();
+    /**
+     * 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): boolean;
+    /**
+     * A logging wrapper which checks the debugLog boolean and prints to the console if true.
+     *
+     * @example Logger.log("Hello");
+     */
+    static log(...msgs: unknown[]): void;
+    /**
+     * A console warning wrapper which formats your output with useful debugging information.
+     *
+     * @example Logger.warn("Hello");
+     */
+    static warn(...msgs: unknown[]): void;
+    /**
+     * 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: unknown[]): void;
+    /**
+     * Local logging that outputs the tag name as a prefix automatically
+     *
+     * @example this.logger.log("Hello");
+     */
+    log(...msgs: unknown[]): void;
+    /**
+     * 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: unknown[]): void;
+    /**
+     * 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: unknown[]): void;
+    constructor(host: ReactiveElement);
+    hostConnected(): void;
+}

package/controllers/logger.js

@@ -0,0 +1,2 @@
+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){throw new 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

package/controllers/logger.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["logger.ts"],
+  "sourcesContent": ["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport class Logger implements ReactiveController {\n  private static logDebug: boolean;\n\n  private static instances: WeakMap<HTMLElement, Logger> = new WeakMap();\n\n  private get prefix() {\n    return `[${this.host.localName}${this.host.id ? `#${this.host.id}` : ''}]`;\n  }\n\n  /**\n   * A boolean value that indicates if the logging should be printed to the console; used for debugging.\n   * For use in a JS file or script tag; can also be added in the constructor of a component during development.\n   * @example Logger.debugLog(true);\n   * @tags debug\n   */\n  static debugLog(preference = null) {\n    // wrap localStorage references in a try/catch; merely referencing it can\n    // throw errors in some locked down environments\n    try {\n      if (preference !== null) {\n        Logger.logDebug = !!preference;\n        localStorage.pfeLog = !!preference;\n      }\n      return localStorage.pfeLog === 'true';\n    } catch (e) {\n      return Logger.logDebug;\n    }\n  }\n\n  /**\n   * A logging wrapper which checks the debugLog boolean and prints to the console if true.\n   *\n   * @example Logger.log(\"Hello\");\n   */\n  static log(...msgs: unknown[]) {\n    if (Logger.debugLog()) {\n      // eslint-disable-next-line no-console\n      console.log(...msgs);\n    }\n  }\n\n  /**\n   * A console warning wrapper which formats your output with useful debugging information.\n   *\n   * @example Logger.warn(\"Hello\");\n   */\n  static warn(...msgs: unknown[]) {\n    console.warn(...msgs); // eslint-disable-line no-console\n  }\n\n  /**\n   * A console error wrapper which formats your output with useful debugging information.\n   * For use inside a component's function.\n   * @example Logger.error(\"Hello\");\n   */\n  static error(...msgs: unknown[]) {\n    throw new Error([...msgs].join(' '));\n  }\n\n  /**\n   * Local logging that outputs the tag name as a prefix automatically\n   *\n   * @example this.logger.log(\"Hello\");\n   */\n  log(...msgs: unknown[]) {\n    Logger.log(this.prefix, ...msgs);\n  }\n\n  /**\n   * Local warning wrapper that outputs the tag name as a prefix automatically.\n   * For use inside a component's function.\n   * @example this.logger.warn(\"Hello\");\n   */\n  warn(...msgs: unknown[]) {\n    Logger.warn(this.prefix, ...msgs);\n  }\n\n  /**\n   * Local error wrapper that outputs the tag name as a prefix automatically.\n   * For use inside a component's function.\n   * @example this.logger.error(\"Hello\");\n   */\n  error(...msgs: unknown[]) {\n    Logger.error(this.prefix, ...msgs);\n  }\n\n  constructor(private host: ReactiveElement) {\n    // We only need one logger instance per host\n    if (Logger.instances.get(host)) {\n      return Logger.instances.get(host) as Logger;\n    }\n    host.addController(this);\n    Logger.instances.set(host, this);\n  }\n\n  hostConnected() {\n    this.log('connected');\n  }\n}\n"],
+  "mappings": "AAEO,WAA2C,CAsFhD,YAAoB,EAAuB,CAAvB,YAElB,GAAI,EAAO,UAAU,IAAI,GACvB,MAAO,GAAO,UAAU,IAAI,GAE9B,EAAK,cAAc,MACnB,EAAO,UAAU,IAAI,EAAM,SAvFjB,SAAS,CACnB,MAAO,IAAI,KAAK,KAAK,YAAY,KAAK,KAAK,GAAK,IAAI,KAAK,KAAK,KAAO,YAShE,UAAS,EAAa,KAAM,CAGjC,GAAI,CACF,MAAI,KAAe,MACjB,GAAO,SAAW,CAAC,CAAC,EACpB,aAAa,OAAS,CAAC,CAAC,GAEnB,aAAa,SAAW,YAC/B,CACA,MAAO,GAAO,gBASX,QAAO,EAAiB,CAC7B,AAAI,EAAO,YAET,QAAQ,IAAI,GAAG,SASZ,SAAQ,EAAiB,CAC9B,QAAQ,KAAK,GAAG,SAQX,UAAS,EAAiB,CAC/B,KAAM,IAAI,OAAM,CAAC,GAAG,GAAM,KAAK,MAQjC,OAAO,EAAiB,CACtB,EAAO,IAAI,KAAK,OAAQ,GAAG,GAQ7B,QAAQ,EAAiB,CACvB,EAAO,KAAK,KAAK,OAAQ,GAAG,GAQ9B,SAAS,EAAiB,CACxB,EAAO,MAAM,KAAK,OAAQ,GAAG,GAY/B,eAAgB,CACd,KAAK,IAAI,eAhGN,IAGU,AAHV,EAGU,UAA0C,GAAI",
+  "names": []
+}

package/controllers/perf-controller.d.ts

@@ -0,0 +1,9 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+export declare class PerfController implements ReactiveController {
+    private host;
+    hasMeasured: boolean;
+    markId: string;
+    constructor(host: ReactiveElement);
+    hostUpdate(): void;
+    measure(): void;
+}

package/controllers/perf-controller.js

@@ -0,0 +1,2 @@
+import{getRandomId as r}from"../functions/random.js";var a=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=r(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{a as PerfController};
+//# sourceMappingURL=perf-controller.js.map

package/controllers/perf-controller.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["perf-controller.ts"],
+  "sourcesContent": ["import type { ReactiveController, ReactiveElement } from 'lit';\n\nimport { getRandomId } from '../functions/random.js';\n\nexport class PerfController implements ReactiveController {\n  hasMeasured = false;\n\n  markId: string;\n\n  constructor(private host: ReactiveElement) {\n    host.addController(this);\n\n    // Set up the mark ID based on existing ID on component if it exists\n    if (!host.id) {\n      this.markId = getRandomId(host.localName);\n    } else if (host.id.startsWith('pfe-') && !host.id.startsWith(host.localName)) {\n      this.markId = host.id.replace('pfe', host.localName);\n    } else {\n      this.markId = `${host.localName}-${host.id}`;\n    }\n\n    performance.mark(`${this.markId}-defined`);\n  }\n\n  hostUpdate() {\n    if (!this.hasMeasured) {\n      this.measure();\n    }\n  }\n\n  measure() {\n    this.hasMeasured = true;\n\n    performance.mark(`${this.markId}-rendered`);\n\n    // Navigation start, i.e., the browser first sees that the user has navigated to the page\n    performance.measure(`${this.markId}-from-navigation-to-first-render`, undefined, `${this.markId}-rendered`);\n\n    // Render is run before connection unless delayRender is used\n    performance.measure(\n      `${this.markId}-from-defined-to-first-render`,\n      `${this.markId}-defined`,\n      `${this.markId}-rendered`\n    );\n\n    // Once we've measured time to render, we no longer need the controller,\n    // so we allow it to be garbage-collected\n    this.host.removeController(this);\n  }\n}\n"],
+  "mappings": "AAEA,qDAEO,WAAmD,CAKxD,YAAoB,EAAuB,CAAvB,YAJpB,iBAAc,GAKZ,EAAK,cAAc,MAGnB,AAAK,EAAK,GAEH,AAAI,EAAK,GAAG,WAAW,SAAW,CAAC,EAAK,GAAG,WAAW,EAAK,WAChE,KAAK,OAAS,EAAK,GAAG,QAAQ,MAAO,EAAK,WAE1C,KAAK,OAAS,GAAG,EAAK,aAAa,EAAK,KAJxC,KAAK,OAAS,EAAY,EAAK,WAOjC,YAAY,KAAK,GAAG,KAAK,kBAG3B,YAAa,CACX,AAAK,KAAK,aACR,KAAK,UAIT,SAAU,CACR,KAAK,YAAc,GAEnB,YAAY,KAAK,GAAG,KAAK,mBAGzB,YAAY,QAAQ,GAAG,KAAK,yCAA0C,OAAW,GAAG,KAAK,mBAGzF,YAAY,QACV,GAAG,KAAK,sCACR,GAAG,KAAK,iBACR,GAAG,KAAK,mBAKV,KAAK,KAAK,iBAAiB",
+  "names": []
+}

package/controllers/property-observer-controller.d.ts

@@ -0,0 +1,20 @@
+import type { ReactiveController, ReactiveElement } from 'lit';
+export declare const observedController: unique symbol;
+export declare type ChangeCallback<T = ReactiveElement> = (this: T, old?: T[keyof T], newV?: T[keyof T]) => void;
+export declare type ChangeCallbackName = `_${string}Changed`;
+export declare type PropertyObserverHost<T> = T & Record<ChangeCallbackName, ChangeCallback<T>> & {
+    [observedController]: PropertyObserverController;
+};
+/** This controller holds a cache of observed property values which were set before the element updated */
+export declare class PropertyObserverController implements ReactiveController {
+    private host;
+    private static hosts;
+    private values;
+    private delete;
+    constructor(host: ReactiveElement);
+    /** Set any cached valued accumulated between constructor and connectedCallback */
+    hostUpdate(): void;
+    /** Once the element has updated, we no longer need this controller, so we remove it */
+    hostUpdated(): void;
+    cache(key: string, methodName: string, ...vals: [unknown, unknown]): void;
+}

package/controllers/property-observer-controller.js

@@ -0,0 +1,2 @@
+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,[r,[o,s]]]of this.values)this.host[r]?.(o,s),this.delete(e)}hostUpdated(){this.host.removeController(this)}cache(e,r,...o){this.values.set(e,[r,o])}},a=t;a.hosts=new WeakMap;export{a as PropertyObserverController,l as observedController};
+//# sourceMappingURL=property-observer-controller.js.map

package/controllers/property-observer-controller.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["property-observer-controller.ts"],
+  "sourcesContent": ["import type { ReactiveController, ReactiveElement } from 'lit';\n\nexport const observedController = Symbol('observed properties controller');\n\nexport type ChangeCallback<T = ReactiveElement> = (\n  this: T,\n  old?: T[keyof T],\n  newV?: T[keyof T],\n) => void;\n\nexport type ChangeCallbackName = `_${string}Changed`;\n\nexport type PropertyObserverHost<T> = T & Record<ChangeCallbackName, ChangeCallback<T>> & {\n  [observedController]: PropertyObserverController;\n}\n\n/** This controller holds a cache of observed property values which were set before the element updated */\nexport class PropertyObserverController implements ReactiveController {\n  private static hosts: WeakMap<HTMLElement, PropertyObserverController> = new WeakMap();\n\n  private values = new Map<string, [methodName: string, values: [unknown, unknown]]>();\n\n  private delete(key: string) {\n    this.values.delete(key);\n  }\n\n  constructor(private host: ReactiveElement) {\n    if (PropertyObserverController.hosts.get(host)) {\n      return PropertyObserverController.hosts.get(host) as PropertyObserverController;\n    }\n    host.addController(this);\n    (host as PropertyObserverHost<ReactiveElement>)[observedController] = this;\n  }\n\n  /** Set any cached valued accumulated between constructor and connectedCallback */\n  hostUpdate() {\n    for (const [key, [methodName, [oldVal, newVal]]] of this.values) {\n      // @ts-expect-error: be cool, typescript\n      this.host[methodName as keyof ReactiveElement]?.(oldVal, newVal);\n      this.delete(key);\n    }\n  }\n\n  /** Once the element has updated, we no longer need this controller, so we remove it */\n  hostUpdated() {\n    this.host.removeController(this);\n  }\n\n  cache(key: string, methodName: string, ...vals: [unknown, unknown]) {\n    this.values.set(key, [methodName, vals]);\n  }\n}\n"],
+  "mappings": "AAEO,GAAM,GAAqB,OAAO,kCAelC,OAA+D,CASpE,YAAoB,EAAuB,CAAvB,YANZ,YAAS,GAAI,KAOnB,GAAI,EAA2B,MAAM,IAAI,GACvC,MAAO,GAA2B,MAAM,IAAI,GAE9C,EAAK,cAAc,MAClB,EAA+C,GAAsB,KAThE,OAAO,EAAa,CAC1B,KAAK,OAAO,OAAO,GAYrB,YAAa,CACX,OAAW,CAAC,EAAK,CAAC,EAAY,CAAC,EAAQ,MAAa,MAAK,OAEvD,KAAK,KAAK,KAAuC,EAAQ,GACzD,KAAK,OAAO,GAKhB,aAAc,CACZ,KAAK,KAAK,iBAAiB,MAG7B,MAAM,EAAa,KAAuB,EAA0B,CAClE,KAAK,OAAO,IAAI,EAAK,CAAC,EAAY,MAhC/B,IACU,AADV,EACU,MAA0D,GAAI",
+  "names": []
+}