v3.78.2

changelog.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 2026-04-12 - 3.78.2 - fix(deps)
+bump @design.estate/dees-wcctools to ^3.9.0
+
+- Updates the @design.estate/dees-wcctools dependency from ^3.8.4 to ^3.9.0 in package.json.
+
+## 2026-04-12 - 3.78.1 - fix(dees-simple-login)
+use dees-tile for the login credentials container
+
+- replace the custom login card wrapper with a dees-tile component
+- update styles to target dees-tile and its content part while preserving form layout
+- add a credentials heading to the login tile
+
+## 2026-04-12 - 3.78.0 - feat(dees-settings)
+add dees-settings layout component for displaying read-only settings with footer actions
+
+- introduces a new dees-settings element with heading, description, settings field grid, and footer action support
+- exports dees-settings from the 00group-layout module index
+- adds demo examples covering populated, empty, and multi-action states
+
 ## 2026-04-12 - 3.77.0 - feat(dees-table)
 add configurable cell flash comparison and border highlight mode
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.77.0",
+  "version": "3.78.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.5.4",
     "@design.estate/dees-element": "^2.2.4",
-    "@design.estate/dees-wcctools": "^3.8.4",
+    "@design.estate/dees-wcctools": "^3.9.0",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-brands-svg-icons": "^7.2.0",
     "@fortawesome/free-regular-svg-icons": "^7.2.0",

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^2.2.4
         version: 2.2.4
       '@design.estate/dees-wcctools':
-        specifier: ^3.8.4
-        version: 3.8.4
+        specifier: ^3.9.0
+        version: 3.9.0
       '@fortawesome/fontawesome-svg-core':
         specifier: ^7.2.0
         version: 7.2.0
@@ -323,8 +323,8 @@ packages:
   '@design.estate/dees-element@2.2.4':
     resolution: {integrity: sha512-O9cA6flBMMd+pBwMQrZXwAWel9yVxgokolb+Em6gvkXxPJ0P/B5UDn4Vc2d4ts3ta55PTBm+l2dPeDVGx/bl7Q==}
 
-  '@design.estate/dees-wcctools@3.8.4':
-    resolution: {integrity: sha512-KpFK/azK+a/Xpq33pXKcho+tdFKVHhKZM5ArvHqo9QMwTczgp5DZZgowTDUuqAofjZwnuVfCPHK/Pw9e64N46A==}
+  '@design.estate/dees-wcctools@3.9.0':
+    resolution: {integrity: sha512-0vZBaGBEGIbl8hx+8BezIIea3U5T7iSHHF9VqlJZGf+nOFIW4zBAxcCljH8YzZ1Yayp6BEjxp/pQXjHN2YB3Jg==}
 
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
@@ -2070,6 +2070,12 @@ packages:
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
+  '@types/dom-mediacapture-transform@0.1.11':
+    resolution: {integrity: sha512-Y2p+nGf1bF2XMttBnsVPHUWzRRZzqUoJAKmiP10b5umnO6DDrWI0BrGDJy1pOHoOULVmGSfFNkQrAlC5dcj6nQ==}
+
+  '@types/dom-webcodecs@0.1.13':
+    resolution: {integrity: sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ==}
+
   '@types/fs-extra@11.0.4':
     resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
 
@@ -3136,6 +3142,9 @@ packages:
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
+  mediabunny@1.40.1:
+    resolution: {integrity: sha512-HU/stGzAkdWaJIly6ypbUVgAUvT9kt39DIg0IaErR7/1fwtTmgUYs4i8uEPYcgcjPjbB9gtBmUXOLnXi6J2LDw==}
+
   memory-pager@1.5.0:
     resolution: {integrity: sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==}
 
@@ -4711,7 +4720,7 @@ snapshots:
     dependencies:
       '@design.estate/dees-domtools': 2.5.4
       '@design.estate/dees-element': 2.2.4
-      '@design.estate/dees-wcctools': 3.8.4
+      '@design.estate/dees-wcctools': 3.9.0
       '@fortawesome/fontawesome-svg-core': 7.2.0
       '@fortawesome/free-brands-svg-icons': 7.2.0
       '@fortawesome/free-regular-svg-icons': 7.2.0
