@patternfly/pfe-core 2.0.0-next.2 → 2.0.0-next.5

package/context.js

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

package/controllers/cascade-controller.js

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

package/controllers/color-context.d.ts

@@ -0,0 +1,114 @@
+import { ReactiveController, ReactiveElement } from 'lit';
+import type { Context } from '../context.js';
+import { Logger } from './logger.js';
+import { StyleController } from './style-controller.js';
+/**
+ * A `ColorPalette` is a collection of specific color values
+ * Choosing a palette sets both color properties and, if the component is a context provider,
+ * implies a color theme for descendents.
+ *
+ * `ColorPalette` is associated with the `color-palette` attribute
+ */
+export declare type ColorPalette = ('base' | 'accent' | 'complement' | 'lighter' | 'lightest' | 'darker' | 'darkest');
+/**
+ * A Color theme is a context-specific restriction on the available color palettes
+ *
+ * `ColorTheme` is associated with the `on` attribute and the `--context` css property
+ */
+export declare type ColorTheme = ('dark' | 'light' | 'saturated');
+export interface ColorContextOptions {
+    prefix?: string;
+    attribute?: string;
+}
+/**
+ * Color context is derived from the `--context` css custom property,
+ * which can be set by the `on` attribute, but *must* be set by the `color-palette` attribute
+ * This property is set (in most cases) in `color-context.scss`,
+ * which is added to components via `StyleController`.
+ *
+ * In this way, we avoid the need to execute javascript in order to convert from a given
+ * `ColorPalette` to a given `ColorTheme`, since those relationships are specified in CSS.
+ */
+declare abstract class ColorContextController implements ReactiveController {
+    protected host: ReactiveElement;
+    abstract update(next: ColorTheme | null): void;
+    protected abstract attribute: string;
+    /** The context object which describes the host's colour context */
+    protected context: Context<ColorTheme | null>;
+    /** The style controller which provides the necessary CSS. */
+    protected styleController: StyleController;
+    /** Prefix for colour context. Set this in Options to create a separate context */
+    protected prefix: string;
+    /** The last-known color context on the host */
+    protected last: ColorTheme | null;
+    protected logger: Logger;
+    hostUpdate?(): void;
+    constructor(host: ReactiveElement, options?: ColorContextOptions);
+}
+/**
+ * `ColorContextProvider` is responsible to derive a context value from CSS and provide it to its
+ * descendents.
+ */
+export declare class ColorContextProvider extends ColorContextController implements ReactiveController {
+    protected attribute: string;
+    /** Cache of context callbacks. Call each to update consumers */
+    private callbacks;
+    /** Mutation observer which updates consumers when `on` or `color-palette` attributes change. */
+    private mo;
+    /**
+     * Cached (live) computed style declaration
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
+     */
+    protected style: CSSStyleDeclaration;
+    /** Return the current CSS `--context` value, or null */
+    protected get contextVariable(): ColorTheme | null;
+    constructor(host: ReactiveElement, options?: ColorContextOptions);
+    /**
+     * When a context provider connects, it listens for context-request events
+     * it also fires all previously fired context-request events from their hosts,
+     * in case this context provider upgraded after and is closer to a given consumer.
+     */
+    hostConnected(): void;
+    /**
+     * When a context provider disconnects, it disconnects its mutation observer
+     */
+    hostDisconnected(): void;
+    /** Was the context event fired requesting our colour-context context? */
+    private isColorContextEvent;
+    /**
+     * 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(next: ColorTheme | null): void;
+}
+/**
+ * A color context consumer receives sets it's `on` attribute based on the context provided
+ * by the closes color context provider.
+ * The consumer has no direct access to the context, it must receive it from the provider.
+ */
+export declare class ColorContextConsumer extends ColorContextController implements ReactiveController {
+    protected attribute: string;
+    private dispose?;
+    private override;
+    constructor(host: ReactiveElement, options?: ColorContextOptions);
+    /**
+     * When a color context consumer connects,
+     * it requests colour context from the closest context provider,
+     * then updates it's host's `on` attribute
+     */
+    hostConnected(): void;
+    /**
+     * When a color context consumer disconnects,
+     * it removes itself from the collection of components which request color context
+     * then updates it's host's `on` attribute
+     */
+    hostDisconnected(): void;
+    /** Register the dispose callback for hosts that requested multiple updates, then update the colour-context */
+    private contextCallback;
+    /** Sets the `on` attribute on the host and any children that requested multiple updates */
+    update(next: ColorTheme | null): void;
+}
+export {};

package/controllers/color-context.js

@@ -0,0 +1,2 @@
+var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var i=(a,o,e,t)=>{for(var r=t>1?void 0:t?m(o,e):o,d=a.length-1,p;d>=0;d--)(p=a[d])&&(r=(t?p(o,e,r):p(r))||r);return t&&r&&u(o,e,r),r};import"lit";import{ContextEvent as b,createContext as x}from"../context.js";import{bound as s}from"../decorators/bound.js";import{Logger as C}from"./logger.js";import{StyleController as g}from"./style-controller.js";import{css as v}from"lit";var k=v`:host(:is([on=dark])){--context:dark}:host(:is([on=light])){--context:light}:host(:is([on=saturated])){--context:saturated}:host(:is([color-palette=darker],[color-palette=darkest])){--context: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(:is([color-palette=lighter],[color-palette=lightest],[color-palette=base])){--context: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)}:host(:is([color-palette=accent],[color-palette=complement],[color-palette=saturated])){--context: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(:is([color-palette=lightest])){--pfe-context-background-color:var(--pfe-theme--color--surface--lightest, #fff)}:host(:is([color-palette=lighter])){--pfe-context-background-color:var(--pfe-theme--color--surface--lighter, #ededed)}:host(:is([color-palette=base])){--pfe-context-background-color:var(--pfe-theme--color--surface--base, #ededed)}:host(:is([color-palette=darker])){--pfe-context-background-color:var(--pfe-theme--color--surface--darker, #393f44)}:host(:is([color-palette=darkest])){--pfe-context-background-color:var(--pfe-theme--color--surface--darkest, #292e34)}:host(:is([color-palette=complement])){--pfe-context-background-color:var(--pfe-theme--color--surface--complement, #004368)}:host(:is([color-palette=accent])){--pfe-context-background-color:var(--pfe-theme--color--surface--accent, #00659c)}:host(:is([color-palette])){background-color:var(--pfe-context-background-color,var(--pfe-theme--color--surface--base))}`,f=k;var h=new Map,c=class{constructor(o,e){this.host=o;this.prefix="pfe-";this.last=null;this.prefix=e?.prefix??"pfe-",this.context=x(`${this.prefix}-color-context`),this.logger=new C(o),this.styleController=new g(o,f),o.addController(this)}},n=class extends c{constructor(e,t){super(e,t);this.callbacks=new Set;this.mo=new MutationObserver(()=>this.update(this.contextVariable));this.style=window.getComputedStyle(e),this.attribute=t?.attribute??"color-palette"}get contextVariable(){return this.style.getPropertyValue("--context").trim()||null}hostConnected(){this.host.addEventListener("context-request",this.onChildContextEvent),this.mo.observe(this.host,{attributes:!0,attributeFilter:[this.attribute,"on"]}),this.update(this.contextVariable);for(let[e,t]of h)e.dispatchEvent(t)}hostDisconnected(){this.callbacks.forEach(e=>this.callbacks.delete(e)),this.mo.disconnect()}isColorContextEvent(e){return e.target!==this.host&&e.context.name===`${this.prefix}-color-context`}onChildContextEvent(e){this.isColorContextEvent(e)&&(e.stopPropagation(),e.callback(this.contextVariable),e.multiple&&this.callbacks.add(e.callback))}update(e){for(let t of this.callbacks)t(e)}};i([s],n.prototype,"onChildContextEvent",1),i([s],n.prototype,"update",1);var l=class extends c{constructor(e,t){super(e,t);this.override=null;this.attribute??(this.attribute="on")}hostConnected(){let e=new b(this.context,this.contextCallback,!0);this.override=this.host.getAttribute(this.attribute),this.host.dispatchEvent(e),h.set(this.host,e)}hostDisconnected(){this.dispose?.(),this.dispose=void 0,h.delete(this.host)}contextCallback(e,t){t&&t!==this.dispose&&(this.dispose?.(),this.dispose=t),this.update(e)}update(e){!this.override&&e!==this.last&&(this.last=e,this.logger.log(`setting context from ${this.host.getAttribute(this.attribute)} to ${e}`),e==null?this.host.removeAttribute(this.attribute):this.host.setAttribute(this.attribute,e))}};i([s],l.prototype,"contextCallback",1),i([s],l.prototype,"update",1);export{l as ColorContextConsumer,n as ColorContextProvider};
+//# sourceMappingURL=color-context.js.map

package/controllers/color-context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["color-context.ts", "color-context.scss"],
+  "sourcesContent": ["import { ReactiveController, ReactiveElement } from 'lit';\nimport type { Context, ContextCallback, 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.scss';\n\n/**\n * A `ColorPalette` is a collection of specific color values\n * Choosing a palette sets both color properties and, if the component is a context provider,\n * implies a color theme for descendents.\n *\n * `ColorPalette` is associated with the `color-palette` attribute\n */\nexport type ColorPalette = (\n  | 'base'\n  | 'accent'\n  | 'complement'\n  | 'lighter'\n  | 'lightest'\n  | 'darker'\n  | 'darkest'\n);\n\n/**\n * A Color theme is a context-specific restriction on the available color palettes\n *\n * `ColorTheme` is associated with the `on` attribute and the `--context` css property\n */\nexport type ColorTheme = (\n  | 'dark'\n  | 'light'\n  | 'saturated'\n);\n\nexport interface ColorContextOptions {\n  prefix?: string;\n  attribute?: string;\n}\n\n// TODO: CSS\n// 1. move sass that maps from palette to theme from _colors.scss:198+ to color-context.scss (and rename them)\n// 2. except don't because hard, wait for design tokens instead\n\n// TODO: QA\n// 1. verify elements\n//   pfe-band - (easy)\n//   pfe-card - (easy)\n//   pfe-tabs - (easy)\n//   pfe-jump-links - (potentially fraught)\n//   pfe-autocomplete - (anyways broken)\n//   pfe-cta - (anyways broken)\n\n/**\n* Maps from consumer host elements to already-fired request events\n* We hold these in memory in order to re-fire the events every time a new provider connects.\n* This is a hedge against cases where an early-upgrading provider claims an early-upgrading\n* consumer before a late-upgrading provider has a chance to register as the rightful provider\n* @example Monkey-in-the-middle error\n*          In this example, we must re-fire the event from eager-consumer when late-provider\n*          upgrades, so as to ensure that late-provider claims it for itself\n*          ```html\n*          <early-provider>\n*            <late-provider>\n*              <eager-consumer>\n*            </late-provider>\n*          </early-provider>\n*          ```\n*/\nconst contextEvents = new Map<ReactiveElement, ContextEvent<UnknownContext>>();\n\n/**\n * Color context is derived from the `--context` css custom property,\n * which can be set by the `on` attribute, but *must* be set by the `color-palette` attribute\n * This property is set (in most cases) in `color-context.scss`,\n * which is added to components via `StyleController`.\n *\n * In this way, we avoid the need to execute javascript in order to convert from a given\n * `ColorPalette` to a given `ColorTheme`, since those relationships are specified in CSS.\n */\nabstract class ColorContextController implements ReactiveController {\n  abstract update(next: ColorTheme | null): void;\n\n  protected abstract attribute: string;\n\n  /** The context object which describes the host's colour context */\n  protected context: Context<ColorTheme|null>;\n\n  /** The style controller which provides the necessary CSS. */\n  protected styleController: StyleController;\n\n  /** Prefix for colour context. Set this in Options to create a separate context */\n  protected prefix = 'pfe-';\n\n  /** The last-known color context on the host */\n  protected last: ColorTheme|null = null;\n\n  protected logger: Logger;\n\n  hostUpdate?(): void\n\n  constructor(protected host: ReactiveElement, options?: ColorContextOptions) {\n    this.prefix = options?.prefix ?? 'pfe-';\n    this.context = createContext(`${this.prefix}-color-context`);\n    this.logger = new Logger(host);\n    this.styleController = new StyleController(host, CONTEXT_BASE_STYLES);\n    host.addController(this as ReactiveController);\n  }\n}\n\n/**\n * `ColorContextProvider` is responsible to derive a context value from CSS and provide it to its\n * descendents.\n */\nexport class ColorContextProvider extends ColorContextController implements ReactiveController {\n  protected attribute: string;\n\n  /** Cache of context callbacks. Call each to update consumers */\n  private callbacks = new Set<ContextCallback<ColorTheme|null>>();\n\n  /** Mutation observer which updates consumers when `on` or `color-palette` attributes change. */\n  private mo = new MutationObserver(() => this.update(this.contextVariable));\n\n  /**\n   * Cached (live) computed style declaration\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle\n   */\n  protected style: CSSStyleDeclaration;\n\n  /** Return the current CSS `--context` value, or null */\n  protected get contextVariable(): ColorTheme | null {\n    return this.style.getPropertyValue('--context').trim() as ColorTheme || null;\n  }\n\n  constructor(host: ReactiveElement, options?: ColorContextOptions) {\n    super(host, options);\n    this.style = window.getComputedStyle(host);\n    this.attribute = options?.attribute ?? 'color-palette';\n  }\n\n  /**\n   * When a context provider connects, it listens for context-request events\n   * it also fires all previously fired context-request events from their hosts,\n   * in case this context provider upgraded after and is closer to a given consumer.\n   */\n  hostConnected() {\n    this.host.addEventListener('context-request', this.onChildContextEvent);\n    this.mo.observe(this.host, { attributes: true, attributeFilter: [this.attribute, 'on'] });\n    this.update(this.contextVariable);\n    for (const [host, fired] of contextEvents) {\n      host.dispatchEvent(fired);\n    }\n  }\n\n  /**\n   * When a context provider disconnects, it disconnects its mutation observer\n   */\n  hostDisconnected() {\n    this.callbacks.forEach(x => this.callbacks.delete(x));\n    this.mo.disconnect();\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<ColorTheme|null>> {\n    return (\n      event.target !== this.host &&\n      event.context.name === `${this.prefix}-color-context`\n    );\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\n      // Run the callback to initialize the child's colour-context\n      event.callback(this.contextVariable);\n\n      // Cache the callback for future updates, if requested\n      if (event.multiple) {\n        this.callbacks.add(event.callback);\n      }\n    }\n  }\n\n  /** Sets the `on` attribute on the host and any children that requested multiple updates */\n  @bound public update(next: ColorTheme | null) {\n    for (const cb of this.callbacks) {\n      cb(next);\n    }\n  }\n}\n\n/**\n * A color context consumer receives sets it's `on` attribute based on the context provided\n * by the closes color context provider.\n * The consumer has no direct access to the context, it must receive it from the provider.\n */\nexport class ColorContextConsumer extends ColorContextController implements ReactiveController {\n  protected attribute: string;\n\n  private dispose?: () => void;\n\n  private override: ColorTheme | null = null;\n\n  constructor(host: ReactiveElement, options?: ColorContextOptions) {\n    super(host, options);\n    this.attribute ??= 'on';\n  }\n\n  /**\n   * When a color context consumer connects,\n   * it requests colour context from the closest context provider,\n   * then updates it's host's `on` attribute\n   */\n  hostConnected() {\n    const event = new ContextEvent(this.context, this.contextCallback, true);\n    this.override = this.host.getAttribute(this.attribute) as ColorTheme;\n    this.host.dispatchEvent(event);\n    contextEvents.set(this.host, event);\n  }\n\n  /**\n   * When a color context consumer disconnects,\n   * it removes itself from the collection of components which request color context\n   * then updates it's host's `on` attribute\n   */\n  hostDisconnected() {\n    this.dispose?.();\n    this.dispose = undefined;\n    contextEvents.delete(this.host);\n  }\n\n  /** Register the dispose callback for hosts that requested multiple updates, then update the colour-context */\n  @bound private contextCallback(value: ColorTheme|null, dispose?: () => void) {\n    // protect against changing providers\n    if (dispose && dispose !== this.dispose) {\n      this.dispose?.();\n      this.dispose = dispose;\n    }\n    this.update(value);\n  }\n\n  /** Sets the `on` attribute on the host and any children that requested multiple updates */\n  @bound public update(next: ColorTheme|null) {\n    if (!this.override && next !== this.last) {\n      this.last = next;\n      this.logger.log(`setting context from ${this.host.getAttribute(this.attribute)} to ${next}`);\n      if (next == null) {\n        this.host.removeAttribute(this.attribute);\n      } else {\n        this.host.setAttribute(this.attribute, next);\n      }\n    }\n  }\n}\n\n", "import {css} from 'lit';\nexport const styles = css`:host(:is([on=dark])){--context:dark}:host(:is([on=light])){--context:light}:host(:is([on=saturated])){--context:saturated}:host(:is([color-palette=darker],[color-palette=darkest])){--context: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(:is([color-palette=lighter],[color-palette=lightest],[color-palette=base])){--context: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)}:host(:is([color-palette=accent],[color-palette=complement],[color-palette=saturated])){--context: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(:is([color-palette=lightest])){--pfe-context-background-color:var(--pfe-theme--color--surface--lightest, #fff)}:host(:is([color-palette=lighter])){--pfe-context-background-color:var(--pfe-theme--color--surface--lighter, #ededed)}:host(:is([color-palette=base])){--pfe-context-background-color:var(--pfe-theme--color--surface--base, #ededed)}:host(:is([color-palette=darker])){--pfe-context-background-color:var(--pfe-theme--color--surface--darker, #393f44)}:host(:is([color-palette=darkest])){--pfe-context-background-color:var(--pfe-theme--color--surface--darkest, #292e34)}:host(:is([color-palette=complement])){--pfe-context-background-color:var(--pfe-theme--color--surface--complement, #004368)}:host(:is([color-palette=accent])){--pfe-context-background-color:var(--pfe-theme--color--surface--accent, #00659c)}:host(:is([color-palette])){background-color:var(--pfe-context-background-color,var(--pfe-theme--color--surface--base))}`;\nexport default styles;\n"],
+  "mappings": "wMAAA,YAGA,gEACA,+CACA,qCACA,wDCNA,0BACO,GAAM,GAAS,s3HACf,EAAQ,EDsEf,GAAM,GAAgB,GAAI,KAW1B,OAAoE,CAqBlE,YAAsB,EAAuB,EAA+B,CAAtD,YATZ,YAAS,OAGT,UAAwB,KAOhC,KAAK,OAAS,GAAS,QAAU,OACjC,KAAK,QAAU,EAAc,GAAG,KAAK,sBAAsB,EAC3D,KAAK,OAAS,GAAI,GAAO,CAAI,EAC7B,KAAK,gBAAkB,GAAI,GAAgB,EAAM,CAAmB,EACpE,EAAK,cAAc,IAA0B,CAC/C,CACF,EAMO,eAAmC,EAAqD,CAoB7F,YAAY,EAAuB,EAA+B,CAChE,MAAM,EAAM,CAAO,EAjBb,eAAY,GAAI,KAGhB,QAAK,GAAI,kBAAiB,IAAM,KAAK,OAAO,KAAK,eAAe,CAAC,EAevE,KAAK,MAAQ,OAAO,iBAAiB,CAAI,EACzC,KAAK,UAAY,GAAS,WAAa,eACzC,IARc,kBAAqC,CACjD,MAAO,MAAK,MAAM,iBAAiB,WAAW,EAAE,KAAK,GAAmB,IAC1E,CAaA,eAAgB,CACd,KAAK,KAAK,iBAAiB,kBAAmB,KAAK,mBAAmB,EACtE,KAAK,GAAG,QAAQ,KAAK,KAAM,CAAE,WAAY,GAAM,gBAAiB,CAAC,KAAK,UAAW,IAAI,CAAE,CAAC,EACxF,KAAK,OAAO,KAAK,eAAe,EAChC,OAAW,CAAC,EAAM,IAAU,GAC1B,EAAK,cAAc,CAAK,CAE5B,CAKA,kBAAmB,CACjB,KAAK,UAAU,QAAQ,GAAK,KAAK,UAAU,OAAO,CAAC,CAAC,EACpD,KAAK,GAAG,WAAW,CACrB,CAGQ,oBACN,EACiD,CACjD,MACE,GAAM,SAAW,KAAK,MACtB,EAAM,QAAQ,OAAS,GAAG,KAAK,sBAEnC,CAOe,oBAAoB,EAAqC,CAEtE,AAAI,KAAK,oBAAoB,CAAK,GAEhC,GAAM,gBAAgB,EAGtB,EAAM,SAAS,KAAK,eAAe,EAG/B,EAAM,UACR,KAAK,UAAU,IAAI,EAAM,QAAQ,EAGvC,CAGc,OAAO,EAAyB,CAC5C,OAAW,KAAM,MAAK,UACpB,EAAG,CAAI,CAEX,CACF,EAtBiB,GAAf,GAAe,AA/DV,EA+DU,mCAiBD,GAAd,GAAc,AAhFT,EAgFS,sBAYT,mBAAmC,EAAqD,CAO7F,YAAY,EAAuB,EAA+B,CAChE,MAAM,EAAM,CAAO,EAHb,cAA8B,KAIpC,KAAK,WAAL,MAAK,UAAc,KACrB,CAOA,eAAgB,CACd,GAAM,GAAQ,GAAI,GAAa,KAAK,QAAS,KAAK,gBAAiB,EAAI,EACvE,KAAK,SAAW,KAAK,KAAK,aAAa,KAAK,SAAS,EACrD,KAAK,KAAK,cAAc,CAAK,EAC7B,EAAc,IAAI,KAAK,KAAM,CAAK,CACpC,CAOA,kBAAmB,CACjB,KAAK,UAAU,EACf,KAAK,QAAU,OACf,EAAc,OAAO,KAAK,IAAI,CAChC,CAGe,gBAAgB,EAAwB,EAAsB,CAE3E,AAAI,GAAW,IAAY,KAAK,SAC9B,MAAK,UAAU,EACf,KAAK,QAAU,GAEjB,KAAK,OAAO,CAAK,CACnB,CAGc,OAAO,EAAuB,CAC1C,AAAI,CAAC,KAAK,UAAY,IAAS,KAAK,MAClC,MAAK,KAAO,EACZ,KAAK,OAAO,IAAI,wBAAwB,KAAK,KAAK,aAAa,KAAK,SAAS,QAAQ,GAAM,EAC3F,AAAI,GAAQ,KACV,KAAK,KAAK,gBAAgB,KAAK,SAAS,EAExC,KAAK,KAAK,aAAa,KAAK,UAAW,CAAI,EAGjD,CACF,EArBiB,GAAf,GAAe,AApCV,EAoCU,+BAUD,GAAd,GAAc,AA9CT,EA8CS",
+  "names": []
+}

