@design.estate/dees-catalog 7.0.0 → 8.0.0

package/ts_web/elements/00group-button/dees-button/dees-button.ts

@@ -3,6 +3,7 @@ import {
   html,
   DeesElement,
   property,
+  state,
   type TemplateResult,
   cssManager,
   css,
@@ -93,18 +94,36 @@ export class DeesButton extends DeesElement {
   @property({ type: String, reflect: true })
   accessor iconPosition: 'left' | 'right' = 'left';
 
+  @state()
+  private accessor adoptedText = '';
+
+  @state()
+  private accessor adoptedIcon = '';
+
+  @state()
+  private accessor adoptedIconPosition: 'left' | 'right' = 'left';
+
+  private lightDomObserver: MutationObserver | undefined = undefined;
+
   constructor() {
     super();
   }
 
-  public async connectedCallback() {
-    await super.connectedCallback();
+  public async connectedCallback(): Promise<void> {
+    const superConnected = super.connectedCallback();
+    this.observeLightDom();
+    await superConnected;
     // Auto-detect if inside a form
     if (!this.insideForm && this.closest('dees-form')) {
       this.insideForm = true;
     }
   }
 
+  public async disconnectedCallback(): Promise<void> {
+    this.lightDomObserver?.disconnect();
+    await super.disconnectedCallback();
+  }
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -464,49 +483,76 @@ export class DeesButton extends DeesElement {
     `,
   ];
 
-  /**
-   * Extracts icon and text from light DOM and sets properties
-   */
-  private extractLightDom(): void {
-    const iconElement = this.querySelector('dees-icon') as any;
-
-    // Get all text content from light DOM
-    const textContent = Array.from(this.childNodes)
-      .filter(node => node.nodeType === Node.TEXT_NODE)
-      .map(node => node.textContent?.trim())
-      .filter(Boolean)
-      .join(' ');
-
-    if (textContent && !this.text) {
-      this.text = textContent;
-    }
-
-    if (iconElement) {
-      const iconValue = iconElement.icon || iconElement.getAttribute('icon') || null;
-
-      if (iconValue) {
-        // Determine position based on DOM order
-        const children = Array.from(this.childNodes);
-        const iconIndex = children.indexOf(iconElement);
-        const textNodes = children.filter(node =>
-          node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
-        );
-
-        if (textNodes.length > 0) {
-          const firstTextIndex = children.indexOf(textNodes[0]);
-          this.iconPosition = iconIndex < firstTextIndex ? 'left' : 'right';
+  private observeLightDom(): void {
+    this.lightDomObserver ??= new MutationObserver((mutationsArg) => {
+      const supportedContentChanged = mutationsArg.some((mutationArg) => {
+        if (mutationArg.type === 'childList') {
+          return mutationArg.target === this;
+        }
+        if (mutationArg.type === 'characterData') {
+          return mutationArg.target.parentNode === this;
         }
+        return mutationArg.target.parentNode === this
+          && (mutationArg.target as Element).localName === 'dees-icon';
+      });
+      if (supportedContentChanged) {
+        this.adoptLightDom();
+      }
+    });
+    this.lightDomObserver.observe(this, {
+      attributes: true,
+      attributeFilter: ['icon'],
+      characterData: true,
+      childList: true,
+      subtree: true,
+    });
+    this.adoptLightDom();
+  }
 
-        // Set the icon property
-        this.icon = iconValue;
-      }
+  /** Mirrors supported direct light content without taking ownership of consumer nodes. */
+  private adoptLightDom(): void {
+    const children = Array.from(this.childNodes);
+    const textNodes = children.filter(
+      (nodeArg) => nodeArg.nodeType === Node.TEXT_NODE && nodeArg.textContent?.trim(),
+    );
+    const iconElement = children.find(
+      (nodeArg): nodeArg is HTMLElement & { icon?: string } =>
+        nodeArg instanceof HTMLElement && nodeArg.localName === 'dees-icon',
+    );
 
-      // Remove the light DOM icon element
-      iconElement.remove();
+    const nextAdoptedText = textNodes
+      .map((nodeArg) => nodeArg.textContent!.trim())
+      .join(' ');
+    const nextAdoptedIcon = iconElement?.icon || iconElement?.getAttribute('icon') || '';
+    const nextAdoptedIconPosition =
+      iconElement && textNodes.length > 0
+        ? children.indexOf(iconElement) < children.indexOf(textNodes[0])
+          ? 'left'
+          : 'right'
+        : 'left';
+
+    const textFollowsLightDom = this.text === this.adoptedText;
+    const iconFollowsLightDom = (this.icon || '') === this.adoptedIcon;
+    const iconPositionFollowsLightDom = this.iconPosition === this.adoptedIconPosition;
+    const previousAdoptedIcon = this.adoptedIcon;
+
+    this.adoptedText = nextAdoptedText;
+    this.adoptedIcon = nextAdoptedIcon;
+    this.adoptedIconPosition = nextAdoptedIconPosition;
+
+    if (textFollowsLightDom && this.text !== nextAdoptedText) {
+      this.text = nextAdoptedText;
+    }
+    if (
+      iconFollowsLightDom
+      && this.icon !== nextAdoptedIcon
+      && Boolean(nextAdoptedIcon || previousAdoptedIcon)
+    ) {
+      this.icon = nextAdoptedIcon;
+    }
+    if (iconPositionFollowsLightDom && this.iconPosition !== nextAdoptedIconPosition) {
+      this.iconPosition = nextAdoptedIconPosition;
     }
-
-    // Clear all remaining light DOM
-    this.innerHTML = '';
   }
 
   public render(): TemplateResult {
@@ -520,17 +566,20 @@ export class DeesButton extends DeesElement {
 
     const actualType = typeMap[this.type] || this.type;
     const actualSize = this.type === 'big' ? 'lg' : this.size;
+    const effectiveText = this.text;
+    const effectiveIcon = this.icon;
+    const effectiveIconPosition = this.iconPosition;
 
-    const leftIcon = this.iconPosition === 'left' && this.icon
-      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+    const leftIcon = effectiveIconPosition === 'left' && effectiveIcon
+      ? html`<dees-icon .icon=${effectiveIcon}></dees-icon>`
       : '';
-    const rightIcon = this.iconPosition === 'right' && this.icon
-      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+    const rightIcon = effectiveIconPosition === 'right' && effectiveIcon
+      ? html`<dees-icon .icon=${effectiveIcon}></dees-icon>`
       : '';
 
     // No placeholder label: a button without text renders icon-only.
     // size-icon additionally suppresses text to keep its square geometry.
-    const showText = Boolean(this.text) && !(actualSize === 'icon' && this.icon);
+    const showText = Boolean(effectiveText) && !(actualSize === 'icon' && effectiveIcon);
 
     return html`
       <div
@@ -541,7 +590,7 @@ export class DeesButton extends DeesElement {
         tabindex=${this.disabled ? -1 : 0}
         aria-disabled=${this.disabled ? 'true' : 'false'}
         aria-busy=${this.status === 'pending' ? 'true' : 'false'}
-        .ariaLabel=${showText ? null : this.text || null}
+        .ariaLabel=${showText ? null : effectiveText || null}
         @click="${this.dispatchClick}"
         @keydown=${this.handleKeydown}
         @keyup=${this.handleKeyup}
@@ -554,7 +603,7 @@ export class DeesButton extends DeesElement {
           ></dees-spinner>
         `}
         ${leftIcon}
-        ${showText ? html`<div class="textbox">${this.text}</div>` : ''}
+        ${showText ? html`<div class="textbox">${effectiveText}</div>` : ''}
         ${rightIcon}
       </div>
     `;
@@ -644,9 +693,4 @@ export class DeesButton extends DeesElement {
     }
     this.faceElement?.click();
   }
-
-  public async firstUpdated() {
-    // Extract light DOM content (icon + text) and set as properties
-    this.extractLightDom();
-  }
 }

package/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts

@@ -91,10 +91,7 @@ export class DeesFormSubmit extends DeesElement {
   }
 
   public async firstUpdated() {
-    // Capture light DOM text content as the button label. dees-button wipes
-    // its own light DOM during extractLightDom(), so we cannot simply forward
-    // a <slot> into it — we have to hoist the text onto the .text property
-    // ourselves before handing it to dees-button.
+    // Capture this wrapper's light-DOM text as the controlled label for its nested button.
     if (!this.text) {
       const slotText = this.textContent?.trim();
       if (slotText) {

package/ts_web/elements/00group-utility/dees-icon/dees-icon.ts

@@ -82,6 +82,7 @@ export class DeesIcon extends DeesElement {
    */
   @property({
     type: String,
+    reflect: true,
     converter: {
       fromAttribute: (value: string): IconWithPrefix => value as IconWithPrefix,
       toAttribute: (value: IconWithPrefix): string => value