@@ -4787,12 +4796,13 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-wcctools@3.8.4':
+  '@design.estate/dees-wcctools@3.9.0':
     dependencies:
       '@design.estate/dees-domtools': 2.5.4
       '@design.estate/dees-element': 2.2.4
       '@push.rocks/smartdelay': 3.0.5
       lit: 3.3.2
+      mediabunny: 1.40.1
     transitivePeerDependencies:
       - '@nuxt/kit'
       - react
@@ -7245,6 +7255,12 @@ snapshots:
     dependencies:
       '@types/ms': 2.1.0
 
+  '@types/dom-mediacapture-transform@0.1.11':
+    dependencies:
+      '@types/dom-webcodecs': 0.1.13
+
+  '@types/dom-webcodecs@0.1.13': {}
+
   '@types/fs-extra@11.0.4':
     dependencies:
       '@types/jsonfile': 6.1.4
@@ -8468,6 +8484,11 @@ snapshots:
 
   mdurl@2.0.0: {}
 
+  mediabunny@1.40.1:
+    dependencies:
+      '@types/dom-mediacapture-transform': 0.1.11
+      '@types/dom-webcodecs': 0.1.13
+
   memory-pager@1.5.0: {}
 
   micromark-core-commonmark@2.0.3:

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.77.0',
+  version: '3.78.2',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-layout/dees-settings/dees-settings.demo.ts

@@ -0,0 +1,65 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import './dees-settings.js';
+import type { ISettingsField, ISettingsAction } from './dees-settings.js';
+
+export const demoFunc = () => {
+  const acmeFields: ISettingsField[] = [
+    { key: 'email', label: 'Account email', value: 'admin@example.com' },
+    { key: 'status', label: 'Status', value: 'enabled' },
+    { key: 'mode', label: 'Mode', value: 'production' },
+    { key: 'autoRenew', label: 'Auto-renew', value: 'on' },
+    { key: 'threshold', label: 'Renewal threshold', value: '30 days' },
+  ];
+
+  const acmeActions: ISettingsAction[] = [
+    { name: 'Edit', action: () => console.log('Edit clicked') },
+  ];
+
+  const emptyActions: ISettingsAction[] = [
+    { name: 'Configure', action: () => console.log('Configure clicked') },
+  ];
+
+  const multiActions: ISettingsAction[] = [
+    { name: 'Reset', action: () => console.log('Reset clicked') },
+    { name: 'Edit', action: () => console.log('Edit clicked') },
+  ];
+
+  return html`
+    <dees-demowrapper>
+      <style>
+        ${css`
+          .demoBox {
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            max-width: 600px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <dees-settings
+          .heading=${'ACME Settings'}
+          .settingsFields=${acmeFields}
+          .actions=${acmeActions}
+        ></dees-settings>
+
+        <dees-settings
+          .heading=${'ACME Settings'}
+          .description=${'No ACME configuration yet. Click Configure to set up automated TLS certificate issuance.'}
+          .actions=${emptyActions}
+        ></dees-settings>
+
+        <dees-settings
+          .heading=${'Server Config'}
+          .settingsFields=${[
+            { key: 'host', label: 'Hostname', value: 'proxy.example.com' },
+            { key: 'port', label: 'Port', value: '443' },
+          ]}
+          .actions=${multiActions}
+        ></dees-settings>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/00group-layout/dees-settings/dees-settings.ts

@@ -0,0 +1,196 @@
+import {
+  customElement,
+  DeesElement,
+  html,
+  css,
+  cssManager,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { demoFunc } from './dees-settings.demo.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-settings': DeesSettings;
+  }
+}
+
+export interface ISettingsField {
+  key: string;
+  label: string;
+  value: string | TemplateResult;
+}
+
+export interface ISettingsAction {
+  name: string;
+  action: () => void | Promise<void>;
+}
+
+/**
+ * dees-settings — a read-only settings display tile with modal-style footer actions.
+ *
+ * Renders a dees-tile with a heading, a grid of label/value fields,
+ * and a footer action bar. When an action is clicked the component
+ * dispatches a `settings-action` CustomEvent with the action name.
+ */
+@customElement('dees-settings')
+export class DeesSettings extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Layout'];
+
+  @property({ type: String })
+  accessor heading: string = '';
+
+  @property({ type: String })
+  accessor description: string = '';
+
+  @property({ attribute: false })
+  accessor settingsFields: ISettingsField[] = [];
+
+  @property({ attribute: false })
+  accessor actions: ISettingsAction[] = [];
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: ${cssGeistFontFamily};
+      }
+
+      .settingsGrid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+        gap: 12px 24px;
+        padding: 16px;
+      }
+
+      .settingsField {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .fieldLabel {
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+        color: var(--dees-color-text-muted);
+      }
+
+      .fieldValue {
+        font-size: 13px;
+        color: var(--dees-color-text-primary);
+      }
+
+      .settingsDescription {
+        padding: 16px;
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--dees-color-text-muted);
+      }
+
+      .bottomButtons {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .bottomButtons .bottomButton {
+        padding: 0 16px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
+        white-space: nowrap;
+        display: flex;
+        align-items: center;
+      }
+
+      .bottomButtons .bottomButton:first-child {
+        border-left: none;
+      }
+
+      .bottomButtons .bottomButton:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
+      }
+
+      .bottomButtons .bottomButton.primary {
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .bottomButtons .bottomButton.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .bottomButtons .bottomButton.primary:active {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.15)', 'hsl(213.1 93.9% 67.8% / 0.15)')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const hasFields = this.settingsFields.length > 0;
+    const hasActions = this.actions.length > 0;
+
+    return html`
+      <dees-tile .heading=${this.heading}>
+        ${hasFields
+          ? html`
+              <div class="settingsGrid">
+                ${this.settingsFields.map(
+                  (field) => html`
+                    <div class="settingsField">
+                      <span class="fieldLabel">${field.label}</span>
+                      <span class="fieldValue">${field.value}</span>
+                    </div>
+                  `,
+                )}
+              </div>
+            `
+          : html`
+              <div class="settingsDescription">${this.description}</div>
+            `}
+        ${hasActions
+          ? html`
+              <div slot="footer" class="bottomButtons">
+                ${this.actions.map(
+                  (actionArg, index) => html`
+                    <div
+                      class="bottomButton ${index === this.actions.length - 1 ? 'primary' : ''}"
+                      @click=${() => actionArg.action()}
+                    >
+                      ${actionArg.name}
+                    </div>
+                  `,
+                )}
+              </div>
+            `
+          : ''}
+      </dees-tile>
+    `;
+  }
+}