package/controllers/{color-context-controller.scss → color-context.scss}

@@ -1,9 +1,15 @@
-:host([context=dark]) { --context: dark; }
-:host([context=light]) { --context: light; }
-:host([context=accent]) { --context: saturated; }
-:host([context=saturated]) { --context: saturated; }
+:host(:is([on=dark])) { --context: dark; }
+:host(:is([on=light])) { --context: light; }
+:host(:is([on=saturated])) { --context: saturated; }
 
-:host([on=dark]) {
+/**
+ * It's important for `color-palette` to take precedence over `on`
+ * when setting `--context`, because a `dark` card that's on a `light`
+ * background must create a new `dark` context for its descendents
+ */
+
+ :host(:is([color-palette=darker],[color-palette=darkest])) {
+  --context: 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);
@@ -16,7 +22,22 @@
   --pfe-broadcasted--link-decoration--visited: var(--pfe-theme--link-decoration--visited--on-dark, none);
 }
 
-:host([on=saturated]) {
+:host(:is([color-palette=lighter],[color-palette=lightest],[color-palette=base])) {
+  --context: 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);
+}
+
+:host(:is([color-palette=accent],[color-palette=complement],[color-palette=saturated])) {
+  --context: 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);
@@ -29,15 +50,35 @@
   --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);
