@oslokommune/punkt-elements 19.5.0 → 19.5.2

package/dist/{datepicker-Cg-iueRC.cjs → datepicker-Bk-m5Zaa.cjs}

@@ -1,4 +1,4 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./if-defined-2mkIDgOm.cjs"),r=require("./element-with-slot-2PHu2w7O.cjs");require("./icon-Dnv6LtPC.cjs"),require("./calendar-TcxvS-1_.cjs");const i=require("./ref-Emu5PNxk.cjs"),a=require("./converters-BJ9Fe0kW.cjs");require("./tag--kFPXNaj.cjs");const o=require("./repeat-Dh9YKoeV.cjs"),s=require("./utils-63cRpWut.cjs"),c=require("./input-element-W6Gklt2E.cjs");require("./input-wrapper-B5rqKWSB.cjs");var l=class extends e.t{constructor(...e){super(...e),this.dates=[],this.dateformat=`dd.MM.yyyy`,this.className=`pkt-datepicker__tags`,this.idBase=s.n()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},e._`
+const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./element-with-slot-D7sTqOr3.cjs");require("./icon-Dnv6LtPC.cjs"),require("./calendar-TcxvS-1_.cjs");const r=require("./if-defined-2mkIDgOm.cjs"),i=require("./ref-Emu5PNxk.cjs"),a=require("./converters-BJ9Fe0kW.cjs");require("./tag-B5dUg7AD.cjs");const o=require("./repeat-Dh9YKoeV.cjs"),s=require("./utils-63cRpWut.cjs"),c=require("./input-element-CSfDGslx.cjs");require("./input-wrapper-BBG8EXQ8.cjs");var l=class extends e.t{constructor(...e){super(...e),this.dates=[],this.dateformat=`dd.MM.yyyy`,this.className=`pkt-datepicker__tags`,this.idBase=s.n()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},e._`
       <div class=${t.t(this.classes)} aria-live="polite">
         ${Array.isArray(this.dates)&&this.dates[0]?o.t(a.h((this.dates??[]).filter(Boolean)),e=>e,t=>e._` <pkt-tag
                   id=${this.idBase+t+`-tag`}
@@ -54,13 +54,13 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
           .type=${this.inputType}
           id="${this.id}-input"
           .value=${this.value}
-          min=${n.t(this.min)}
-          max=${n.t(this.max)}
-          placeholder=${n.t(this.placeholder)}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
           ?readonly=${this.isInputReadonly}
-          aria-describedby=${n.t(this.describedBy)}
+          aria-describedby=${r.t(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${n.t(this.errorMessageId)}
+          aria-errormessage=${r.t(this.errorMessageId)}
           @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
           @touchend=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
           ?disabled=${this.disabled}
@@ -73,21 +73,21 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         />
         ${this.renderCalendarButton()}
       </div>
-    `}};e.n([e.u({type:String})],M.prototype,`value`,void 0);try{e.d(`pkt-datepicker-single`)(M)}catch{console.warn(`Forsøker å definere <pkt-datepicker-single>, men den er allerede definert`)}var N=class extends j{constructor(...e){super(...e),this.value=[],this.label=``,this.showRangeLabels=!1,this.inputRefTo=i.t()}get inputElementTo(){return this.inputRefTo.value}render(){let r=D.getRangeLabelClasses(this.showRangeLabels);return e._`
+    `}};e.n([e.u({type:String})],M.prototype,`value`,void 0);try{e.d(`pkt-datepicker-single`)(M)}catch{console.warn(`Forsøker å definere <pkt-datepicker-single>, men den er allerede definert`)}var N=class extends j{constructor(...e){super(...e),this.value=[],this.label=``,this.showRangeLabels=!1,this.inputRefTo=i.t()}get inputElementTo(){return this.inputRefTo.value}render(){let n=D.getRangeLabelClasses(this.showRangeLabels);return e._`
       <div class="pkt-input__container">
         ${this.showRangeLabels?e._` <div class="pkt-input-prefix">${this.pktStrings.get(`generic`).from}</div> `:e.h}
         <input
-          aria-describedby=${n.t(this.describedBy)}
+          aria-describedby=${r.t(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${n.t(this.errorMessageId)}
+          aria-errormessage=${r.t(this.errorMessageId)}
           class=${t.t(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-input"
           aria-label="${this.label} ${this.pktStrings.get(`generic`).from}"
           .value=${this.value[0]??``}
-          min=${n.t(this.min)}
-          max=${n.t(this.max)}
-          placeholder=${n.t(this.placeholder)}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
           ?readonly=${this.isInputReadonly}
           ?disabled=${this.disabled}
           @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
@@ -99,22 +99,22 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
           @change=${e=>{this.dispatchChange(e),e.stopImmediatePropagation()}}
           ${i.n(this.inputRef)}
         />
-        <div class="${t.t(r)}" id="${this.id}-to-label">
+        <div class="${t.t(n)}" id="${this.id}-to-label">
           ${this.pktStrings.get(`generic`).to}
         </div>
         ${this.showRangeLabels?e.h:e._` <div class="pkt-input-separator">–</div> `}
         <input
-          aria-describedby=${n.t(this.describedBy)}
+          aria-describedby=${r.t(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${n.t(this.errorMessageId)}
+          aria-errormessage=${r.t(this.errorMessageId)}
           class=${t.t(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-to"
           aria-label="${this.label} ${this.pktStrings.get(`generic`).to}"
           .value=${this.value[1]??``}
-          min=${n.t(this.min)}
-          max=${n.t(this.max)}
-          placeholder=${n.t(this.placeholder)}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
           ?readonly=${this.isInputReadonly}
           ?disabled=${this.disabled}
           @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
@@ -131,15 +131,15 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
     `}};e.n([e.u({type:Array})],N.prototype,`value`,void 0),e.n([e.u({type:String})],N.prototype,`label`,void 0),e.n([e.u({type:Boolean})],N.prototype,`showRangeLabels`,void 0);try{e.d(`pkt-datepicker-range`)(N)}catch{console.warn(`Forsøker å definere <pkt-datepicker-range>, men den er allerede definert`)}var P=class extends j{constructor(...e){super(...e),this.value=[]}get isInputDisabled(){return this.disabled||this.maxlength!==void 0&&this.maxlength!==null&&this.value.length>=this.maxlength}dispatchAddToSelected(e){this.dispatchEvent(new CustomEvent(`add-to-selected`,{detail:e,bubbles:!0,composed:!0}))}render(){return e._`
       <div class="pkt-input__container">
         <input
-          aria-describedby=${n.t(this.describedBy)}
+          aria-describedby=${r.t(this.describedBy)}
           aria-invalid=${this.hasError}
-          aria-errormessage=${n.t(this.errorMessageId)}
+          aria-errormessage=${r.t(this.errorMessageId)}
           class=${t.t(this.inputClasses)}
           .type=${this.inputType}
           id="${this.id}-input"
-          min=${n.t(this.min)}
-          max=${n.t(this.max)}
-          placeholder=${n.t(this.placeholder)}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
           ?readonly=${this.isInputReadonly}
           ?disabled=${this.isInputDisabled}
           @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
@@ -162,12 +162,12 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         .max=${this.max}
         .placeholder=${this.placeholder}
         .readonly=${this.readonly}
-        .disabled=${this.disabled}
+        .disabled=${this.isDisabled}
         .inputClasses=${this.inputClasses}
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${!!(this.helptext||this.helptextDropdown)}
+        .hasHelptext=${!!(this.helptext||this.helptextDropdown||this.hasSlotContent(`helptext`))}
         .strings=${this.strings}
         @toggle-calendar=${e=>this.toggleCalendar(e.detail)}
         @input-change=${()=>this.onInput()}
@@ -188,13 +188,13 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         .max=${this.max}
         .placeholder=${this.placeholder}
         .readonly=${this.readonly}
-        .disabled=${this.disabled}
+        .disabled=${this.isDisabled}
         .showRangeLabels=${this.showRangeLabels}
         .inputClasses=${this.inputClasses}
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${!!(this.helptext||this.helptextDropdown)}
+        .hasHelptext=${!!(this.helptext||this.helptextDropdown||this.hasSlotContent(`helptext`))}
         .strings=${this.strings}
         @toggle-calendar=${e=>this.toggleCalendar(e.detail)}
         @input-change=${()=>this.onInput()}
@@ -216,13 +216,13 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         .max=${this.max}
         .placeholder=${this.placeholder}
         .readonly=${this.readonly}
-        .disabled=${this.disabled}
+        .disabled=${this.isDisabled}
         .maxlength=${this.maxlength}
         .inputClasses=${this.inputClasses}
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${!!(this.helptext||this.helptextDropdown)}
+        .hasHelptext=${!!(this.helptext||this.helptextDropdown||this.hasSlotContent(`helptext`))}
         .strings=${this.strings}
         @toggle-calendar=${e=>this.toggleCalendar(e.detail)}
         @input-change=${()=>this.onInput()}
@@ -254,13 +254,14 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
       ></pkt-datepicker-popup>
     `}render(){return this.inputClasses=D.getInputClasses(this.fullwidth,this.showRangeLabels,this.multiple,this.range,this.readonly,this.inputType,this.inputSize),e._`
       <pkt-input-wrapper
+        ${n.n(this,[`helptext`])}
         .strings=${this.strings}
         label="${this.label}"
         forId="${this.id}-input"
         ?counter=${this.multiple&&!!this.maxlength}
         .counterCurrent=${this.value?this._value.length:0}
         .counterMaxLength=${this.maxlength}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         ?hasError=${this.hasError}
         ?hasFieldset=${this.effectiveHasFieldset(!1)}
         ?inline=${this.inline}
@@ -278,7 +279,6 @@ const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),
         .ariaDescribedby=${this.ariaDescribedby}
         .size=${this.inputSize}
       >
-        <div class="pkt-contents" slot="helptext">${r.r(this,`helptext`)}</div>
         ${this.multiple?e._`<pkt-date-tags
               .dates=${this._value}
               dateformat=${this.dateformat}

package/dist/{datepicker-BY2IKrPk.js → datepicker-CFCRxFQL.js}

@@ -1,16 +1,16 @@
 import { _ as e, d as t, h as n, l as r, n as i, s as a, t as o, u as s } from "./element-mwwC2Rra.js";
 import { t as c } from "./class-map-C4hdfSfY.js";
-import { t as l } from "./if-defined-Bebu3LXY.js";
-import { r as ee } from "./element-with-slot-FD826ooP.js";
+import { n as ee } from "./element-with-slot-DQv0cbbD.js";
 import "./icon-JigbxxF7.js";
 import "./calendar-BLaRXUBl.js";
+import { t as l } from "./if-defined-Bebu3LXY.js";
 import { n as u, t as d } from "./ref-CCSGk4MP.js";
 import { a as f, c as p, d as m, h, i as g, m as _, n as v, r as y, s as b, t as x, u as S } from "./converters-CkjLSYpa.js";
-import "./tag-CvFakm1k.js";
+import "./tag-Bns7Xj1O.js";
 import { t as C } from "./repeat-CdxGS-_3.js";
 import { n as w, t as T } from "./utils-BwF4QSrq.js";
-import { t as E } from "./input-element-B1BntJeJ.js";
-import "./input-wrapper-CaMP5-Vm.js";
+import { t as E } from "./input-element-lLzfwdim.js";
+import "./input-wrapper-Bz9GwYrn.js";
 //#region src/components/datepicker/date-tags.ts
 var D = class extends o {
 	constructor(...e) {
@@ -943,12 +943,12 @@ var $ = class t extends E {
         .max=${this.max}
         .placeholder=${this.placeholder}
         .readonly=${this.readonly}
-        .disabled=${this.disabled}
+        .disabled=${this.isDisabled}
         .inputClasses=${this.inputClasses}
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${!!(this.helptext || this.helptextDropdown)}
+        .hasHelptext=${!!(this.helptext || this.helptextDropdown || this.hasSlotContent("helptext"))}
         .strings=${this.strings}
         @toggle-calendar=${(e) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
@@ -978,13 +978,13 @@ var $ = class t extends E {
         .max=${this.max}
         .placeholder=${this.placeholder}
         .readonly=${this.readonly}
-        .disabled=${this.disabled}
+        .disabled=${this.isDisabled}
         .showRangeLabels=${this.showRangeLabels}
         .inputClasses=${this.inputClasses}
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${!!(this.helptext || this.helptextDropdown)}
+        .hasHelptext=${!!(this.helptext || this.helptextDropdown || this.hasSlotContent("helptext"))}
         .strings=${this.strings}
         @toggle-calendar=${(e) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
@@ -1032,13 +1032,13 @@ var $ = class t extends E {
         .max=${this.max}
         .placeholder=${this.placeholder}
         .readonly=${this.readonly}
-        .disabled=${this.disabled}
+        .disabled=${this.isDisabled}
         .maxlength=${this.maxlength}
         .inputClasses=${this.inputClasses}
         .inputSize=${this.inputSize}
         .internals=${this.internals}
         .hasError=${this.hasError}
-        .hasHelptext=${!!(this.helptext || this.helptextDropdown)}
+        .hasHelptext=${!!(this.helptext || this.helptextDropdown || this.hasSlotContent("helptext"))}
         .strings=${this.strings}
         @toggle-calendar=${(e) => this.toggleCalendar(e.detail)}
         @input-change=${() => this.onInput()}
@@ -1084,13 +1084,14 @@ var $ = class t extends E {
 	render() {
 		return this.inputClasses = G.getInputClasses(this.fullwidth, this.showRangeLabels, this.multiple, this.range, this.readonly, this.inputType, this.inputSize), e`
       <pkt-input-wrapper
+        ${ee(this, ["helptext"])}
         .strings=${this.strings}
         label="${this.label}"
         forId="${this.id}-input"
         ?counter=${this.multiple && !!this.maxlength}
         .counterCurrent=${this.value ? this._value.length : 0}
         .counterMaxLength=${this.maxlength}
-        ?disabled=${this.disabled}
+        ?disabled=${this.isDisabled}
         ?hasError=${this.hasError}
         ?hasFieldset=${this.effectiveHasFieldset(!1)}
         ?inline=${this.inline}
@@ -1108,7 +1109,6 @@ var $ = class t extends E {
         .ariaDescribedby=${this.ariaDescribedby}
         .size=${this.inputSize}
       >
-        <div class="pkt-contents" slot="helptext">${ee(this, "helptext")}</div>
         ${this.multiple ? e`<pkt-date-tags
               .dates=${this._value}
               dateformat=${this.dateformat}

package/dist/directives/slot-content.d.ts

@@ -1,11 +1,15 @@
 import { LitElement } from 'lit';
 import { AsyncDirective, PartInfo } from 'lit/async-directive.js';
-import { ChildPart } from 'lit/directive.js';
+import { ChildPart, ElementPart } from 'lit/directive.js';
 /**
  * Returns the SlotManager for a host, creating one if it doesn't exist.
  * Call this in connectedCallback() to eagerly collect children before Lit renders.
  */
 export declare function getSlotManager(host: LitElement): SlotManager;
+declare const DEFAULT_SLOT: unique symbol;
+type SlotKey = string | typeof DEFAULT_SLOT;
+type SlotMapping = Array<[from: SlotKey, to: SlotKey]>;
+type ForwardedSlots = string[] | Record<string, string | null>;
 /**
  * Per-host singleton that manages node collection and observation.
  * Scans host children, categorizes them by slot attribute, and notifies
@@ -28,6 +32,8 @@ export declare class SlotManager {
     private placeholderToNode;
     private nodeToPlaceholder;
     private static PLACEHOLDER_PREFIX;
+    private sources;
+    private subscribers;
     constructor(host: LitElement);
     /**
      * Collect original children BEFORE Lit's first render.
@@ -43,6 +49,8 @@ export declare class SlotManager {
      * Unregister a directive instance. Stops observing if no directives remain.
      */
     removeDirective(d: SlotContentDirective): void;
+    addSource(token: object, manager: SlotManager, mapping: SlotMapping): void;
+    removeSource(token: object): void;
     /**
      * Returns nodes matching the given slot name.
      */
@@ -59,6 +67,10 @@ export declare class SlotManager {
      * the placeholder removal and clean up the real node.
      */
     ensurePlaceholder(node: Node): void;
+    private nodesFor;
+    private detachFrom;
+    private handleChange;
+    private stopObservingIfUnused;
     /**
      * Start MutationObserver for dynamic child changes.
      * Deferred via setTimeout to avoid catching Lit's first render mutations.
@@ -125,4 +137,27 @@ declare class SlotContentDirective extends AsyncDirective {
  * html`<div class="help">${slotContent(this, 'helptext')}</div>`
  */
 export declare const slotContent: (_host: LitElement, _slotName?: string | undefined) => import('lit-html/directive.js').DirectiveResult<typeof SlotContentDirective>;
+declare class ForwardSlotsDirective extends AsyncDirective {
+    private target;
+    private source;
+    private mapping;
+    constructor(partInfo: PartInfo);
+    render(_host: LitElement, _slots: ForwardedSlots): unknown;
+    update(part: ElementPart, [host, slots]: [LitElement, ForwardedSlots]): unknown;
+    disconnected(): void;
+    reconnected(): void;
+}
+/**
+ * Element directive that gives a child element the host's slot content without an
+ * intermediate element. The child renders the nodes with its own `slotContent()`.
+ *
+ * @param host - The component instance (typically `this`)
+ * @param slots - Slot names forwarded under the same name, or a map from the host's slot
+ *   name to the child's slot name (`null` for the child's default slot)
+ *
+ * @example
+ * html`<pkt-input-wrapper ${forwardSlots(this, ['helptext'])}></pkt-input-wrapper>`
+ * html`<pkt-helptext ${forwardSlots(this, { helptext: null })}></pkt-helptext>`
+ */
+export declare const forwardSlots: (_host: LitElement, _slots: ForwardedSlots) => import('lit-html/directive.js').DirectiveResult<typeof ForwardSlotsDirective>;
 export {};

package/dist/element-with-slot-D7sTqOr3.cjs

@@ -0,0 +1 @@
+const e=require("./element-BOmr9YLv.cjs"),t=require("./async-directive-BGoo_npW.cjs");function n(e){return e.classList&&(e.classList.contains(`_dialog_overlay`)||e.classList.contains(`backdrop`))?!0:typeof e.hasAttribute==`function`&&e.hasAttribute(`data-skip`)}function r(e){return e.nodeName===`OPTION`||e.nodeName===`DATA`}function i(e){return e.nodeType===Node.TEXT_NODE&&e.nodeValue?.trim()!==``}var a=new WeakMap;function o(e){let t=a.get(e);return t||(t=new p(e),a.set(e,t)),t}var s=Symbol(`default`);function c(e){return e===void 0?s:e}function l(e){return Array.isArray(e)?e.map(e=>[e,e]):Object.entries(e).map(([e,t])=>[e,t===null?s:t])}function u(e,t){return e.length===t.length&&e.every(([e,n],r)=>t[r][0]===e&&t[r][1]===n)}function d(e,t){if(e.nodeType===Node.COMMENT_NODE)return!1;if(e.nodeType===Node.TEXT_NODE)return i(e)?(f(t,s,e),!0):!1;if(e.nodeType===Node.ELEMENT_NODE){let i=e;if(n(i)||r(i))return!1;if(i instanceof HTMLTemplateElement){let e=Array.from(i.content.childNodes),n=c(i.getAttribute(`slot`)??void 0);for(let r of e)f(t,n,r);return!0}let a=i.getAttribute(`slot`);return f(t,a===null?s:c(a),e),!0}return!1}function f(e,t,n){let r=e.get(t);r||(r=[],e.set(t,r)),r.push(n)}var p=class e{static{this.PLACEHOLDER_PREFIX=`pkt-slot`}constructor(e){this.observer=null,this.nodesBySlot=new Map,this.directives=new Set,this.observing=!1,this.trackedNodes=new Set,this.generation=0,this.initialCollectionDone=!1,this.processingMutations=!1,this.placeholderToNode=new Map,this.nodeToPlaceholder=new Map,this.sources=new Map,this.subscribers=new Set,this.host=e}collectNodes(){if(this.initialCollectionDone)return;this.initialCollectionDone=!0,this.generation++;let e=Array.from(this.host.childNodes);for(let t of e)d(t,this.nodesBySlot)&&this.trackedNodes.add(t)}addDirective(e){this.directives.add(e),this.startObserving()}removeDirective(e){this.directives.delete(e),this.stopObservingIfUnused()}addSource(e,t,n){let r=this.sources.get(e);r&&r.manager===t&&u(r.mapping,n)||(r&&r.manager!==t&&this.detachFrom(r.manager,e),this.sources.set(e,{manager:t,mapping:n}),t.subscribers.add(this),t.startObserving(),this.handleChange())}removeSource(e){let t=this.sources.get(e);t&&(this.sources.delete(e),this.detachFrom(t.manager,e),this.handleChange())}getNodes(e){return this.nodesFor(c(e))}hasContent(e){return this.getNodes(e).length>0}ensurePlaceholder(t){if(this.nodeToPlaceholder.has(t))return;if(t.parentNode!==this.host){for(let{manager:e}of this.sources.values())e.ensurePlaceholder(t);return}let n=document.createComment(e.PLACEHOLDER_PREFIX);this.host.insertBefore(n,t),this.placeholderToNode.set(n,t),this.nodeToPlaceholder.set(t,n)}nodesFor(e){let t=this.nodesBySlot.get(e)??[];if(this.sources.size===0)return t;let n=[];for(let{manager:t,mapping:r}of this.sources.values())for(let[i,a]of r)a===e&&n.push(...t.nodesFor(i));return n.length?[...t,...n]:t}detachFrom(e,t){[...this.sources.entries()].some(([n,r])=>n!==t&&r.manager===e)||(e.subscribers.delete(this),e.stopObservingIfUnused())}handleChange(){this.generation++,this.notifyDirectives();for(let e of this.subscribers)e.handleChange();this.host.requestUpdate()}stopObservingIfUnused(){this.directives.size===0&&this.subscribers.size===0&&this.stopObserving()}startObserving(){this.observing||(this.observing=!0,setTimeout(()=>{!this.observing||typeof MutationObserver>`u`||(this.observer=new MutationObserver(e=>{this.handleMutations(e)}),this.observer.observe(this.host,{childList:!0,subtree:!0}))},0))}stopObserving(){this.observing&&(this.observing=!1,this.observer?.disconnect(),this.observer=null)}handleMutations(e){if(this.processingMutations)return;this.processingMutations=!0;let t=!1;for(let n of e){for(let e of n.removedNodes){let n=this.placeholderToNode.get(e);if(n){n.parentNode?.removeChild(n),this.trackedNodes.delete(n),this.removeFromSlots(n),this.placeholderToNode.delete(e),this.nodeToPlaceholder.delete(n),t=!0;continue}if(this.trackedNodes.has(e)&&!this.host.contains(e)){this.trackedNodes.delete(e),this.removeFromSlots(e);let n=this.nodeToPlaceholder.get(e);n&&(n.parentNode?.removeChild(n),this.placeholderToNode.delete(n),this.nodeToPlaceholder.delete(e)),t=!0}}if(n.target===this.host)for(let e of n.addedNodes)this.placeholderToNode.has(e)||!this.trackedNodes.has(e)&&this.isUserContent(e)&&d(e,this.nodesBySlot)&&(this.trackedNodes.add(e),t=!0)}t&&this.handleChange(),this.observer?.takeRecords(),this.processingMutations=!1}isUserContent(e){if(e.nodeType===Node.COMMENT_NODE)return!1;if(e.nodeType===Node.TEXT_NODE)return i(e);if(e.nodeType===Node.ELEMENT_NODE){let t=e;return!(n(t)||r(t))}return!1}removeFromSlots(e){for(let[t,n]of this.nodesBySlot){let r=n.indexOf(e);if(r!==-1){n.splice(r,1),n.length===0&&this.nodesBySlot.delete(t);return}}}notifyDirectives(){for(let e of this.directives)e.handleNodesChanged()}},m=class extends t.t{constructor(t){if(super(t),this.manager=null,this.lastGeneration=-1,t.type!==e.m.CHILD)throw Error(`slotContent() can only be used in child expressions`)}render(t,n){return e.g}update(e,[t,n]){return this.slotName=n,this.manager||(this.manager=o(t),this.manager.collectNodes(),this.manager.addDirective(this)),this.ensurePlaceholders(),this.getNodesOrNoChange()}handleNodesChanged(){if(!this.isConnected||!this.manager)return;this.ensurePlaceholders();let t=this.getNodesOrNoChange();t!==e.g&&this.setValue(t)}ensurePlaceholders(){if(!this.manager)return;let e=this.manager.getNodes(this.slotName);for(let t of e)this.manager.ensurePlaceholder(t)}disconnected(){this.manager?.removeDirective(this),this.manager=null,this.lastGeneration=-1}reconnected(){}getNodesOrNoChange(){if(!this.manager)return e.g;let t=this.manager.generation;return t===this.lastGeneration?e.g:(this.lastGeneration=t,this.manager.getNodes(this.slotName))}},h=e.f(m),g=class extends t.t{constructor(t){if(super(t),this.target=null,this.source=null,this.mapping=[],t.type!==e.m.ELEMENT)throw Error(`forwardSlots() can only be used as an element directive`)}render(t,n){return e.g}update(t,[n,r]){let i=o(t.element);return this.target&&this.target!==i&&this.target.removeSource(this),this.target=i,this.source=o(n),this.source.collectNodes(),this.mapping=l(r),this.target.addSource(this,this.source,this.mapping),e.g}disconnected(){this.target?.removeSource(this)}reconnected(){this.target&&this.source&&this.target.addSource(this,this.source,this.mapping)}},_=e.f(g),v=class extends e.t{connectedCallback(){o(this).collectNodes(),super.connectedCallback()}hasSlotContent(e){return o(this).hasContent(e)}};Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return v}});

package/dist/{element-with-slot-FD826ooP.js → element-with-slot-DQv0cbbD.js}

@@ -15,67 +15,109 @@ function s(e) {
 var c = /* @__PURE__ */ new WeakMap();
 function l(e) {
 	let t = c.get(e);
-	return t || (t = new m(e), c.set(e, t)), t;
+	return t || (t = new g(e), c.set(e, t)), t;
 }
 var u = Symbol("default");
 function d(e) {
 	return e === void 0 ? u : e;
 }
-function f(e, t) {
+function f(e) {
+	return Array.isArray(e) ? e.map((e) => [e, e]) : Object.entries(e).map(([e, t]) => [e, t === null ? u : t]);
+}
+function p(e, t) {
+	return e.length === t.length && e.every(([e, n], r) => t[r][0] === e && t[r][1] === n);
+}
+function m(e, t) {
 	if (e.nodeType === Node.COMMENT_NODE) return !1;
-	if (e.nodeType === Node.TEXT_NODE) return s(e) ? (p(t, u, e), !0) : !1;
+	if (e.nodeType === Node.TEXT_NODE) return s(e) ? (h(t, u, e), !0) : !1;
 	if (e.nodeType === Node.ELEMENT_NODE) {
 		let n = e;
 		if (a(n) || o(n)) return !1;
 		if (n instanceof HTMLTemplateElement) {
 			let e = Array.from(n.content.childNodes), r = d(n.getAttribute("slot") ?? void 0);
-			for (let n of e) p(t, r, n);
+			for (let n of e) h(t, r, n);
 			return !0;
 		}
 		let r = n.getAttribute("slot");
-		return p(t, r === null ? u : d(r), e), !0;
+		return h(t, r === null ? u : d(r), e), !0;
 	}
 	return !1;
 }
-function p(e, t, n) {
+function h(e, t, n) {
 	let r = e.get(t);
 	r || (r = [], e.set(t, r)), r.push(n);
 }
-var m = class e {
+var g = class e {
 	static {
 		this.PLACEHOLDER_PREFIX = "pkt-slot";
 	}
 	constructor(e) {
-		this.observer = null, this.nodesBySlot = /* @__PURE__ */ new Map(), this.directives = /* @__PURE__ */ new Set(), this.observing = !1, this.trackedNodes = /* @__PURE__ */ new Set(), this.generation = 0, this.initialCollectionDone = !1, this.processingMutations = !1, this.placeholderToNode = /* @__PURE__ */ new Map(), this.nodeToPlaceholder = /* @__PURE__ */ new Map(), this.host = e;
+		this.observer = null, this.nodesBySlot = /* @__PURE__ */ new Map(), this.directives = /* @__PURE__ */ new Set(), this.observing = !1, this.trackedNodes = /* @__PURE__ */ new Set(), this.generation = 0, this.initialCollectionDone = !1, this.processingMutations = !1, this.placeholderToNode = /* @__PURE__ */ new Map(), this.nodeToPlaceholder = /* @__PURE__ */ new Map(), this.sources = /* @__PURE__ */ new Map(), this.subscribers = /* @__PURE__ */ new Set(), this.host = e;
 	}
 	collectNodes() {
 		if (this.initialCollectionDone) return;
 		this.initialCollectionDone = !0, this.generation++;
 		let e = Array.from(this.host.childNodes);
-		for (let t of e) f(t, this.nodesBySlot) && this.trackedNodes.add(t);
+		for (let t of e) m(t, this.nodesBySlot) && this.trackedNodes.add(t);
 	}
 	addDirective(e) {
 		this.directives.add(e), this.startObserving();
 	}
 	removeDirective(e) {
-		this.directives.delete(e), this.directives.size === 0 && this.stopObserving();
+		this.directives.delete(e), this.stopObservingIfUnused();
+	}
+	addSource(e, t, n) {
+		let r = this.sources.get(e);
+		r && r.manager === t && p(r.mapping, n) || (r && r.manager !== t && this.detachFrom(r.manager, e), this.sources.set(e, {
+			manager: t,
+			mapping: n
+		}), t.subscribers.add(this), t.startObserving(), this.handleChange());
+	}
+	removeSource(e) {
+		let t = this.sources.get(e);
+		t && (this.sources.delete(e), this.detachFrom(t.manager, e), this.handleChange());
 	}
 	getNodes(e) {
-		return this.nodesBySlot.get(d(e)) ?? [];
+		return this.nodesFor(d(e));
 	}
 	hasContent(e) {
 		return this.getNodes(e).length > 0;
 	}
 	ensurePlaceholder(t) {
-		if (this.nodeToPlaceholder.has(t) || t.parentNode !== this.host) return;
+		if (this.nodeToPlaceholder.has(t)) return;
+		if (t.parentNode !== this.host) {
+			for (let { manager: e } of this.sources.values()) e.ensurePlaceholder(t);
+			return;
+		}
 		let n = document.createComment(e.PLACEHOLDER_PREFIX);
 		this.host.insertBefore(n, t), this.placeholderToNode.set(n, t), this.nodeToPlaceholder.set(t, n);
 	}
+	nodesFor(e) {
+		let t = this.nodesBySlot.get(e) ?? [];
+		if (this.sources.size === 0) return t;
+		let n = [];
+		for (let { manager: t, mapping: r } of this.sources.values()) for (let [i, a] of r) a === e && n.push(...t.nodesFor(i));
+		return n.length ? [...t, ...n] : t;
+	}
+	detachFrom(e, t) {
+		[...this.sources.entries()].some(([n, r]) => n !== t && r.manager === e) || (e.subscribers.delete(this), e.stopObservingIfUnused());
+	}
+	handleChange() {
+		this.generation++, this.notifyDirectives();
+		for (let e of this.subscribers) e.handleChange();
+		this.host.requestUpdate();
+	}
+	stopObservingIfUnused() {
+		this.directives.size === 0 && this.subscribers.size === 0 && this.stopObserving();
+	}
 	startObserving() {
 		this.observing || (this.observing = !0, setTimeout(() => {
-			this.observing && (this.observer = new MutationObserver((e) => {
+			!this.observing || typeof MutationObserver > "u" || (this.observer = new MutationObserver((e) => {
 				this.handleMutations(e);
-			}), this.observer.observe(this.host, { childList: !0 }));
+			}), this.observer.observe(this.host, {
+				childList: !0,
+				subtree: !0
+			}));
 		}, 0));
 	}
 	stopObserving() {
@@ -85,22 +127,22 @@ var m = class e {
 		if (this.processingMutations) return;
 		this.processingMutations = !0;
 		let t = !1;
-		for (let n of e) if (n.target === this.host) {
+		for (let n of e) {
 			for (let e of n.removedNodes) {
 				let n = this.placeholderToNode.get(e);
 				if (n) {
 					n.parentNode?.removeChild(n), this.trackedNodes.delete(n), this.removeFromSlots(n), this.placeholderToNode.delete(e), this.nodeToPlaceholder.delete(n), t = !0;
 					continue;
 				}
-				if (this.trackedNodes.has(e)) {
+				if (this.trackedNodes.has(e) && !this.host.contains(e)) {
 					this.trackedNodes.delete(e), this.removeFromSlots(e);
 					let n = this.nodeToPlaceholder.get(e);
 					n && (n.parentNode?.removeChild(n), this.placeholderToNode.delete(n), this.nodeToPlaceholder.delete(e)), t = !0;
 				}
 			}
-			for (let e of n.addedNodes) this.placeholderToNode.has(e) || !this.trackedNodes.has(e) && this.isUserContent(e) && f(e, this.nodesBySlot) && (this.trackedNodes.add(e), t = !0);
+			if (n.target === this.host) for (let e of n.addedNodes) this.placeholderToNode.has(e) || !this.trackedNodes.has(e) && this.isUserContent(e) && m(e, this.nodesBySlot) && (this.trackedNodes.add(e), t = !0);
 		}
-		t && (this.generation++, this.notifyDirectives()), this.observer?.takeRecords(), this.processingMutations = !1;
+		t && this.handleChange(), this.observer?.takeRecords(), this.processingMutations = !1;
 	}
 	isUserContent(e) {
 		if (e.nodeType === Node.COMMENT_NODE) return !1;
@@ -123,7 +165,7 @@ var m = class e {
 	notifyDirectives() {
 		for (let e of this.directives) e.handleNodesChanged();
 	}
-}, h = e(class extends i {
+}, _ = e(class extends i {
 	constructor(e) {
 		if (super(e), this.manager = null, this.lastGeneration = -1, e.type !== n.CHILD) throw Error("slotContent() can only be used in child expressions");
 	}
@@ -153,7 +195,24 @@ var m = class e {
 		let e = this.manager.generation;
 		return e === this.lastGeneration ? t : (this.lastGeneration = e, this.manager.getNodes(this.slotName));
 	}
-}), g = class extends r {
+}), v = e(class extends i {
+	constructor(e) {
+		if (super(e), this.target = null, this.source = null, this.mapping = [], e.type !== n.ELEMENT) throw Error("forwardSlots() can only be used as an element directive");
+	}
+	render(e, n) {
+		return t;
+	}
+	update(e, [n, r]) {
+		let i = l(e.element);
+		return this.target && this.target !== i && this.target.removeSource(this), this.target = i, this.source = l(n), this.source.collectNodes(), this.mapping = f(r), this.target.addSource(this, this.source, this.mapping), t;
+	}
+	disconnected() {
+		this.target?.removeSource(this);
+	}
+	reconnected() {
+		this.target && this.source && this.target.addSource(this, this.source, this.mapping);
+	}
+}), y = class extends r {
 	connectedCallback() {
 		l(this).collectNodes(), super.connectedCallback();
 	}
@@ -162,4 +221,4 @@ var m = class e {
 	}
 };
 //#endregion
-export { o as i, l as n, h as r, g as t };
+export { o as a, _ as i, v as n, l as r, y as t };