@design.estate/dees-catalog 3.74.2 → 3.76.0

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

@@ -94,12 +94,13 @@ export const demoFunc = () => html`
             .label=${'Username'}
             .value=${'johndoe'}
             .key=${'username'}
+            .description=${'Your username will be visible to other users'}
           ></dees-input-text>
 
           <dees-input-text
             .label=${'Email Address'}
             .value=${'john@example.com'}
-            .description=${'We will never share your email with anyone'}
+            .infoText=${'We will never share your email with anyone'}
             .key=${'email'}
           ></dees-input-text>
 
@@ -270,14 +271,14 @@ export const demoFunc = () => html`
             .label=${'Password with Toggle'}
             .isPasswordBool=${true}
             .value=${'mySecurePassword123'}
-            .description=${'Click the eye icon to show/hide password'}
+            .infoText=${'Click the eye icon to show/hide password'}
           ></dees-input-text>
 
           <dees-input-text
             .label=${'API Key'}
             .isPasswordBool=${true}
             .value=${'sk-1234567890abcdef'}
-            .description=${'Keep this key secure and never share it'}
+            .infoText=${'Keep this key secure and never share it'}
           ></dees-input-text>
         </div>
       </dees-panel>

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

@@ -289,7 +289,7 @@ export class DeesInputText extends DeesInputBase {
             `}
       </style>
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>
         <div class="maincontainer">
           <input
             type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}"
@@ -315,6 +315,7 @@ export class DeesInputText extends DeesInputBase {
                 </div>
               `
             : html`<div class="validationContainer"></div>`}
+          ${this.renderDescription()}
         </div>
       </div>
     `;

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

@@ -170,12 +170,6 @@ export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
       }
 
-      /* Description */
-      .description-text {
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
-        line-height: 1.5;
-      }
     `,
   ];
 
@@ -199,7 +193,7 @@ export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
           </div>
           <div class="label-container">
             ${this.label ? html`<div class="toggle-label">${this.label}</div>` : ''}
-            ${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
+            ${this.renderDescription()}
           </div>
         </div>
       </div>

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

@@ -48,13 +48,14 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-typelist
             .label=${'Tags'}
-            .description=${'Add tags by typing and pressing Enter'}
+            .infoText=${'Add tags by typing and pressing Enter'}
+            .description=${'Tags help categorize and filter your content'}
             .value=${['javascript', 'typescript', 'web-components']}
           ></dees-input-typelist>
 
           <dees-input-typelist
             .label=${'Team Members'}
-            .description=${'Add email addresses of team members'}
+            .infoText=${'Add email addresses of team members'}
             .value=${['alice@example.com', 'bob@example.com']}
           ></dees-input-typelist>
         </div>
@@ -64,7 +65,7 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-typelist
             .label=${'Your Skills'}
-            .description=${'List your professional skills'}
+            .infoText=${'List your professional skills'}
             .value=${['HTML', 'CSS', 'JavaScript', 'Node.js', 'React']}
           ></dees-input-typelist>
 
@@ -88,14 +89,14 @@ export const demoFunc = () => html`
         <div class="input-group">
           <dees-input-typelist
             .label=${'Project Dependencies'}
-            .description=${'List all required npm packages'}
+            .infoText=${'List all required npm packages'}
             .required=${true}
             .value=${['@design.estate/dees-element', '@design.estate/dees-domtools']}
           ></dees-input-typelist>
 
           <dees-input-typelist
             .label=${'System Tags'}
-            .description=${'These tags are managed by the system'}
+            .infoText=${'These tags are managed by the system'}
             .disabled=${true}
             .value=${['system', 'protected', 'readonly']}
           ></dees-input-typelist>
@@ -108,16 +109,16 @@ export const demoFunc = () => html`
           <dees-input-text 
             .label=${'Summary'} 
             .inputType=${'textarea'}
-            .description=${'Brief description of the article'}
+            .infoText=${'Brief description of the article'}
           ></dees-input-text>
           <dees-input-typelist
             .label=${'Tags'}
-            .description=${'Add relevant tags for better discoverability'}
+            .infoText=${'Add relevant tags for better discoverability'}
             .value=${['tutorial', 'web-development']}
           ></dees-input-typelist>
           <dees-input-typelist
             .label=${'Co-Authors'}
-            .description=${'Add email addresses of co-authors'}
+            .infoText=${'Add email addresses of co-authors'}
           ></dees-input-typelist>
         </dees-form>
         

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

@@ -153,7 +153,7 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
   public render(): TemplateResult {
     return html`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText}></dees-label>
         <div class="mainbox">
           <div class="tags" @click=${() => {
             this.shadowRoot!.querySelector('input')!.focus();
@@ -188,6 +188,7 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
             .disabled=${this.disabled}
           />
         </div>
+        ${this.renderDescription()}
       </div>
     `;
   }

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

@@ -292,17 +292,18 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
     return html`
       <dees-label
         .label="${this.label}"
-        .description="${this.description}"
+        .infoText="${this.infoText}"
         .required="${this.required}"
       ></dees-label>
       <div class="wysiwyg-container">
-        <div 
+        <div
           class="editor-content ${this.draggedBlockId ? 'dragging' : ''}"
           id="editor-content"
         >
           <!-- Blocks will be rendered programmatically -->
         </div>
       </div>
+      ${this.renderDescription()}
     `;
   }
 

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