+:host(:is([color-palette="lightest"])) {
+  --pfe-context-background-color: var(--pfe-theme--color--surface--lightest, #fff);
+}
+
+:host(:is([color-palette="lighter"])) {
+  --pfe-context-background-color: var(--pfe-theme--color--surface--lighter, #ededed);
+}
+
+:host(:is([color-palette="base"])) {
+  --pfe-context-background-color: var(--pfe-theme--color--surface--base, #ededed);
+}
+
+:host(:is([color-palette="darker"])) {
+  --pfe-context-background-color: var(--pfe-theme--color--surface--darker, #393f44);
 }
+
+:host(:is([color-palette="darkest"])) {
+  --pfe-context-background-color: var(--pfe-theme--color--surface--darkest, #292e34);
+}
+
+:host(:is([color-palette="complement"])) {
+  --pfe-context-background-color: var(--pfe-theme--color--surface--complement, #004368);
+}
+
+:host(:is([color-palette="accent"])) {
+  --pfe-context-background-color: var(--pfe-theme--color--surface--accent, #00659c);
+}
+
+:host(:is([color-palette])) {
+  background-color: var(--pfe-context-background-color, var(--pfe-theme--color--surface--base));
+}
+

package/controllers/light-dom-controller.js

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

package/controllers/logger.js

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

package/controllers/logger.js.map

@@ -1,7 +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,CAAI,EAC3B,MAAO,GAAO,UAAU,IAAI,CAAI,EAElC,EAAK,cAAc,IAAI,EACvB,EAAO,UAAU,IAAI,EAAM,IAAI,CACjC,IAxFY,SAAS,CACnB,MAAO,IAAI,KAAK,KAAK,YAAY,KAAK,KAAK,GAAK,IAAI,KAAK,KAAK,KAAO,KACvE,OAQO,UAAS,EAAa,KAAM,CAGjC,GAAI,CACF,MAAI,KAAe,MACjB,GAAO,SAAW,CAAC,CAAC,EACpB,aAAa,OAAS,CAAC,CAAC,GAEnB,aAAa,SAAW,MACjC,MAAE,CACA,MAAO,GAAO,QAChB,CACF,OAOO,QAAO,EAAiB,CAC7B,AAAI,EAAO,SAAS,GAElB,QAAQ,IAAI,GAAG,CAAI,CAEvB,OAOO,SAAQ,EAAiB,CAC9B,QAAQ,KAAK,GAAG,CAAI,CACtB,OAOO,UAAS,EAAiB,CAC/B,KAAM,IAAI,OAAM,CAAC,GAAG,CAAI,EAAE,KAAK,GAAG,CAAC,CACrC,CAOA,OAAO,EAAiB,CACtB,EAAO,IAAI,KAAK,OAAQ,GAAG,CAAI,CACjC,CAOA,QAAQ,EAAiB,CACvB,EAAO,KAAK,KAAK,OAAQ,GAAG,CAAI,CAClC,CAOA,SAAS,EAAiB,CACxB,EAAO,MAAM,KAAK,OAAQ,GAAG,CAAI,CACnC,CAWA,eAAgB,CACd,KAAK,IAAI,WAAW,CACtB,CACF,EAlGO,IAGU,AAHV,EAGU,UAA0C,GAAI",
+  "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    console.error([...msgs].join(' ')); // eslint-disable-line no-console\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,CAAI,EAC3B,MAAO,GAAO,UAAU,IAAI,CAAI,EAElC,EAAK,cAAc,IAAI,EACvB,EAAO,UAAU,IAAI,EAAM,IAAI,CACjC,IAxFY,SAAS,CACnB,MAAO,IAAI,KAAK,KAAK,YAAY,KAAK,KAAK,GAAK,IAAI,KAAK,KAAK,KAAO,KACvE,OAQO,UAAS,EAAa,KAAM,CAGjC,GAAI,CACF,MAAI,KAAe,MACjB,GAAO,SAAW,CAAC,CAAC,EACpB,aAAa,OAAS,CAAC,CAAC,GAEnB,aAAa,SAAW,MACjC,MAAE,CACA,MAAO,GAAO,QAChB,CACF,OAOO,QAAO,EAAiB,CAC7B,AAAI,EAAO,SAAS,GAElB,QAAQ,IAAI,GAAG,CAAI,CAEvB,OAOO,SAAQ,EAAiB,CAC9B,QAAQ,KAAK,GAAG,CAAI,CACtB,OAOO,UAAS,EAAiB,CAC/B,QAAQ,MAAM,CAAC,GAAG,CAAI,EAAE,KAAK,GAAG,CAAC,CACnC,CAOA,OAAO,EAAiB,CACtB,EAAO,IAAI,KAAK,OAAQ,GAAG,CAAI,CACjC,CAOA,QAAQ,EAAiB,CACvB,EAAO,KAAK,KAAK,OAAQ,GAAG,CAAI,CAClC,CAOA,SAAS,EAAiB,CACxB,EAAO,MAAM,KAAK,OAAQ,GAAG,CAAI,CACnC,CAWA,eAAgB,CACd,KAAK,IAAI,WAAW,CACtB,CACF,EAlGO,IAGU,AAHV,EAGU,UAA0C,GAAI",
   "names": []
 }

package/controllers/perf-controller.js

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

package/controllers/property-observer-controller.js

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

package/controllers/slot-controller.js

@@ -1,2 +1,2 @@
-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&&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};
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(i,t,e,n)=>{for(var s=n>1?void 0:n?m(t,e):t,o=i.length-1,r;o>=0;o--)(r=i[o])&&(s=(n?r(t,e,s):r(s))||s);return n&&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&&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:n,deprecations:s}]=e;this.slotNames=n,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:n,removedNodes:s}of t)for(let o of[...n,...s])o instanceof HTMLElement&&o.slot&&(this.initSlot(o.slot),e.push(o.slot));e.length&&this.host.requestUpdate()}getChildrenForSlot(t){return Array.from(this.host.children).filter(p(t))}initSlot(t){let e=t||d.anonymous,n=this.nodes.get(e)?.slot?.assignedElements?.()??this.getChildrenForSlot(e),s=t?`slot[name="${t}"]`:"slot:not([name])",o=this.host.shadowRoot?.querySelector?.(s)??null,r=!!n.length;this.nodes.set(e,{elements:n,name:t??"",hasContent:r,slot:o}),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

package/controllers/style-controller.js

@@ -1,2 +1,2 @@
-import{getCompatibleStyle as l,supportsAdoptingStyleSheets as r}from"lit";var n=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=>l(e)).filter(e=>!!e);r?this.host.renderRoot.adoptedStyleSheets=[...this.host.renderRoot.adoptedStyleSheets??[],...t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet)]:t.forEach(e=>{let o=document.createElement("style"),s=window.litNonce;s!==void 0&&o.setAttribute("nonce",s),o.textContent=e.cssText,this.host.renderRoot.appendChild(o)}),this.stylesAdopted=!0}};export{n as StyleController};
+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

