@design.estate/dees-catalog 3.49.0 → 3.49.2

package/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts

@@ -9,7 +9,6 @@ import {
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
-import '../../00group-button/dees-button/dees-button.js';
 import { demoFunc } from './dees-input-list.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
@@ -130,13 +129,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       .list-item {
         display: flex;
         align-items: center;
-        gap: 8px;
-        padding: 12px 16px;
+        gap: 6px;
+        padding: 6px 10px;
         border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
         transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
         position: relative;
-        overflow: hidden; /* Prevent animation from affecting scroll bounds */
+        overflow: hidden;
       }
 
       .list-item:last-of-type {
@@ -181,8 +180,8 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .drag-handle dees-icon {
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
       }
 
       .item-content {
@@ -195,15 +194,15 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       .item-text {
         flex: 1;
         color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        font-size: 14px;
-        line-height: 20px;
+        font-size: 13px;
+        line-height: 18px;
         word-break: break-word;
       }
 
       .item-edit-input {
         flex: 1;
-        padding: 4px 8px;
-        font-size: 14px;
+        padding: 3px 6px;
+        font-size: 13px;
         font-family: inherit;
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
         border: 1px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
@@ -222,8 +221,8 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 28px;
-        height: 28px;
+        width: 24px;
+        height: 24px;
         border-radius: 4px;
         background: transparent;
         border: none;
@@ -262,34 +261,29 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .action-button dees-icon {
-        width: 14px;
-        height: 14px;
+        width: 13px;
+        height: 13px;
       }
 
       .add-item-container {
         display: flex;
-        gap: 8px;
-        padding: 12px 16px;
+        gap: 6px;
+        padding: 6px 10px;
         background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
         border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       .add-input {
         flex: 1;
-        padding: 8px 12px;
-        font-size: 14px;
+        padding: 4px 8px;
+        font-size: 13px;
+        line-height: 18px;
         font-family: inherit;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 4px;
+        background: transparent;
+        border: none;
         outline: none;
         color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        transition: all 0.15s ease;
-      }
-
-      .add-input:focus {
-        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
-        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
+        min-width: 0;
       }
 
       .add-input::placeholder {
@@ -302,29 +296,54 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
       }
 
       .add-button {
-        padding: 8px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+      }
+
+      .add-button:hover:not(:disabled) {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .add-button:disabled {
+        opacity: 0.3;
+        cursor: default;
+      }
+
+      .add-button dees-icon {
+        width: 14px;
+        height: 14px;
       }
 
       .empty-state {
-        padding: 32px 16px;
+        padding: 16px 10px;
         text-align: center;
         color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
-        font-size: 14px;
-        font-style: italic;
+        font-size: 13px;
       }
 
       .validation-message {
         color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
-        font-size: 13px;
-        margin-top: 6px;
-        line-height: 1.5;
+        font-size: 12px;
+        margin-top: 4px;
+        line-height: 1.4;
       }
 
       .description {
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        font-size: 13px;
-        margin-top: 6px;
-        line-height: 1.5;
+        font-size: 12px;
+        margin-top: 4px;
+        line-height: 1.4;
       }
 
       /* Scrollbar styling */
@@ -429,13 +448,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
                 @keydown=${this.handleAddKeyDown}
                 ?disabled=${this.disabled}
               />
-              <dees-button
+              <button
                 class="add-button"
                 @click=${this.addItem}
                 ?disabled=${!this.inputValue.trim()}
               >
-                <dees-icon .icon=${'lucide:plus'}></dees-icon> Add
-              </dees-button>
+                <dees-icon .icon=${'lucide:plus'}></dees-icon>
+              </button>
             </div>
           ` : ''}
         </div>

package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts

@@ -211,9 +211,9 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
   private indicatorInitialized = false;
 
   public async setIndicator() {
-    const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
+    const indicator: HTMLDivElement | null = this.shadowRoot!.querySelector('.indicator');
     const selectedIndex = this.options.indexOf(this.selectedOption);
-    
+
     // If no valid selection, hide indicator
     if (selectedIndex === -1 || !indicator) {
       if (indicator) {
@@ -221,8 +221,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
       }
       return;
     }
-    
-    const option: HTMLDivElement = this.shadowRoot.querySelector(
+
+    const option: HTMLDivElement | null = this.shadowRoot!.querySelector(
       `.option:nth-child(${selectedIndex + 2})`
     );
     

package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts

@@ -67,7 +67,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
     }
     
     // Subscribe to the inner input's changes
-    const innerInput = this.shadowRoot.querySelector('dees-input-text') as any;
+    const innerInput = this.shadowRoot!.querySelector('dees-input-text') as any;
     if (innerInput && innerInput.changeSubject) {
       innerInput.changeSubject.subscribe(() => {
         this.changeSubject.next(this);

package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts

@@ -35,7 +35,7 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   accessor direction: 'vertical' | 'horizontal' = 'vertical';
 
   @property({ type: String, reflect: true })
-  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null;
 
   // Form compatibility
   public get value() {
@@ -346,15 +346,15 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   }
 
   private focusNextOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
     const nextIndex = (currentIndex + 1) % radioCircles.length;
     (radioCircles[nextIndex] as HTMLElement).focus();
   }
 
   private focusPreviousOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
     const prevIndex = currentIndex <= 0 ? radioCircles.length - 1 : currentIndex - 1;
     (radioCircles[prevIndex] as HTMLElement).focus();
   }

package/ts_web/elements/00group-input/dees-input-richtext/component.ts

@@ -58,11 +58,11 @@ export class DeesInputRichtext extends DeesInputBase<string> {
   @state()
   accessor wordCount: number = 0;
 
-  private editorElement: HTMLElement;
-  private linkInputElement: HTMLInputElement;
+  private editorElement!: HTMLElement;
+  private linkInputElement!: HTMLInputElement;
   private tiptapBundle: ITiptapBundle | null = null;
 
-  public editor: Editor;
+  public editor!: Editor;
 
   public static styles = richtextStyles;
 
@@ -235,8 +235,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
     // Load Tiptap from CDN
     this.tiptapBundle = await DeesServiceLibLoader.getInstance().loadTiptap();
 
-    this.editorElement = this.shadowRoot.querySelector('.editor-content');
-    this.linkInputElement = this.shadowRoot.querySelector('.link-input input');
+    this.editorElement = this.shadowRoot!.querySelector('.editor-content')!;
+    this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!;
     this.initializeEditor();
   }
 

package/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts

@@ -73,9 +73,9 @@ export const demoFunc = () => html`
       const inputs = elementArg.querySelectorAll('dees-input-text');
       
       inputs.forEach((input: DeesInputText) => {
-        input.addEventListener('changeSubject', (event: CustomEvent) => {
+        input.addEventListener('changeSubject', ((event: CustomEvent) => {
           console.log(`Input "${input.label}" changed to:`, input.getValue());
-        });
+        }) as EventListener);
         
         input.addEventListener('blur', () => {
           console.log(`Input "${input.label}" lost focus`);
@@ -271,7 +271,8 @@ export const demoFunc = () => html`
       // Track password visibility toggles
       const passwordInputs = elementArg.querySelectorAll('dees-input-text[isPasswordBool]');
       
-      passwordInputs.forEach((input: DeesInputText) => {
+      passwordInputs.forEach((_input) => {
+        const input = _input as DeesInputText;
         // Monitor for toggle button clicks within shadow DOM
         const checkToggle = () => {
           const inputEl = input.shadowRoot?.querySelector('input');
@@ -316,10 +317,10 @@ export const demoFunc = () => html`
       
       if (dynamicInput && output) {
         // Update output on every change
-        dynamicInput.addEventListener('changeSubject', (event: CustomEvent) => {
+        dynamicInput.addEventListener('changeSubject', ((event: CustomEvent) => {
           const value = (event.detail as DeesInputText).getValue();
           output.textContent = `Current value: "${value}"`;
-        });
+        }) as EventListener);
         
         // Also track focus/blur events
         dynamicInput.addEventListener('focus', () => {

package/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts

@@ -47,7 +47,7 @@ export class DeesInputText extends DeesInputBase {
     type: Boolean,
     reflect: true,
   })
-  accessor validationState: 'valid' | 'warn' | 'invalid';
+  accessor validationState!: 'valid' | 'warn' | 'invalid';
 
   @property({
     reflect: true,
@@ -55,7 +55,7 @@ export class DeesInputText extends DeesInputBase {
   accessor validationText: string = '';
 
   @property({})
-  accessor validationFunction: (value: string) => boolean;
+  accessor validationFunction!: (value: string) => boolean;
 
   public static styles = [
     themeDefaultStyles,
@@ -274,12 +274,12 @@ export class DeesInputText extends DeesInputBase {
   }
 
   public async focus() {
-    const textInput = this.shadowRoot.querySelector('input');
-    textInput.focus();
+    const textInput = this.shadowRoot!.querySelector('input');
+    textInput!.focus();
   }
 
   public async blur() {
-    const textInput = this.shadowRoot.querySelector('input');
-    textInput.blur();
+    const textInput = this.shadowRoot!.querySelector('input');
+    textInput!.blur();
   }
 }

package/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts

@@ -12,17 +12,19 @@ export const demoFunc = () => html`
 
     if (toggleAllOnBtn && toggleAllOffBtn) {
       toggleAllOnBtn.addEventListener('click', () => {
-        featureToggles.forEach((toggle: DeesInputToggle) => {
-          if (!toggle.disabled && !toggle.required) {
-            toggle.value = true;
+        featureToggles.forEach((toggle) => {
+          const t = toggle as unknown as DeesInputToggle;
+          if (!t.disabled && !t.required) {
+            t.value = true;
           }
         });
       });
 
       toggleAllOffBtn.addEventListener('click', () => {
-        featureToggles.forEach((toggle: DeesInputToggle) => {
-          if (!toggle.disabled && !toggle.required) {
-            toggle.value = false;
+        featureToggles.forEach((toggle) => {
+          const t = toggle as unknown as DeesInputToggle;
+          if (!t.disabled && !t.required) {
+            t.value = false;
           }
         });
       });
@@ -280,10 +282,10 @@ export const demoFunc = () => html`
           <dees-input-toggle
             .label=${'Airplane mode'}
             .value=${false}
-            @newValue=${(event: CustomEvent) => {
+            @newValue=${(event: Event) => {
               const output = document.querySelector('#airplane-output');
               if (output) {
-                output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
+                output.textContent = `Airplane mode: ${(event as CustomEvent).detail ? 'ON' : 'OFF'}`;
               }
             }}
           ></dees-input-toggle>
@@ -291,10 +293,10 @@ export const demoFunc = () => html`
           <dees-input-toggle
             .label=${'Do not disturb'}
             .value=${false}
-            @newValue=${(event: CustomEvent) => {
+            @newValue=${(event: Event) => {
               const output = document.querySelector('#dnd-output');
               if (output) {
-                output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
+                output.textContent = `Do not disturb: ${(event as CustomEvent).detail ? 'ENABLED' : 'DISABLED'}`;
               }
             }}
           ></dees-input-toggle>

package/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts

@@ -156,7 +156,7 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
         <dees-label .label=${this.label} .description=${this.description}></dees-label>
         <div class="mainbox">
           <div class="tags" @click=${() => {
-            this.shadowRoot.querySelector('input').focus();
+            this.shadowRoot!.querySelector('input')!.focus();
           }}>
             ${this.value.length === 0
               ? html`<div class="notags">No tags yet</div>`

package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts

@@ -200,15 +200,16 @@ export class HeadingBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = (headingBlock.getRootNode() as ShadowRoot).host as any;
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts

@@ -213,15 +213,16 @@ export class ListBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = (listBlock.getRootNode() as ShadowRoot).host as any;
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts

@@ -193,15 +193,16 @@ export class ParagraphBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = element.closest('dees-wysiwyg-block');
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

package/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts

@@ -192,15 +192,16 @@ export class QuoteBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = (quoteBlock.getRootNode() as ShadowRoot).host as any;
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

package/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts

@@ -188,36 +188,39 @@ export class DeesFormattingMenu extends DeesElement {
   
   public firstUpdated(): void {
     // Set up event delegation for the menu
-    this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('mousedown', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
       const menu = this.shadowRoot?.querySelector('.formatting-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(mouseEvent.target as Node)) {
         // Prevent focus loss
-        e.preventDefault();
-        e.stopPropagation();
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
       }
     });
-    
-    this.shadowRoot?.addEventListener('click', (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
+
+    this.shadowRoot!.addEventListener('click', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
       const button = target.closest('.format-button') as HTMLElement;
-      
+
       if (button) {
-        e.preventDefault();
-        e.stopPropagation();
-        
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
+
         const command = button.getAttribute('data-command');
         if (command) {
           this.applyFormat(command);
         }
       }
     });
-    
-    this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => {
+
+    this.shadowRoot!.addEventListener('focus', (e: Event) => {
+      const focusEvent = e as FocusEvent;
       const menu = this.shadowRoot?.querySelector('.formatting-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(focusEvent.target as Node)) {
         // Prevent menu from taking focus
-        e.preventDefault();
-        e.stopPropagation();
+        focusEvent.preventDefault();
+        focusEvent.stopPropagation();
       }
     }, true); // Use capture phase
   }

package/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts

@@ -77,7 +77,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
   @state()
   accessor selectedText: string = '';
 
-  public editorContentRef: HTMLDivElement;
+  public editorContentRef!: HTMLDivElement;
   public isComposing: boolean = false;
   
   // Handler instances
@@ -144,7 +144,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
     // No global selection listener needed
     
     // Listen for custom selection events from blocks
-    this.addEventListener('block-text-selected', (e: CustomEvent) => {
+    this.addEventListener('block-text-selected', ((e: CustomEvent) => {
       
       if (!this.slashMenu.visible && e.detail.hasSelection && e.detail.text.length > 0) {
         this.selectedText = e.detail.text;
@@ -164,8 +164,8 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
           );
         }
       }
-    });
-    
+    }) as EventListener);
+
     // Hide formatting menu when clicking outside
     document.addEventListener('mousedown', (e) => {
       // Check if click is on the formatting menu itself
@@ -896,14 +896,14 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
           {
             name: 'Cancel',
             action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
               resolve(null);
             }
           },
           {
             name: 'Add Link',
             action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
               resolve(linkUrl);
             }
           }