@design.estate/dees-catalog 3.77.0 → 3.78.0

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.77.0',
+    version: '3.78.0',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9

package/dist_ts_web/elements/00group-layout/dees-settings/dees-settings.d.ts

@@ -0,0 +1,33 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+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.
+ */
+export declare class DeesSettings extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor heading: string;
+    accessor description: string;
+    accessor settingsFields: ISettingsField[];
+    accessor actions: ISettingsAction[];
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/00group-layout/dees-settings/dees-settings.demo.d.ts

@@ -0,0 +1,2 @@
+import './dees-settings.js';
+export declare const demoFunc: () => import("@design.estate/dees-element").TemplateResult<1>;

package/dist_ts_web/elements/00group-layout/dees-settings/dees-settings.demo.js

@@ -0,0 +1,60 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import './dees-settings.js';
+export const demoFunc = () => {
+    const acmeFields = [
+        { 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 = [
+        { name: 'Edit', action: () => console.log('Edit clicked') },
+    ];
+    const emptyActions = [
+        { name: 'Configure', action: () => console.log('Configure clicked') },
+    ];
+    const multiActions = [
+        { 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>
+  `;
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1zZXR0aW5ncy5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtbGF5b3V0L2RlZXMtc2V0dGluZ3MvZGVlcy1zZXR0aW5ncy5kZW1vLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3BFLE9BQU8sb0JBQW9CLENBQUM7QUFHNUIsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEdBQUcsRUFBRTtJQUMzQixNQUFNLFVBQVUsR0FBcUI7UUFDbkMsRUFBRSxHQUFHLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxlQUFlLEVBQUUsS0FBSyxFQUFFLG1CQUFtQixFQUFFO1FBQ3BFLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUU7UUFDcEQsRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRTtRQUNuRCxFQUFFLEdBQUcsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFFO1FBQ3RELEVBQUUsR0FBRyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsbUJBQW1CLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRTtLQUNuRSxDQUFDO0lBRUYsTUFBTSxXQUFXLEdBQXNCO1FBQ3JDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsRUFBRTtLQUM1RCxDQUFDO0lBRUYsTUFBTSxZQUFZLEdBQXNCO1FBQ3RDLEVBQUUsSUFBSSxFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxtQkFBbUIsQ0FBQyxFQUFFO0tBQ3RFLENBQUM7SUFFRixNQUFNLFlBQVksR0FBc0I7UUFDdEMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLGVBQWUsQ0FBQyxFQUFFO1FBQzdELEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxjQUFjLENBQUMsRUFBRTtLQUM1RCxDQUFDO0lBRUYsT0FBTyxJQUFJLENBQUE7OztVQUdILEdBQUcsQ0FBQTs7MEJBRWEsVUFBVSxDQUFDLE9BQU8sQ0FBQyxlQUFlLEVBQUUsY0FBYyxDQUFDOzs7Ozs7O1NBT3BFOzs7O3FCQUlZLGVBQWU7NEJBQ1IsVUFBVTtxQkFDakIsV0FBVzs7OztxQkFJWCxlQUFlO3lCQUNYLDBGQUEwRjtxQkFDOUYsWUFBWTs7OztxQkFJWixlQUFlOzRCQUNSO1FBQ2hCLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxtQkFBbUIsRUFBRTtRQUM5RCxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFO0tBQzdDO3FCQUNVLFlBQVk7Ozs7R0FJOUIsQ0FBQztBQUNKLENBQUMsQ0FBQyJ9

package/dist_ts_web/elements/00group-layout/dees-settings/dees-settings.js

@@ -0,0 +1,240 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { customElement, DeesElement, html, css, cssManager, property, } 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';
+/**
+ * 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.
+ */
+let DeesSettings = (() => {
+    let _classDecorators = [customElement('dees-settings')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _heading_decorators;
+    let _heading_initializers = [];
+    let _heading_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    let _settingsFields_decorators;
+    let _settingsFields_initializers = [];
+    let _settingsFields_extraInitializers = [];
+    let _actions_decorators;
+    let _actions_initializers = [];
+    let _actions_extraInitializers = [];
+    var DeesSettings = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _heading_decorators = [property({ type: String })];
+            _description_decorators = [property({ type: String })];
+            _settingsFields_decorators = [property({ attribute: false })];
+            _actions_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _heading_decorators, { kind: "accessor", name: "heading", static: false, private: false, access: { has: obj => "heading" in obj, get: obj => obj.heading, set: (obj, value) => { obj.heading = value; } }, metadata: _metadata }, _heading_initializers, _heading_extraInitializers);
+            __esDecorate(this, null, _description_decorators, { kind: "accessor", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+            __esDecorate(this, null, _settingsFields_decorators, { kind: "accessor", name: "settingsFields", static: false, private: false, access: { has: obj => "settingsFields" in obj, get: obj => obj.settingsFields, set: (obj, value) => { obj.settingsFields = value; } }, metadata: _metadata }, _settingsFields_initializers, _settingsFields_extraInitializers);
+            __esDecorate(this, null, _actions_decorators, { kind: "accessor", name: "actions", static: false, private: false, access: { has: obj => "actions" in obj, get: obj => obj.actions, set: (obj, value) => { obj.actions = value; } }, metadata: _metadata }, _actions_initializers, _actions_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            DeesSettings = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = demoFunc;
+        static demoGroups = ['Layout'];
+        #heading_accessor_storage = __runInitializers(this, _heading_initializers, '');
+        get heading() { return this.#heading_accessor_storage; }
+        set heading(value) { this.#heading_accessor_storage = value; }
+        #description_accessor_storage = (__runInitializers(this, _heading_extraInitializers), __runInitializers(this, _description_initializers, ''));
+        get description() { return this.#description_accessor_storage; }
+        set description(value) { this.#description_accessor_storage = value; }
+        #settingsFields_accessor_storage = (__runInitializers(this, _description_extraInitializers), __runInitializers(this, _settingsFields_initializers, []));
+        get settingsFields() { return this.#settingsFields_accessor_storage; }
+        set settingsFields(value) { this.#settingsFields_accessor_storage = value; }
+        #actions_accessor_storage = (__runInitializers(this, _settingsFields_extraInitializers), __runInitializers(this, _actions_initializers, []));
+        get actions() { return this.#actions_accessor_storage; }
+        set actions(value) { this.#actions_accessor_storage = value; }
+        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)')};
+      }
+    `,
+        ];
+        render() {
+            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>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _actions_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return DeesSettings = _classThis;
+})();
+export { DeesSettings };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1zZXR0aW5ncy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWxheW91dC9kZWVzLXNldHRpbmdzL2RlZXMtc2V0dGluZ3MudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxhQUFhLEVBQ2IsV0FBVyxFQUNYLElBQUksRUFDSixHQUFHLEVBQ0gsVUFBVSxFQUNWLFFBQVEsR0FFVCxNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUN0RCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUN0RCxPQUFPLDZDQUE2QyxDQUFDO0FBbUJyRDs7Ozs7O0dBTUc7SUFFVSxZQUFZOzRCQUR4QixhQUFhLENBQUMsZUFBZSxDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Ozs7Ozs7NEJBQW5CLFNBQVEsV0FBVzs7OzttQ0FJMUMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3VDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7MENBRzFCLFFBQVEsQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQzttQ0FHOUIsUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDO1lBUi9CLDBLQUFTLE9BQU8sNkJBQVAsT0FBTyx5RkFBYztZQUc5QixzTEFBUyxXQUFXLDZCQUFYLFdBQVcsaUdBQWM7WUFHbEMsK0xBQVMsY0FBYyw2QkFBZCxjQUFjLHVHQUF3QjtZQUcvQywwS0FBUyxPQUFPLDZCQUFQLE9BQU8seUZBQXlCO1lBZDNDLDZLQTRKQzs7OztRQTNKUSxNQUFN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

package/dist_ts_web/elements/00group-layout/dees-settings/index.d.ts

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

package/dist_ts_web/elements/00group-layout/dees-settings/index.js

@@ -0,0 +1,2 @@
+export * from './dees-settings.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1sYXlvdXQvZGVlcy1zZXR0aW5ncy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLG9CQUFvQixDQUFDIn0=

package/dist_ts_web/elements/00group-layout/index.d.ts

@@ -4,5 +4,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';

package/dist_ts_web/elements/00group-layout/index.js

@@ -5,6 +5,7 @@ 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';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1sYXlvdXQvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0JBQW9CO0FBQ3BCLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxzQkFBc0IsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1sYXlvdXQvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0JBQW9CO0FBQ3BCLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHNCQUFzQixDQUFDIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.77.0",
+  "version": "3.78.0",
   "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",

package/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.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/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>
+  `;
+};

package/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>
+    `;
+  }
+}

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

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

package/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';