package/controllers/style-controller.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["style-controller.ts"],
-  "sourcesContent": ["import type { ReactiveController, ReactiveElement, CSSResultGroup, CSSResultOrNative, CSSResult } from 'lit';\nimport { getCompatibleStyle, supportsAdoptingStyleSheets } from 'lit';\n\ndeclare global {\n   interface ShadowRoot {\n    adoptedStyleSheets: CSSStyleSheet[];\n  }\n}\n\n/**\n * Controller which adds styles to it's host element.\n * Like `static styles = []`, except a controller.\n * Should typically only be used within other controllers.\n */\nexport class StyleController implements ReactiveController {\n  private stylesAdopted = false;\n\n  constructor(\n    private host: ReactiveElement,\n    /** These styles will be applied to the host element */\n    private styles: CSSResultGroup,\n  ) {\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    if (this.stylesAdopted || !(this.host.renderRoot instanceof ShadowRoot)) {\n      return;\n    }\n\n    const styles = [this.styles].flatMap(x => getCompatibleStyle(x as CSSResultOrNative)).filter(x => !!x);\n\n    if (supportsAdoptingStyleSheets) {\n      this.host.renderRoot.adoptedStyleSheets = [\n        ...this.host.renderRoot.adoptedStyleSheets ?? [],\n        ...styles.map(x => x instanceof CSSStyleSheet ? x : x.styleSheet as CSSStyleSheet),\n      ];\n    } else {\n      styles.forEach(s => {\n        const style = document.createElement('style');\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const nonce = (window as any)['litNonce'];\n        if (nonce !== undefined) {\n          style.setAttribute('nonce', nonce);\n        }\n        style.textContent = (s as CSSResult).cssText;\n        this.host.renderRoot.appendChild(style);\n      });\n    }\n\n    this.stylesAdopted = true;\n  }\n}\n"],
-  "mappings": "AACA,0EAaO,WAAoD,CAGzD,YACU,EAEA,EACR,CAHQ,YAEA,cALF,mBAAgB,GAOtB,EAAK,cAAc,IAAI,CACzB,CAEA,eAAsB,CACpB,GAAI,KAAK,eAAiB,CAAE,MAAK,KAAK,qBAAsB,aAC1D,OAGF,GAAM,GAAS,CAAC,KAAK,MAAM,EAAE,QAAQ,GAAK,EAAmB,CAAsB,CAAC,EAAE,OAAO,GAAK,CAAC,CAAC,CAAC,EAErG,AAAI,EACF,KAAK,KAAK,WAAW,mBAAqB,CACxC,GAAG,KAAK,KAAK,WAAW,oBAAsB,CAAC,EAC/C,GAAG,EAAO,IAAI,GAAK,YAAa,eAAgB,EAAI,EAAE,UAA2B,CACnF,EAEA,EAAO,QAAQ,GAAK,CAClB,GAAM,GAAQ,SAAS,cAAc,OAAO,EAEtC,EAAS,OAAe,SAC9B,AAAI,IAAU,QACZ,EAAM,aAAa,QAAS,CAAK,EAEnC,EAAM,YAAe,EAAgB,QACrC,KAAK,KAAK,WAAW,YAAY,CAAK,CACxC,CAAC,EAGH,KAAK,cAAgB,EACvB,CACF",
+  "sourcesContent": ["import type { ReactiveController, ReactiveElement, CSSResultGroup, CSSResultOrNative, CSSResult } from 'lit';\nimport { getCompatibleStyle, supportsAdoptingStyleSheets } from 'lit';\n\ndeclare global {\n   interface ShadowRoot {\n    adoptedStyleSheets: CSSStyleSheet[];\n  }\n}\n\n/**\n * Controller which adds styles to it's host element.\n * Like `static styles = []`, except a controller.\n * Should typically only be used within other controllers.\n */\nexport class StyleController implements ReactiveController {\n  private stylesAdopted = false;\n\n  constructor(\n    private host: ReactiveElement,\n    /** These styles will be applied to the host element */\n    private styles: CSSResultGroup,\n  ) {\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    if (this.stylesAdopted || !(this.host.renderRoot instanceof ShadowRoot)) {\n      return;\n    }\n\n    const styles = [this.styles].flatMap(x => getCompatibleStyle(x as CSSResultOrNative)).filter(x => !!x);\n\n    if (supportsAdoptingStyleSheets) {\n      this.host.renderRoot.adoptedStyleSheets = [\n        ...styles.map(x => x instanceof CSSStyleSheet ? x : x.styleSheet as CSSStyleSheet),\n        ...this.host.renderRoot.adoptedStyleSheets ?? [],\n      ];\n    } else {\n      styles.forEach(s => {\n        const style = document.createElement('style');\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const nonce = (window as any)['litNonce'];\n        if (nonce !== undefined) {\n          style.setAttribute('nonce', nonce);\n        }\n        style.textContent = (s as CSSResult).cssText;\n        this.host.renderRoot.appendChild(style);\n      });\n    }\n\n    this.stylesAdopted = true;\n  }\n}\n"],
+  "mappings": "AACA,0EAaO,WAAoD,CAGzD,YACU,EAEA,EACR,CAHQ,YAEA,cALF,mBAAgB,GAOtB,EAAK,cAAc,IAAI,CACzB,CAEA,eAAsB,CACpB,GAAI,KAAK,eAAiB,CAAE,MAAK,KAAK,qBAAsB,aAC1D,OAGF,GAAM,GAAS,CAAC,KAAK,MAAM,EAAE,QAAQ,GAAK,EAAmB,CAAsB,CAAC,EAAE,OAAO,GAAK,CAAC,CAAC,CAAC,EAErG,AAAI,EACF,KAAK,KAAK,WAAW,mBAAqB,CACxC,GAAG,EAAO,IAAI,GAAK,YAAa,eAAgB,EAAI,EAAE,UAA2B,EACjF,GAAG,KAAK,KAAK,WAAW,oBAAsB,CAAC,CACjD,EAEA,EAAO,QAAQ,GAAK,CAClB,GAAM,GAAQ,SAAS,cAAc,OAAO,EAEtC,EAAS,OAAe,SAC9B,AAAI,IAAU,QACZ,EAAM,aAAa,QAAS,CAAK,EAEnC,EAAM,YAAe,EAAgB,QACrC,KAAK,KAAK,WAAW,YAAY,CAAK,CACxC,CAAC,EAGH,KAAK,cAAgB,EACvB,CACF",
   "names": []
 }

package/core.d.ts

@@ -1,4 +1,5 @@
 import type { ComplexAttributeConverter } from 'lit';
