fix(ui): standardize tile-based layouts across input, product card, and terminal preview components

2026-04-03 12:37:57 +00:00
parent 23d672040c
commit 42fd0b276e
8 changed files with 132 additions and 138 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
 # Changelog

+## 2026-04-03 - 3.51.2 - fix(ui)
+standardize tile-based layouts across input, product card, and terminal preview components
+
+- Replace custom card containers with dees-tile in code input, richtext editor, shopping product card, and terminal preview components
+- Move toolbars and footers into dees-tile header/footer slots for more consistent structure and spacing
+- Update hover, focus, and selected state styling to target dees-tile parts while preserving existing component behavior
+
 ## 2026-04-03 - 3.51.1 - fix(repo)
 no changes to commit

--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '3.51.1',
+  version: '3.51.2',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
+++ b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
@@ -12,6 +12,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-layout/dees-label/dees-label.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
 import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';

@@ -105,24 +106,16 @@ export class DeesInputCode extends DeesInputBase<string> {
        min-height: 0;
      }

-      .code-container {
-        display: flex;
-        flex-direction: column;
+      dees-tile {
        flex: 1;
        min-height: 0;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        overflow: hidden;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
      }

      .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 4px 12px;
        gap: 8px;
      }

@@ -256,8 +249,8 @@ export class DeesInputCode extends DeesInputBase<string> {
      </style>
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
-        <div class="code-container">
-          <div class="toolbar">
+        <dees-tile>
+          <div slot="header" class="toolbar">
            <div class="toolbar-left">
              <div class="language-selector">
                <button
@@ -322,7 +315,7 @@ export class DeesInputCode extends DeesInputBase<string> {
              @content-change=${this.handleContentChange}
            ></dees-workspace-monaco>
          </div>
-        </div>
+        </dees-tile>
      </div>
    `;
  }
--- a/ts_web/elements/00group-input/dees-input-richtext/component.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/component.ts
@@ -16,6 +16,7 @@ import {

 import type { Editor } from '@tiptap/core';
 import { DeesServiceLibLoader, type ITiptapBundle } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 declare global {
  interface HTMLElementTagNameMap {
--- a/ts_web/elements/00group-input/dees-input-richtext/styles.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/styles.ts
@@ -23,22 +23,15 @@ export const richtextStyles = [
        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
      }

-      .editor-container {
-        display: flex;
-        flex-direction: column;
-        min-height: ${cssManager.bdTheme('200px', '200px')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        overflow: hidden;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      dees-tile {
+        min-height: 200px;
      }

-      .editor-container:hover {
+      dees-tile:hover::part(outer) {
        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
      }

-      .editor-container.focused {
+      dees-tile.focused::part(outer) {
        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
      }
@@ -47,9 +40,7 @@ export const richtextStyles = [
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 4px 12px;
        align-items: center;
        position: relative;
      }
@@ -199,14 +190,15 @@ export const richtextStyles = [
      }

      .editor-footer {
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        padding: 0 12px;
+        height: 28px;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
        display: flex;
        justify-content: space-between;
        align-items: center;
+        width: 100%;
+        box-sizing: border-box;
      }

      .word-count {
--- a/ts_web/elements/00group-input/dees-input-richtext/template.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/template.ts
@@ -5,8 +5,8 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
      return html`
        <div class="input-wrapper">
          ${component.label ? html`<label class="label">${component.label}</label>` : ''}
-          <div class="editor-container ${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
-            <div class="editor-toolbar">
+          <dees-tile class="${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
+            <div slot="header" class="editor-toolbar">
              ${component.renderToolbar()}
              <div class="link-input ${component.showLinkInput ? 'show' : ''}">
                <input type="url" placeholder="Enter URL..." @keydown=${component.handleLinkInputKeydown} />
@@ -20,14 +20,14 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
            <div class="editor-content"></div>
            ${component.showWordCount
              ? html`
-                  <div class="editor-footer">
+                  <div slot="footer" class="editor-footer">
                    <span class="word-count">${component.wordCount} word${component.wordCount !== 1 ? 's' : ''}</span>
                  </div>
                `
              : ''}
-          </div>
+          </dees-tile>
          ${component.description ? html`<div class="description">${component.description}</div>` : ''}
        </div>
      `;
-  
+
 };
--- a/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts
+++ b/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts
@@ -9,6 +9,7 @@ import {
 } from '@design.estate/dees-element';
 import { demoFunc } from './dees-shopping-productcard.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 declare global {
  interface HTMLElementTagNameMap {
@@ -61,28 +62,20 @@ export class DeesShoppingProductcard extends DeesElement {
        display: block;
      }

-      .product-card {
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        overflow: hidden;
-        transition: all 0.2s ease;
-        display: flex;
-        flex-direction: column;
+      dees-tile {
        height: 100%;
-        position: relative;
      }

-      .product-card:hover {
+      dees-tile:hover::part(outer) {
        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
      }

-      .product-card.selectable {
+      dees-tile.selectable {
        cursor: pointer;
      }

-      .product-card.selected {
+      dees-tile.selected::part(outer) {
        border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.1)', 'hsl(213.1 93.9% 67.8% / 0.1)')};
      }
@@ -143,36 +136,48 @@ export class DeesShoppingProductcard extends DeesElement {
        transform: scale(1);
      }

-      .product-content {
-        padding: 16px;
+      .product-header-bar {
        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        flex: 1;
+        align-items: center;
+        justify-content: space-between;
+        height: 32px;
+        padding: 0 16px;
+        gap: 8px;
      }
-      
-      .product-header {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
+
+      .product-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
      }

      .product-category {
-        font-size: 12px;
+        font-size: 11px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
        text-transform: uppercase;
        letter-spacing: 0.05em;
-        line-height: 1.3;
-      }
-      
-      .product-name {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        line-height: 1.4;
+        white-space: nowrap;
+        flex-shrink: 0;
      }

+      .product-body {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .product-content {
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex: 1;
+      }
+      
      .product-description {
        font-size: 13px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
@@ -185,8 +190,9 @@ export class DeesShoppingProductcard extends DeesElement {
        align-items: center;
        justify-content: space-between;
        gap: 16px;
-        padding-top: 12px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 12px 16px;
+        width: 100%;
+        box-sizing: border-box;
      }

      .product-price {
@@ -248,66 +254,68 @@ export class DeesShoppingProductcard extends DeesElement {
    };

    return html`
-      <div 
-        class="product-card ${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
+      <dees-tile
+        class="${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
        @click=${this.handleCardClick}
      >
-        <div class="product-image">
-          ${imageUrl ? html`
-            <img src="${imageUrl}" alt="${name}">
-          ` : html`
-            <dees-icon .icon=${iconName}></dees-icon>
-          `}
-          ${this.selectable ? html`
-            <div 
-              class="selection-checkbox ${this.selected ? 'checked' : ''}"
-              @click=${(e: Event) => {
-                e.stopPropagation();
-                this.handleSelectionToggle();
-              }}
-            >
-              <dees-icon .icon=${'lucide:check'}></dees-icon>
-            </div>
-          ` : ''}
+        <div slot="header" class="product-header-bar">
+          <span class="product-name">${name}</span>
+          ${category ? html`<span class="product-category">${category}</span>` : ''}
        </div>
-        <div class="product-content">
-          <div class="product-header">
-            ${category ? html`<div class="product-category">${category}</div>` : ''}
-            <div class="product-name">${name}</div>
-          </div>
-          ${description ? html`
-            <div class="product-description">${description}</div>
-          ` : ''}
-          <div class="stock-status ${inStock ? 'in-stock' : 'out-of-stock'}">
-            <dees-icon .icon=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
-            ${stockText}
-          </div>
-          <div class="product-footer">
-            <div class="product-price">
-              <span class="price-current">${formatPrice(price)}</span>
-              ${originalPrice && originalPrice > price ? html`
-                <span class="price-original">${formatPrice(originalPrice)}</span>
-              ` : ''}
-            </div>
-            ${this.showQuantitySelector ? html`
-              <dees-input-quantityselector
-                .value=${this.quantity}
-                @changeSubject=${(e: CustomEvent) => {
-                  this.quantity = e.detail.getValue();
-                  this.dispatchEvent(new CustomEvent('quantityChange', {
-                    detail: { 
-                      quantity: this.quantity,
-                      productData: this.productData 
-                    },
-                    bubbles: true,
-                    composed: true
-                  }));
+        <div class="product-body">
+          <div class="product-image">
+            ${imageUrl ? html`
+              <img src="${imageUrl}" alt="${name}">
+            ` : html`
+              <dees-icon .icon=${iconName}></dees-icon>
+            `}
+            ${this.selectable ? html`
+              <div
+                class="selection-checkbox ${this.selected ? 'checked' : ''}"
+                @click=${(e: Event) => {
+                  e.stopPropagation();
+                  this.handleSelectionToggle();
                }}
-              ></dees-input-quantityselector>
+              >
+                <dees-icon .icon=${'lucide:check'}></dees-icon>
+              </div>
            ` : ''}
          </div>
+          <div class="product-content">
+            ${description ? html`
+              <div class="product-description">${description}</div>
+            ` : ''}
+            <div class="stock-status ${inStock ? 'in-stock' : 'out-of-stock'}">
+              <dees-icon .icon=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
+              ${stockText}
+            </div>
+          </div>
        </div>
-      </div>
+        <div slot="footer" class="product-footer">
+          <div class="product-price">
+            <span class="price-current">${formatPrice(price)}</span>
+            ${originalPrice && originalPrice > price ? html`
+              <span class="price-original">${formatPrice(originalPrice)}</span>
+            ` : ''}
+          </div>
+          ${this.showQuantitySelector ? html`
+            <dees-input-quantityselector
+              .value=${this.quantity}
+              @changeSubject=${(e: CustomEvent) => {
+                this.quantity = e.detail.getValue();
+                this.dispatchEvent(new CustomEvent('quantityChange', {
+                  detail: {
+                    quantity: this.quantity,
+                    productData: this.productData
+                  },
+                  bubbles: true,
+                  composed: true
+                }));
+              }}
+            ></dees-input-quantityselector>
+          ` : ''}
+        </div>
+      </dees-tile>
    `;
  }

--- a/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts
+++ b/ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts
@@ -11,6 +11,7 @@ import type { Terminal } from 'xterm';
 import type { FitAddon } from 'xterm-addon-fit';
 import { themeDefaultStyles } from '../../00theme.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 declare global {
  interface HTMLElementTagNameMap {
@@ -68,27 +69,19 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
        height: 200px;
      }

-      .terminal-preview {
+      dees-tile {
        height: 100%;
-        border-radius: 8px;
-        overflow: hidden;
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        display: flex;
-        flex-direction: column;
      }

      .terminal-header {
        display: flex;
        align-items: center;
        gap: 8px;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 10%)')};
+        padding: 0 12px;
+        height: 32px;
        font-size: 12px;
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        flex-shrink: 0;
      }

      .terminal-header-icon {
@@ -262,15 +255,15 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {

  public render(): TemplateResult {
    return html`
-      <div class="terminal-preview">
-        <div class="terminal-header">
+      <dees-tile>
+        <div slot="header" class="terminal-header">
          <span class="terminal-header-icon">$</span>
          <span class="terminal-header-command">${this.command || 'Waiting...'}</span>
        </div>
        <div class="terminal-container">
          <div id="xterm-container"></div>
        </div>
-      </div>
+      </dees-tile>
    `;
  }