@@ -273,7 +273,7 @@ export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePictu
   render(): TemplateResult {
     return html`
       <div class="input-wrapper">
-        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
+        <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required}></dees-label>
         
         <div 
           class="profile-container"
@@ -329,6 +329,7 @@ export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePictu
           accept="${this.acceptedFormats.join(',')}"
           @change=${this.handleFileSelect}
         />
+        ${this.renderDescription()}
       </div>
     `;
   }

package/ts_web/elements/00group-layout/dees-label/dees-label.demo.ts

@@ -85,31 +85,31 @@ export const demoFunc = () => html`
     </div>
 
     <div class="demo-section">
-      <h3>Description (Info Icon)</h3>
-      <p>When <code>description</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
+      <h3>Info Text (Info Icon)</h3>
+      <p>When <code>infoText</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
       <div class="label-grid">
         <div class="label-row">
-          <span class="annotation">description="..."</span>
-          <dees-label .label=${'API Key'} .description=${'Your API key can be found in the developer settings dashboard.'}></dees-label>
+          <span class="annotation">infoText="..."</span>
+          <dees-label .label=${'API Key'} .infoText=${'Your API key can be found in the developer settings dashboard.'}></dees-label>
         </div>
         <div class="label-row">
-          <span class="annotation">short description</span>
-          <dees-label .label=${'Region'} .description=${'Select your nearest datacenter.'}></dees-label>
+          <span class="annotation">short infoText</span>
+          <dees-label .label=${'Region'} .infoText=${'Select your nearest datacenter.'}></dees-label>
         </div>
       </div>
     </div>
 
     <div class="demo-section">
-      <h3>Required + Description</h3>
+      <h3>Required + Info Text</h3>
       <p>Both indicators can be combined. The asterisk appears first, then the info icon.</p>
       <div class="label-grid">
         <div class="label-row">
-          <span class="annotation">required + description</span>
-          <dees-label .label=${'Password'} .required=${true} .description=${'Must be at least 8 characters with one uppercase letter and one number.'}></dees-label>
+          <span class="annotation">required + infoText</span>
+          <dees-label .label=${'Password'} .required=${true} .infoText=${'Must be at least 8 characters with one uppercase letter and one number.'}></dees-label>
         </div>
         <div class="label-row">
-          <span class="annotation">required + description</span>
-          <dees-label .label=${'Email Address'} .required=${true} .description=${'We will send a verification link to this address.'}></dees-label>
+          <span class="annotation">required + infoText</span>
+          <dees-label .label=${'Email Address'} .required=${true} .infoText=${'We will send a verification link to this address.'}></dees-label>
         </div>
       </div>
     </div>

package/ts_web/elements/00group-layout/dees-label/dees-label.ts

@@ -32,7 +32,7 @@ export class DeesLabel extends DeesElement {
     type: String,
     reflect: true,
   })
-  accessor description!: string;
+  accessor infoText!: string;
 
   @property({
     type: Boolean,
@@ -98,12 +98,12 @@ export class DeesLabel extends DeesElement {
             <div class="label">
               ${this.label}
               ${this.required ? html`<span class="required">*</span>` : ''}
-              ${this.description
+              ${this.infoText
                 ? html`
                     <div class="description-icon">
                       <dees-icon .icon=${'lucide:info'}></dees-icon>
                     </div>
-                    <dees-speechbubble .text=${this.description}></dees-speechbubble>
+                    <dees-speechbubble .text=${this.infoText}></dees-speechbubble>
                   `
                 : html``}
             </div>

package/ts_web/elements/00group-layout/dees-tile/dees-tile.ts

@@ -45,6 +45,9 @@ export class DeesTile extends DeesElement {
   @property({ type: String })
   accessor heading: string = '';
 
+  @property({ type: String, reflect: true })
+  accessor overscroll: 'contain' | 'auto' | 'none' = 'auto';
+
   @state()
   accessor hasFooter: boolean = false;
 
@@ -100,7 +103,14 @@ export class DeesTile extends DeesElement {
         border-radius: 8px;
         border-top: 1px solid var(--dees-color-border-subtle);
         border-bottom: 1px solid var(--dees-color-border-subtle);
-        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      :host([overscroll="contain"]) .tile-content {
+        overscroll-behavior: contain;
       }
 
       .tile-content.no-footer {

package/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts

@@ -153,14 +153,6 @@ export class DeesModal extends DeesElement {
         overscroll-behavior: contain;
       }
 
-      dees-tile::part(content) {
-        overflow-x: hidden;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-        scrollbar-width: thin;
-        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
-      }
-
       dees-tile::part(outer) {
         box-shadow:
           0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
@@ -351,7 +343,7 @@ export class DeesModal extends DeesElement {
         ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ''}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <dees-tile class="${widthClass} ${mobileFullscreenClass}">
+        <dees-tile class="${widthClass} ${mobileFullscreenClass}" .overscroll=${'contain'}>
           <div slot="header" class="heading">
             <div class="heading-text">${this.heading}</div>
             <div class="header-buttons">