+export type { ColorPalette, ColorTheme } from './controllers/color-context.js';
 /** PatternFly Elements global config object */
 export interface PfeConfig {
     /** Set to false to disable client-side page load performance tracking */
@@ -8,8 +9,6 @@ export interface PfeConfig {
     /** Set to false to disable automatically removing `unresolved` attr from body */
     autoReveal?: boolean;
 }
-export declare type ColorTheme = ('base' | 'accent' | 'complement' | 'lighter' | 'lightest' | 'darker' | 'darkest');
-export declare type ContextTheme = ('dark' | 'light' | 'saturated');
 declare const noPref: unique symbol;
 /**
  * A boolean value that indicates if the performance should be tracked.
@@ -35,4 +34,3 @@ declare global {
         PfeConfig: PfeConfig;
     }
 }
-export {};

package/core.js

@@ -1,2 +1,2 @@
-var o=Symbol();function r(e){return document.head.querySelector(`meta[name="${e}"]`)?.content}function f(e=o){return e!==o&&(window.PfeConfig.trackPerformance=!!e),window.PfeConfig.trackPerformance}var l={fromAttribute(e){return typeof e!="string"?null:e.split(",").map(t=>t.trim()).map(t=>parseInt(t,10))},toAttribute(e){return e.join(",")}},i=class extends Event{constructor(t,a){super(t,{bubbles:!0,composed:!0,...a})}},n=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??n?!n:r("pfe-auto-reveal")==="true",get log(){return!!localStorage.pfeLog},set log(e){e?localStorage.setItem("pfeLog",`${!0}`):localStorage.removeItem("pfeLog")}});export{i as ComposedEvent,l as NumberListConverter,f as trackPerformance};
+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

package/core.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["core.ts"],
-  "sourcesContent": ["import type { ComplexAttributeConverter } from 'lit';\n\n/** PatternFly Elements global config object */\nexport interface PfeConfig {\n  /** Set to false to disable client-side page load performance tracking */\n  trackPerformance?: boolean;\n  /** Set to false to disable various debug logs */\n  log?: boolean;\n  /** Set to false to disable automatically removing `unresolved` attr from body */\n  autoReveal?: boolean;\n}\n\nexport type ColorTheme = (\n  | 'base'\n  | 'accent'\n  | 'complement'\n  | 'lighter'\n  | 'lightest'\n  | 'darker'\n  | 'darkest'\n);\n\nexport type ContextTheme = (\n  | 'dark'\n  | 'light'\n  | 'saturated'\n);\n\nconst noPref = Symbol();\n\n/** Retrieve an HTML metadata item */\nfunction getMeta(name: string): string|undefined {\n  return document.head.querySelector<HTMLMetaElement>(`meta[name=\"${name}\"]`)?.content;\n}\n\n/**\n * A boolean value that indicates if the performance should be tracked.\n * For use in a JS file or script tag; can also be added in the constructor of a component during development.\n * @example trackPerformance(true);\n */\nexport function trackPerformance(preference: boolean | typeof noPref = noPref) {\n  if (preference !== noPref) {\n    window.PfeConfig.trackPerformance = !!preference;\n  }\n  return window.PfeConfig.trackPerformance;\n}\n\n/**\n * A LitElement property converter which represents a list of numbers as a comma separated string\n * @see https://lit.dev/docs/components/properties/#conversion-converter\n */\nexport const NumberListConverter: ComplexAttributeConverter<null|number[]> = {\n  fromAttribute(value: string) {\n    if (typeof value !== 'string') {\n      return null;\n    } else {\n      return value.split(',').map(x => x.trim()).map(x => parseInt(x, 10));\n    }\n  },\n  toAttribute(value: number[]) {\n    return value.join(',');\n  },\n};\n\n/**\n * A composed, bubbling event for UI interactions\n * e.g. when an accordion panel opens.\n */\nexport class ComposedEvent extends Event {\n  constructor(type: string, init?: EventInit) {\n    super(type, {\n      bubbles: true,\n      composed: true,\n      ...init\n    });\n  }\n}\n\n// \uD83D\uDC47 SIDE EFFECTS \uD83D\uDC47\n\ndeclare global {\n  interface Window {\n    /** Global configuration settings for PatternFly Elements */\n    PfeConfig: PfeConfig;\n  }\n}\n\nconst bodyNoAutoReveal = document.body.hasAttribute('no-auto-reveal');\n\n/** Global patternfly elements config */\nwindow.PfeConfig = Object.assign(window.PfeConfig ?? {}, {\n  trackPerformance: window.PfeConfig?.trackPerformance ?? getMeta('pfe-track-performance') === 'true',\n  autoReveal: window.PfeConfig?.autoReveal ?? bodyNoAutoReveal ? !bodyNoAutoReveal : getMeta('pfe-auto-reveal') === 'true',\n  get log() {\n    return !!localStorage.pfeLog;\n  },\n  set log(v: boolean) {\n    if (v) {\n      localStorage.setItem('pfeLog', `${true}`);\n    } else {\n      localStorage.removeItem('pfeLog');\n    }\n  },\n});\n"],
-  "mappings": "AA4BA,GAAM,GAAS,OAAO,EAGtB,WAAiB,EAAgC,CAC/C,MAAO,UAAS,KAAK,cAA+B,cAAc,KAAQ,GAAG,OAC/E,CAOO,WAA0B,EAAsC,EAAQ,CAC7E,MAAI,KAAe,GACjB,QAAO,UAAU,iBAAmB,CAAC,CAAC,GAEjC,OAAO,UAAU,gBAC1B,CAMO,GAAM,GAAgE,CAC3E,cAAc,EAAe,CAC3B,MAAI,OAAO,IAAU,SACZ,KAEA,EAAM,MAAM,GAAG,EAAE,IAAI,GAAK,EAAE,KAAK,CAAC,EAAE,IAAI,GAAK,SAAS,EAAG,EAAE,CAAC,CAEvE,EACA,YAAY,EAAiB,CAC3B,MAAO,GAAM,KAAK,GAAG,CACvB,CACF,EAMO,eAA4B,MAAM,CACvC,YAAY,EAAc,EAAkB,CAC1C,MAAM,EAAM,CACV,QAAS,GACT,SAAU,MACP,CACL,CAAC,CACH,CACF,EAWM,EAAmB,SAAS,KAAK,aAAa,gBAAgB,EAGpE,OAAO,UAAY,OAAO,OAAO,OAAO,WAAa,CAAC,EAAG,CACvD,iBAAkB,OAAO,WAAW,kBAAoB,EAAQ,uBAAuB,IAAM,OAC7F,WAAY,OAAO,WAAW,YAAc,EAAmB,CAAC,EAAmB,EAAQ,iBAAiB,IAAM,UAC9G,MAAM,CACR,MAAO,CAAC,CAAC,aAAa,MACxB,KACI,KAAI,EAAY,CAClB,AAAI,EACF,aAAa,QAAQ,SAAU,GAAG,IAAM,EAExC,aAAa,WAAW,QAAQ,CAEpC,CACF,CAAC",
+  "sourcesContent": ["import type { ComplexAttributeConverter } from 'lit';\n\nexport type { ColorPalette, ColorTheme } from './controllers/color-context.js';\n\n/** PatternFly Elements global config object */\nexport interface PfeConfig {\n  /** Set to false to disable client-side page load performance tracking */\n  trackPerformance?: boolean;\n  /** Set to false to disable various debug logs */\n  log?: boolean;\n  /** Set to false to disable automatically removing `unresolved` attr from body */\n  autoReveal?: boolean;\n}\n\nconst noPref = Symbol();\n\n/** Retrieve an HTML metadata item */\nfunction getMeta(name: string): string|undefined {\n  return document.head.querySelector<HTMLMetaElement>(`meta[name=\"${name}\"]`)?.content;\n}\n\n/**\n * A boolean value that indicates if the performance should be tracked.\n * For use in a JS file or script tag; can also be added in the constructor of a component during development.\n * @example trackPerformance(true);\n */\nexport function trackPerformance(preference: boolean | typeof noPref = noPref) {\n  if (preference !== noPref) {\n    window.PfeConfig.trackPerformance = !!preference;\n  }\n  return window.PfeConfig.trackPerformance;\n}\n\n/**\n * A LitElement property converter which represents a list of numbers as a comma separated string\n * @see https://lit.dev/docs/components/properties/#conversion-converter\n */\nexport const NumberListConverter: ComplexAttributeConverter<null|number[]> = {\n  fromAttribute(value: string) {\n    if (typeof value !== 'string') {\n      return null;\n    } else {\n      return value.split(',').map(x => x.trim()).map(x => parseInt(x, 10));\n    }\n  },\n  toAttribute(value: number[]) {\n    return value.join(',');\n  },\n};\n\n/**\n * A composed, bubbling event for UI interactions\n * e.g. when an accordion panel opens.\n */\nexport class ComposedEvent extends Event {\n  constructor(type: string, init?: EventInit) {\n    super(type, {\n      bubbles: true,\n      composed: true,\n      ...init\n    });\n  }\n}\n\n// \uD83D\uDC47 SIDE EFFECTS \uD83D\uDC47\n\ndeclare global {\n  interface Window {\n    /** Global configuration settings for PatternFly Elements */\n    PfeConfig: PfeConfig;\n  }\n}\n\nconst bodyNoAutoReveal = document.body.hasAttribute('no-auto-reveal');\n\n/** Global patternfly elements config */\nwindow.PfeConfig = Object.assign(window.PfeConfig ?? {}, {\n  trackPerformance: window.PfeConfig?.trackPerformance ?? getMeta('pfe-track-performance') === 'true',\n  // if the body tag has `no-auto-reveal` attribute, reveal immediately\n  // if `<meta name=\"pfe-auto-reveal\">` exists, and it's `content` is 'true',\n  // then auto-reveal the body\n  autoReveal: window.PfeConfig?.autoReveal ?? (\n      bodyNoAutoReveal ? !bodyNoAutoReveal\n    : getMeta('pfe-auto-reveal') === 'true'\n  ),\n  get log() {\n    return !!localStorage.pfeLog;\n  },\n  set log(v: boolean) {\n    if (v) {\n      localStorage.setItem('pfeLog', `${true}`);\n    } else {\n      localStorage.removeItem('pfeLog');\n    }\n  },\n});\n"],
+  "mappings": "AAcA,GAAM,GAAS,OAAO,EAGtB,WAAiB,EAAgC,CAC/C,MAAO,UAAS,KAAK,cAA+B,cAAc,KAAQ,GAAG,OAC/E,CAOO,WAA0B,EAAsC,EAAQ,CAC7E,MAAI,KAAe,GACjB,QAAO,UAAU,iBAAmB,CAAC,CAAC,GAEjC,OAAO,UAAU,gBAC1B,CAMO,GAAM,GAAgE,CAC3E,cAAc,EAAe,CAC3B,MAAI,OAAO,IAAU,SACZ,KAEA,EAAM,MAAM,GAAG,EAAE,IAAI,GAAK,EAAE,KAAK,CAAC,EAAE,IAAI,GAAK,SAAS,EAAG,EAAE,CAAC,CAEvE,EACA,YAAY,EAAiB,CAC3B,MAAO,GAAM,KAAK,GAAG,CACvB,CACF,EAMO,eAA4B,MAAM,CACvC,YAAY,EAAc,EAAkB,CAC1C,MAAM,EAAM,CACV,QAAS,GACT,SAAU,MACP,CACL,CAAC,CACH,CACF,EAWM,EAAmB,SAAS,KAAK,aAAa,gBAAgB,EAGpE,OAAO,UAAY,OAAO,OAAO,OAAO,WAAa,CAAC,EAAG,CACvD,iBAAkB,OAAO,WAAW,kBAAoB,EAAQ,uBAAuB,IAAM,OAI7F,WAAY,OAAO,WAAW,YAC1B,GAAmB,CAAC,EACpB,EAAQ,iBAAiB,IAAM,WAE/B,MAAM,CACR,MAAO,CAAC,CAAC,aAAa,MACxB,KACI,KAAI,EAAY,CAClB,AAAI,EACF,aAAa,QAAQ,SAAU,GAAG,IAAM,EAExC,aAAa,WAAW,QAAQ,CAEpC,CACF,CAAC",
   "names": []
 }