ts_web/elements/00group-layout/dees-settings/index.ts

@@ -0,0 +1 @@
+export * from './dees-settings.js';

ts_web/elements/00group-layout/index.ts

@@ -5,5 +5,6 @@ export * from './dees-heading/index.js';
 export * from './dees-label/index.js';
 export * from './dees-pagination/index.js';
 export * from './dees-panel/index.js';
+export * from './dees-settings/index.js';
 export * from './dees-stepper/index.js';
 export * from './dees-tile/index.js';

ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts

@@ -10,6 +10,7 @@ import {
   css,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -90,24 +91,25 @@ export class DeesSimpleLogin extends DeesElement {
         color: var(--dees-color-text-muted);
       }
 
-      .login-card {
-        background: var(--dees-color-bg-primary);
-        border: 1px solid var(--dees-color-border-default);
-        border-radius: 8px;
+      dees-tile {
+        width: 100%;
+      }
+
+      dees-tile::part(content) {
         padding: 24px;
       }
 
-      .login-card dees-form {
+      dees-tile dees-form {
         display: flex;
         flex-direction: column;
         gap: 16px;
       }
 
-      .login-card dees-input-text {
+      dees-tile dees-input-text {
         width: 100%;
       }
 
-      .login-card dees-form-submit {
+      dees-tile dees-form-submit {
         margin-top: 8px;
         width: 100%;
       }
@@ -122,13 +124,13 @@ export class DeesSimpleLogin extends DeesElement {
             <div class="header">Sign in</div>
             <div class="subheader">Enter your credentials to access ${this.name}</div>
           </div>
-          <div class="login-card">
+          <dees-tile .heading=${'Credentials'}>
             <dees-form>
               <dees-input-text key="username" label="Username" required></dees-input-text>
               <dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
               <dees-form-submit>Sign in</dees-form-submit>
             </dees-form>
-          </div>
+          </dees-tile>
         </div>
       </div>
       <div class="slotContainer">