package/decorators/color-context.d.ts

@@ -0,0 +1,4 @@
+import type { ReactiveElement } from 'lit';
+import { ColorContextOptions } from '../controllers/color-context.js';
+export declare function colorContextProvider<T extends ReactiveElement>(options?: ColorContextOptions): (proto: T, _key: string) => void;
+export declare function colorContextConsumer<T extends ReactiveElement>(options?: ColorContextOptions): (proto: T, _key: string) => void;

package/decorators/color-context.js

@@ -0,0 +1,2 @@
+import{ColorContextConsumer as r,ColorContextProvider as i}from"../controllers/color-context.js";function c(o){return function(e,n){e.constructor.addInitializer(t=>{t.__colorContextProvider=new i(t,o)})}}function x(o){return function(e,n){e.constructor.addInitializer(t=>{t.__colorContextConsumer=new r(t,o)})}}export{x as colorContextConsumer,c as colorContextProvider};
+//# sourceMappingURL=color-context.js.map

package/decorators/color-context.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["color-context.ts"],
+  "sourcesContent": ["import type { ReactiveElement } from 'lit';\nimport {\n  ColorContextOptions,\n  ColorContextConsumer,\n  ColorContextProvider,\n} from '../controllers/color-context.js';\n\nexport function colorContextProvider<T extends ReactiveElement>(options?: ColorContextOptions) {\n  return function(proto: T, _key: string) {\n    (proto.constructor as typeof ReactiveElement).addInitializer(instance => {\n      // @ts-expect-error: this is strictly for debugging purposes\n      instance.__colorContextProvider =\n        new ColorContextProvider(instance, options);\n    });\n  };\n}\n\nexport function colorContextConsumer<T extends ReactiveElement>(options?: ColorContextOptions) {\n  return function(proto: T, _key: string) {\n    (proto.constructor as typeof ReactiveElement).addInitializer(instance => {\n      // @ts-expect-error: this is strictly for debugging purposes\n      instance.__colorContextConsumer =\n        new ColorContextConsumer(instance, options);\n    });\n  };\n}\n"],
+  "mappings": "AACA,iGAMO,WAAyD,EAA+B,CAC7F,MAAO,UAAS,EAAU,EAAc,CACtC,AAAC,EAAM,YAAuC,eAAe,GAAY,CAEvE,EAAS,uBACP,GAAI,GAAqB,EAAU,CAAO,CAC9C,CAAC,CACH,CACF,CAEO,WAAyD,EAA+B,CAC7F,MAAO,UAAS,EAAU,EAAc,CACtC,AAAC,EAAM,YAAuC,eAAe,GAAY,CAEvE,EAAS,uBACP,GAAI,GAAqB,EAAU,CAAO,CAC9C,CAAC,CACH,CACF",
+  "names": []
+}

package/decorators/deprecation.d.ts

@@ -0,0 +1,16 @@
+import type { ReactiveElement, PropertyDeclaration } from 'lit';
+export declare type DeprecationDeclaration<K extends PropertyKey> = PropertyDeclaration & {
+    alias: K;
+    attribute: string;
+};
+/**
+ * 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 declare function deprecation<K extends PropertyKey>(options: DeprecationDeclaration<K>): <T extends ReactiveElement, L extends PropertyKey>(proto: Partial<Record<K | L, T>>, key: keyof T) => void;

package/decorators/deprecation.js

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

package/decorators/deprecation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["deprecation.ts"],
+  "sourcesContent": ["import type { ReactiveElement, PropertyDeclaration, ReactiveController } from 'lit';\n\nimport { Logger } from '../controllers/logger.js';\n\nexport type DeprecationDeclaration<K extends PropertyKey> = PropertyDeclaration & {\n  alias: K;\n  attribute: string;\n}\n\n/**\n * Aliases the decorated field to an existing property, and logs a warning if it is used\n * @example deprecating an attribute\n * ```ts\n * @property({ reflect: true, attribute: 'color-palette'})\n * colorPalette: ColorPalette = 'base';\n *\n * @deprecation('colorPalette') color?: ColorPalette;\n * ```\n */\nexport function deprecation<K extends PropertyKey>(options: DeprecationDeclaration<K>) {\n  return function<T extends ReactiveElement, L extends PropertyKey>(proto: Partial<Record<K | L, T>>, key: keyof T) {\n    const { alias, ...deprecationOptions } = options;\n    const klass = (proto.constructor as typeof ReactiveElement);\n    const declaration = klass.getPropertyOptions(alias);\n    klass.createProperty(key, { ...declaration, ...deprecationOptions });\n    klass.addInitializer(instance => {\n      instance.addController(new Deprecation(instance as T, options, key));\n    });\n  };\n}\n\nclass Deprecation<T extends ReactiveElement, K extends PropertyKey> implements ReactiveController {\n  private logger: Logger;\n\n  private logged = false;\n\n  constructor(private host: T, private options: DeprecationDeclaration<K>, private deprecatedKey: keyof T) {\n    this.logger = new Logger(host);\n  }\n\n  hostUpdate() {\n    const { deprecatedKey, options: { alias } } = this;\n    if (this.host[deprecatedKey]) {\n      if (this.host[alias as keyof T] !== this.host[deprecatedKey]) {\n        if (!this.logged) {\n          this.logger.warn(`${deprecatedKey} is deprecated, use ${alias} instead`);\n          this.logged = true;\n        }\n        this.host[alias as keyof T] = this.host[deprecatedKey];\n      }\n    }\n  }\n}\n"],
+  "mappings": "AAEA,kDAiBO,WAA4C,EAAoC,CACrF,MAAO,UAA2D,EAAkC,EAAc,CAChH,GAAM,CAAE,WAAU,GAAuB,EACnC,EAAS,EAAM,YACf,EAAc,EAAM,mBAAmB,CAAK,EAClD,EAAM,eAAe,EAAK,IAAK,KAAgB,CAAmB,CAAC,EACnE,EAAM,eAAe,GAAY,CAC/B,EAAS,cAAc,GAAI,GAAY,EAAe,EAAS,CAAG,CAAC,CACrE,CAAC,CACH,CACF,CAEA,WAAkG,CAKhG,YAAoB,EAAiB,EAA4C,EAAwB,CAArF,YAAiB,eAA4C,qBAFzE,YAAS,GAGf,KAAK,OAAS,GAAI,GAAO,CAAI,CAC/B,CAEA,YAAa,CACX,GAAM,CAAE,gBAAe,QAAS,CAAE,UAAY,KAC9C,AAAI,KAAK,KAAK,IACR,KAAK,KAAK,KAAsB,KAAK,KAAK,IACvC,MAAK,QACR,MAAK,OAAO,KAAK,GAAG,wBAAoC,WAAe,EACvE,KAAK,OAAS,IAEhB,KAAK,KAAK,GAAoB,KAAK,KAAK,GAG9C,CACF",
+  "names": []
+}

package/decorators/pfelement.d.ts

@@ -1,6 +1,10 @@
+export interface PfelementOptions {
+    className: string;
+    attribute: string;
+}
 /**
  * Adds pfelement APIs to the decorated custom-element class
  * 1. Adds readonly `version` field to the element constructor (class)
  * 2. Adds `[pfelement]` attr and `.PFElement` class in connectedCallback
  */
-export declare function pfelement(): ClassDecorator;
+export declare function pfelement(options?: PfelementOptions): ClassDecorator;

package/decorators/pfelement.js

@@ -1,2 +1,2 @@
-import{trackPerformance as i}from"../core.js";import{ColorContextController as l}from"../controllers/color-context-controller.js";import{PerfController as a}from"../controllers/perf-controller.js";function m(t){return typeof t.addInitializer=="function"}var r=!1,o=new Set;async function f(t){if(o.add(t),!r){for(r=!0;o.size;){let e=[];for(let n of o)e.push(n.updateComplete),o.delete(n);await Promise.all(e)}document.body.removeAttribute("unresolved")}}function d(){return function(t){if(!m(t))throw new Error(`@pfelement may only decorate ReactiveElements. ${t.name} is does not implement ReactiveElement.`);t.addInitializer(e=>{window.PfeConfig.autoReveal&&f(e),e.addController({hostConnected(){e.setAttribute("pfelement",""),e.classList.add("PFElement")}}),new l(e),i()&&new a(e)})}}export{d as pfelement};
+import{trackPerformance as l}from"../core.js";import{PerfController as s}from"../controllers/perf-controller.js";function m(e){return typeof e.addInitializer=="function"}var a=!1,i=new Set;async function f(e){if(i.add(e),!a){for(a=!0;i.size;){let n=[];for(let o of i)n.push(o.updateComplete),i.delete(o);await Promise.all(n)}document.body.removeAttribute("unresolved")}}function d(e){let n=e?.attribute??"pfelement",o=e?.className??"PFElement";return function(r){if(!m(r))throw new Error(`@pfelement may only decorate ReactiveElements. ${r.name} is does not implement ReactiveElement.`);r.addInitializer(t=>{window.PfeConfig.autoReveal&&f(t),t.addController({hostConnected(){t.setAttribute(n,""),t.classList.add(o)}}),l()&&new s(t)})}}export{d as pfelement};
 //# sourceMappingURL=pfelement.js.map

package/decorators/pfelement.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["pfelement.ts"],
-  "sourcesContent": ["import type { ReactiveElement } from 'lit';\n\nimport { trackPerformance } from '../core.js';\n\nimport { ColorContextController } from '../controllers/color-context-controller.js';\nimport { PerfController } from '../controllers/perf-controller.js';\n\nfunction isReactiveElementClass(\n  klass: Function // eslint-disable-line @typescript-eslint/ban-types\n): klass is typeof ReactiveElement {\n  return typeof klass['addInitializer' as keyof typeof klass] === 'function';\n}\n\nlet waiting = false;\nconst queue = new Set<ReactiveElement>();\n\nasync function enqueue(instance: ReactiveElement) {\n  queue.add(instance);\n\n  // only the first call kicks off the 'timer'\n  // but because of the while loop, subsequent calls will still cause an `await`\n  if (!waiting) {\n    waiting = true;\n    while (queue.size) {\n      const enqueued: Promise<boolean>[] = [];\n      for (const instance of queue) {\n        enqueued.push(instance.updateComplete);\n        queue.delete(instance);\n      }\n      await Promise.all(enqueued);\n    }\n    document.body.removeAttribute('unresolved');\n  }\n}\n\n/**\n * Adds pfelement APIs to the decorated custom-element class\n * 1. Adds readonly `version` field to the element constructor (class)\n * 2. Adds `[pfelement]` attr and `.PFElement` class in connectedCallback\n */\nexport function pfelement(): ClassDecorator {\n  return function(klass) {\n    if (!isReactiveElementClass(klass)) {\n      throw new Error(`@pfelement may only decorate ReactiveElements. ${klass.name} is does not implement ReactiveElement.`);\n    }\n\n    klass.addInitializer(instance => {\n      if (window.PfeConfig.autoReveal) {\n        enqueue(instance);\n      }\n\n      // Set some global host DOM when it connects\n      // by way of an ad-hoc controller\n      instance.addController({\n        hostConnected() {\n          instance.setAttribute('pfelement', '');\n          instance.classList.add('PFElement');\n        },\n      });\n\n      // look mah, no instance property\n      new ColorContextController(instance);\n\n      if (trackPerformance()) {\n        new PerfController(instance);\n      }\n    });\n  };\n}\n"],
-  "mappings": "AAEA,8CAEA,oFACA,mEAEA,WACE,EACiC,CACjC,MAAO,OAAO,GAAM,gBAA4C,UAClE,CAEA,GAAI,GAAU,GACR,EAAQ,GAAI,KAElB,iBAAuB,EAA2B,CAKhD,GAJA,EAAM,IAAI,CAAQ,EAId,CAAC,EAAS,CAEZ,IADA,EAAU,GACH,EAAM,MAAM,CACjB,GAAM,GAA+B,CAAC,EACtC,OAAW,KAAY,GACrB,EAAS,KAAK,EAAS,cAAc,EACrC,EAAM,OAAO,CAAQ,EAEvB,KAAM,SAAQ,IAAI,CAAQ,CAC5B,CACA,SAAS,KAAK,gBAAgB,YAAY,CAC5C,CACF,CAOO,YAAqC,CAC1C,MAAO,UAAS,EAAO,CACrB,GAAI,CAAC,EAAuB,CAAK,EAC/B,KAAM,IAAI,OAAM,kDAAkD,EAAM,6CAA6C,EAGvH,EAAM,eAAe,GAAY,CAC/B,AAAI,OAAO,UAAU,YACnB,EAAQ,CAAQ,EAKlB,EAAS,cAAc,CACrB,eAAgB,CACd,EAAS,aAAa,YAAa,EAAE,EACrC,EAAS,UAAU,IAAI,WAAW,CACpC,CACF,CAAC,EAGD,GAAI,GAAuB,CAAQ,EAE/B,EAAiB,GACnB,GAAI,GAAe,CAAQ,CAE/B,CAAC,CACH,CACF",
+  "sourcesContent": ["import type { ReactiveElement } from 'lit';\n\nimport { trackPerformance } from '../core.js';\n\nimport { PerfController } from '../controllers/perf-controller.js';\n\nexport interface PfelementOptions {\n  className: string;\n  attribute: string;\n}\n\nfunction isReactiveElementClass(\n  klass: Function // eslint-disable-line @typescript-eslint/ban-types\n): klass is typeof ReactiveElement {\n  return typeof klass['addInitializer' as keyof typeof klass] === 'function';\n}\n\nlet waiting = false;\nconst queue = new Set<ReactiveElement>();\n\nasync function enqueue(instance: ReactiveElement) {\n  queue.add(instance);\n\n  // only the first call kicks off the 'timer'\n  // but because of the while loop, subsequent calls will still cause an `await`\n  if (!waiting) {\n    waiting = true;\n    while (queue.size) {\n      const enqueued: Promise<boolean>[] = [];\n      for (const instance of queue) {\n        enqueued.push(instance.updateComplete);\n        queue.delete(instance);\n      }\n      await Promise.all(enqueued);\n    }\n    document.body.removeAttribute('unresolved');\n  }\n}\n\n/**\n * Adds pfelement APIs to the decorated custom-element class\n * 1. Adds readonly `version` field to the element constructor (class)\n * 2. Adds `[pfelement]` attr and `.PFElement` class in connectedCallback\n */\nexport function pfelement(options?: PfelementOptions): ClassDecorator {\n  const attribute = options?.attribute ?? 'pfelement';\n  const className = options?.className ?? 'PFElement';\n  return function(klass) {\n    if (!isReactiveElementClass(klass)) {\n      throw new Error(`@pfelement may only decorate ReactiveElements. ${klass.name} is does not implement ReactiveElement.`);\n    }\n\n    klass.addInitializer(instance => {\n      if (window.PfeConfig.autoReveal) {\n        enqueue(instance);\n      }\n\n      // Set some global host DOM when it connects\n      // by way of an ad-hoc controller\n      instance.addController({\n        hostConnected() {\n          instance.setAttribute(attribute, '');\n          instance.classList.add(className);\n        },\n      });\n\n      if (trackPerformance()) {\n        new PerfController(instance);\n      }\n    });\n  };\n}\n"],
+  "mappings": "AAEA,8CAEA,mEAOA,WACE,EACiC,CACjC,MAAO,OAAO,GAAM,gBAA4C,UAClE,CAEA,GAAI,GAAU,GACR,EAAQ,GAAI,KAElB,iBAAuB,EAA2B,CAKhD,GAJA,EAAM,IAAI,CAAQ,EAId,CAAC,EAAS,CAEZ,IADA,EAAU,GACH,EAAM,MAAM,CACjB,GAAM,GAA+B,CAAC,EACtC,OAAW,KAAY,GACrB,EAAS,KAAK,EAAS,cAAc,EACrC,EAAM,OAAO,CAAQ,EAEvB,KAAM,SAAQ,IAAI,CAAQ,CAC5B,CACA,SAAS,KAAK,gBAAgB,YAAY,CAC5C,CACF,CAOO,WAAmB,EAA4C,CACpE,GAAM,GAAY,GAAS,WAAa,YAClC,EAAY,GAAS,WAAa,YACxC,MAAO,UAAS,EAAO,CACrB,GAAI,CAAC,EAAuB,CAAK,EAC/B,KAAM,IAAI,OAAM,kDAAkD,EAAM,6CAA6C,EAGvH,EAAM,eAAe,GAAY,CAC/B,AAAI,OAAO,UAAU,YACnB,EAAQ,CAAQ,EAKlB,EAAS,cAAc,CACrB,eAAgB,CACd,EAAS,aAAa,EAAW,EAAE,EACnC,EAAS,UAAU,IAAI,CAAS,CAClC,CACF,CAAC,EAEG,EAAiB,GACnB,GAAI,GAAe,CAAQ,CAE/B,CAAC,CACH,CACF",
   "names": []
 }

package/decorators.d.ts

@@ -1,5 +1,7 @@
 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';

package/decorators.js

@@ -1,2 +1,2 @@
-export*from"./decorators/bound.js";export*from"./decorators/cascades.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";
+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

package/decorators.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["decorators.ts"],
-  "sourcesContent": ["export * from './decorators/bound.js';\nexport * from './decorators/cascades.js';\nexport * from './decorators/initializer.js';\nexport * from './decorators/observed.js';\nexport * from './decorators/pfelement.js';\nexport * from './decorators/time.js';\nexport * from './decorators/trace.js';\n"],
-  "mappings": "AAAA,mCACA,sCACA,yCACA,sCACA,uCACA,kCACA",
+  "sourcesContent": ["export * from './decorators/bound.js';\nexport * from './decorators/cascades.js';\nexport * from './decorators/color-context.js';\nexport * from './decorators/deprecation.js';\nexport * from './decorators/initializer.js';\nexport * from './decorators/observed.js';\nexport * from './decorators/pfelement.js';\nexport * from './decorators/time.js';\nexport * from './decorators/trace.js';\n"],
+  "mappings": "AAAA,mCACA,sCACA,2CACA,yCACA,yCACA,sCACA,uCACA,kCACA",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/pfe-core",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.5",
   "license": "MIT",
   "description": "PatternFly Elements Core Library",
   "customElements": "custom-elements.json",
@@ -9,98 +9,31 @@
   "module": "./core.js",
   "types": "./core.d.ts",
   "exports": {
-    ".": {
-      "esbuild": "./core.ts",
-      "default": "./core.js"
-    },
-    "./core.js": {
-      "esbuild": "./core.ts",
-      "default": "./core.js"
-    },
-    "./context.js": {
-      "esbuild": "./context.ts",
-      "default": "./context.js"
-    },
-    "./decorators.js": {
-      "esbuild": "./decorators.ts",
-      "default": "./decorators.js"
-    },
-    "./controllers/cascade-controller.js": {
-      "esbuild": "./controllers/cascade-controller.ts",
-      "default": "./controllers/cascade-controller.js"
-    },
-    "./controllers/color-context-controller.js": {
-      "esbuild": "./controllers/color-context-controller.ts",
-      "default": "./controllers/color-context-controller.js"
-    },
-    "./controllers/css-variable-controller.js": {
-      "esbuild": "./controllers/css-variable-controller.ts",
-      "default": "./controllers/css-variable-controller.js"
-    },
-    "./controllers/light-dom-controller.js": {
-      "esbuild": "./controllers/light-dom-controller.ts",
-      "default": "./controllers/light-dom-controller.js"
-    },
-    "./controllers/logger.js": {
-      "esbuild": "./controllers/logger.ts",
-      "default": "./controllers/logger.js"
-    },
-    "./controllers/perf-controller.js": {
-      "esbuild": "./controllers/perf-controller.ts",
-      "default": "./controllers/perf-controller.js"
-    },
-    "./controllers/property-observer-controller.js": {
-      "esbuild": "./controllers/property-observer-controller.ts",
-      "default": "./controllers/property-observer-controller.js"
-    },
-    "./controllers/slot-controller.js": {
-      "esbuild": "./controllers/slot-controller.ts",
-      "default": "./controllers/slot-controller.js"
-    },
-    "./controllers/style-controller.js": {
-      "esbuild": "./controllers/style-controller.ts",
-      "default": "./controllers/style-controller.js"
-    },
-    "./decorators/bound.js": {
-      "esbuild": "./decorators/bound.ts",
-      "default": "./decorators/bound.js"
-    },
-    "./decorators/cascades.js": {
-      "esbuild": "./decorators/cascades.ts",
-      "default": "./decorators/cascades.js"
-    },
-    "./decorators/initializer.js": {
-      "esbuild": "./decorators/initializer.ts",
-      "default": "./decorators/initializer.js"
-    },
-    "./decorators/observed.js": {
-      "esbuild": "./decorators/observed.ts",
-      "default": "./decorators/observed.js"
-    },
-    "./decorators/pfelement.js": {
-      "esbuild": "./decorators/pfelement.ts",
-      "default": "./decorators/pfelement.js"
-    },
-    "./decorators/time.js": {
-      "esbuild": "./decorators/time.ts",
-      "default": "./decorators/time.js"
-    },
-    "./decorators/trace.js": {
-      "esbuild": "./decorators/trace.ts",
-      "default": "./decorators/trace.js"
-    },
-    "./functions/debounce.js": {
-      "esbuild": "./functions/debounce.ts",
-      "default": "./functions/debounce.js"
-    },
-    "./functions/deprecateCustomEvent.js": {
-      "esbuild": "./functions/deprecateCustomEvent.ts",
-      "default": "./functions/deprecateCustomEvent.js"
-    },
-    "./functions/random.js": {
-      "esbuild": "./functions/random.ts",
-      "default": "./functions/random.js"
-    }
+    ".": "./core.js",
+    "./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",
+    "./controllers/light-dom-controller.js": "./controllers/light-dom-controller.js",
+    "./controllers/logger.js": "./controllers/logger.js",
+    "./controllers/perf-controller.js": "./controllers/perf-controller.js",
+    "./controllers/property-observer-controller.js": "./controllers/property-observer-controller.js",
+    "./controllers/slot-controller.js": "./controllers/slot-controller.js",
+    "./controllers/style-controller.js": "./controllers/style-controller.js",
+    "./decorators/bound.js": "./decorators/bound.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",
+    "./decorators/trace.js": "./decorators/trace.js",
+    "./functions/debounce.js": "./functions/debounce.js",
+    "./functions/deprecatedCustomEvent.js": "./functions/deprecatedCustomEvent.js",
+    "./functions/random.js": "./functions/random.js"
   },
   "publishConfig": {
     "access": "public",

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

@@ -1,42 +0,0 @@
-import { ReactiveController, ReactiveElement } from 'lit';
-import type { ContextTheme } from '../core.js';
-export declare class ColorContextController implements ReactiveController {
-    protected host: ReactiveElement;
-    private prefix;
-    private static contextEvents;
-    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

@@ -1,2 +0,0 @@
-var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var i=(l,e,t,n)=>{for(var o=n>1?void 0:n?h(e,t):e,a=l.length-1,s;a>=0;a--)(s=l[a])&&(o=(n?s(e,t,o):s(o))||o);return n&&o&&p(e,t,o),o};import"lit";import{ContextEvent as m,createContext as u}from"../context.js";import{bound as c}from"../decorators/bound.js";import{Logger as x}from"./logger.js";import{StyleController as b}from"./style-controller.js";import{css as v}from"lit";var k=v`: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)}`,f=k;var d=class{constructor(e,t="pfe"){this.host=e;this.prefix=t;this.callbacks=new Set;this.style=window.getComputedStyle(e),this.context=u(`${this.prefix}-color-context`,this.contextVariable),this.logger=new x(e),new b(e,f),e.addController(this)}hostConnected(){let e=new m(this.context,this.contextCallback,!0);this.host.dispatchEvent(e),d.contextEvents.add(e),this.host.addEventListener("context-request",this.onChildContextEvent);for(let t of d.contextEvents)t.target?.dispatchEvent(t);this.update()}hostDisconnected(){this.dispose?.(),this.dispose=void 0,this.callbacks.forEach(e=>this.callbacks.delete(e))}hostUpdate(){this.update()}isColorContextEvent(e){return e.target!==this.host&&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){this.host.updateComplete.then(()=>{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=d;r.contextEvents=new Set,i([c],r.prototype,"contextCallback",1),i([c],r.prototype,"onChildContextEvent",1),i([c],r.prototype,"update",1);export{r as ColorContextController};
-//# sourceMappingURL=color-context-controller.js.map

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

@@ -1,7 +0,0 @@
-{
-  "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 static contextEvents = new Set<ContextEvent<UnknownContext>>();\n\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    const event = new ContextEvent(this.context, this.contextCallback, true);\n    this.host.dispatchEvent(event);\n\n    ColorContextController.contextEvents.add(event);\n\n    // become a context provider\n    this.host.addEventListener('context-request', this.onChildContextEvent);\n\n    // re-fire all context events, in case this host upgraded after the previous one\n    for (const fired of ColorContextController.contextEvents) {\n      fired.target?.dispatchEvent(fired);\n    }\n\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 (\n      event.target !== this.host &&\n      event.context.name === `${this.prefix}-color-context`\n    );\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    // ordinarily we'd prefer async/await for this,\n    // but in this case, we use `.then` to maintain the synchronous interface of ContextCallback\n    this.host.updateComplete.then(() => {\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}\n", "import {css} from 'lit';\nexport const styles = css`: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)}`;\nexport default styles;\n"],
-  "mappings": "wMAAA,YAIA,gEACA,+CACA,qCACA,wDCPA,0BACO,GAAM,GAAS,sxFACf,EAAQ,EDSR,WAA2D,CAahE,YAAsB,EAA+B,EAAS,MAAO,CAA/C,YAA+B,cAV7C,eAAY,GAAI,KAWtB,KAAK,MAAQ,OAAO,iBAAiB,CAAI,EACzC,KAAK,QAAU,EAAc,GAAG,KAAK,uBAAwB,KAAK,eAAe,EACjF,KAAK,OAAS,GAAI,GAAO,CAAI,EAC7B,GAAI,GAAgB,EAAM,CAAmB,EAC7C,EAAK,cAAc,IAAI,CACzB,CAOA,eAAgB,CAEd,GAAM,GAAQ,GAAI,GAAa,KAAK,QAAS,KAAK,gBAAiB,EAAI,EACvE,KAAK,KAAK,cAAc,CAAK,EAE7B,EAAuB,cAAc,IAAI,CAAK,EAG9C,KAAK,KAAK,iBAAiB,kBAAmB,KAAK,mBAAmB,EAGtE,OAAW,KAAS,GAAuB,cACzC,EAAM,QAAQ,cAAc,CAAK,EAInC,KAAK,OAAO,CACd,CAMA,kBAAmB,CACjB,KAAK,UAAU,EACf,KAAK,QAAU,OACf,KAAK,UAAU,QAAQ,GAAK,KAAK,UAAU,OAAO,CAAC,CAAC,CACtD,CAKA,YAAa,CACX,KAAK,OAAO,CACd,CAGQ,oBACN,EACmD,CACnD,MACE,GAAM,SAAW,KAAK,MACtB,EAAM,QAAQ,OAAS,GAAG,KAAK,sBAEnC,IAGY,kBAAuC,CACjD,MAAO,MAAK,MAAM,iBAAiB,WAAW,EAAE,KAAK,GAAqB,IAC5E,CAGe,gBAAgB,EAA2B,EAAsB,CAE9E,AAAI,GAAW,IAAY,KAAK,SAC9B,KAAK,UAAU,EAEjB,KAAK,OAAO,CAAK,EACjB,KAAK,QAAU,CACjB,CAOe,oBAAoB,EAAqC,CAEtE,AAAI,KAAK,oBAAoB,CAAK,GAEhC,GAAM,gBAAgB,EAElB,EAAM,UACR,KAAK,UAAU,IAAI,EAAM,QAAQ,EAInC,EAAM,SAAS,KAAK,KAAK,aAAa,IAAI,CAAiB,EAE/D,CAGc,OAAO,EAA8B,CAGjD,KAAK,KAAK,eAAe,KAAK,IAAM,CAElC,GAAM,GAAW,KAAK,iBAAmB,EACnC,EAAU,KAAK,KAAK,aAAa,IAAI,EAC3C,GAAI,IAAa,EAAS,CACxB,GAAM,GAAO,EACb,KAAK,OAAO,IAAI,0BAA0B,QAAc,GAAM,EAE9D,AAAI,GAAQ,KACV,KAAK,KAAK,aAAa,KAAM,CAAI,EAEjC,KAAK,KAAK,gBAAgB,IAAI,EAGhC,OAAW,KAAM,MAAK,UACpB,EAAG,CAAQ,CAEf,CACF,CAAC,CACH,CACF,EAnIO,IACU,AADV,EACU,cAAgB,GAAI,KA6EpB,GAAf,GAAe,AA9EV,EA8EU,+BAcA,GAAf,GAAe,AA5FV,EA4FU,mCAgBD,GAAd,GAAc,AA5GT,EA4GS",
-  "names": []
-}