@design.estate/dees-catalog 9.3.0 → 9.4.0

package/dist_ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.js

@@ -32,10 +32,12 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { customElement, property, html, css, cssManager, DeesElement, } from '@design.estate/dees-element';
+import { customElement, DeesElement, property, html, css, cssManager } 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';
+import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
+import '../../00group-input/dees-input-quantityselector/dees-input-quantityselector.js';
 let DeesShoppingProductcard = (() => {
     let _classDecorators = [customElement('dees-shopping-productcard')];
     let _classDescriptor;
@@ -77,10 +79,7 @@ let DeesShoppingProductcard = (() => {
         }
         static demo = demoFunc;
         static demoGroups = ['Simple'];
-        #productData_accessor_storage = __runInitializers(this, _productData_initializers, {
-            name: 'Product Name',
-            price: 0,
-        });
+        #productData_accessor_storage = __runInitializers(this, _productData_initializers, { name: 'Product Name', price: 0 });
         get productData() { return this.#productData_accessor_storage; }
         set productData(value) { this.#productData_accessor_storage = value; }
         #quantity_accessor_storage = (__runInitializers(this, _productData_extraInitializers), __runInitializers(this, _quantity_initializers, 0));
@@ -95,280 +94,62 @@ let DeesShoppingProductcard = (() => {
         #selected_accessor_storage = (__runInitializers(this, _selectable_extraInitializers), __runInitializers(this, _selected_initializers, false));
         get selected() { return this.#selected_accessor_storage; }
         set selected(value) { this.#selected_accessor_storage = value; }
-        static styles = [
-            themeDefaultStyles,
-            cssManager.defaultStyles,
-            css `
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-      :host {
-        display: block;
-      }
-
-      dees-tile {
-        height: 100%;
-      }
-
-      dees-tile:hover::part(outer) {
-        border-color: var(--dees-color-border-strong);
-        box-shadow: var(--dees-shadow-md);
-      }
-
-      dees-tile.selectable {
-        cursor: pointer;
-      }
-
-      dees-tile.selected::part(outer) {
-        border-color: var(--dees-color-link);
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--dees-color-link) 10%, transparent);
-      }
-
-      .product-image {
-        width: 100%;
-        height: 180px;
-        background: var(--dees-color-badge-default-bg);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        overflow: hidden;
-      }
-
-      .product-image img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .product-image dees-icon {
-        font-size: 48px;
-        color: var(--dees-color-text-muted);
-      }
-
-      .selection-checkbox {
-        position: absolute;
-        top: var(--dees-spacing-md);
-        right: var(--dees-spacing-md);
-        width: 20px;
-        height: 20px;
-        background: var(--dees-color-bg-primary);
-        border: 2px solid color-mix(in srgb, var(--dees-color-text-primary) 35%, transparent);
-        border-radius: var(--dees-radius-sm);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all var(--dees-transition-default) var(--dees-ease-standard);
-        cursor: pointer;
-      }
-
-      .selection-checkbox.checked {
-        background: var(--dees-color-link);
-        border-color: var(--dees-color-link);
-      }
-
-      .selection-checkbox dees-icon {
-        color: var(--dees-color-on-accent);
-        font-size: 12px;
-        opacity: 0;
-        transform: scale(0);
-        transition: all var(--dees-transition-default) var(--dees-ease-standard);
-      }
-
-      .selection-checkbox.checked dees-icon {
-        opacity: 1;
-        transform: scale(1);
-      }
-
-      .product-header-bar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: var(--dees-control-height-sm);
-        padding: 0 var(--dees-spacing-lg);
-        gap: var(--dees-spacing-sm);
-      }
-
-      .product-name {
-        font-size: var(--dees-font-control-size);
-        font-weight: var(--dees-font-control-weight);
-        color: var(--dees-color-text-secondary);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .product-category {
-        font-size: var(--dees-font-caption2-size);
-        font-weight: var(--dees-font-control-weight);
-        color: var(--dees-color-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        white-space: nowrap;
-        flex-shrink: 0;
-      }
-
-      .product-body {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .product-content {
-        padding: var(--dees-spacing-md) var(--dees-spacing-lg);
-        display: flex;
-        flex-direction: column;
-        gap: var(--dees-spacing-sm);
-        flex: 1;
-      }
-
-      .product-description {
-        font-size: var(--dees-font-control-size-sm);
-        color: var(--dees-color-text-muted);
-        line-height: 1.5;
-        flex: 1;
-      }
-
-      .product-footer {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--dees-spacing-lg);
-        padding: var(--dees-spacing-md) var(--dees-spacing-lg);
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      .product-price {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-
-      .price-current {
-        font-size: var(--dees-font-title3-size);
-        font-weight: 600;
-        color: var(--dees-color-text-primary);
-      }
-
-      .price-original {
-        font-size: var(--dees-font-control-size);
-        color: var(--dees-color-text-muted);
-        text-decoration: line-through;
-      }
-
-      .stock-status {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--dees-spacing-xs);
-        font-size: var(--dees-font-caption1-size);
-        margin-top: var(--dees-spacing-sm);
-      }
-
-      .stock-status.in-stock {
-        color: var(--dees-color-text-success);
-      }
-
-      .stock-status.out-of-stock {
-        color: var(--dees-color-accent-error);
-      }
-
-      .stock-status dees-icon {
-        font-size: 14px;
-      }
-    `,
-        ];
+        static styles = [themeDefaultStyles, cssManager.defaultStyles, css `
+    :host { display: flex; min-width: 0; font: 13px/1.5 var(--dees-font-family); color: var(--dees-color-text-primary); }
+    * { box-sizing: border-box; }
+    article { display: flex; flex-direction: column; width: 100%; min-width: 0; position: relative; background: var(--dees-color-bg-primary); border: 1px solid var(--dees-color-border-subtle); border-radius: var(--dees-radius-2xl); corner-shape: var(--dees-corner-shape); transition: border-color 140ms ease, box-shadow 140ms ease; }
+    article.selectable { cursor: pointer; }
+    article.selected { border-color: var(--dees-color-accent-primary); box-shadow: 0 0 0 1px var(--dees-color-accent-primary); }
+    .product-image { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 8px 8px 0; min-width: 0; border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-bg-secondary); overflow: hidden; color: var(--dees-color-text-secondary); }
+    .product-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
+    .selection { position: absolute; inset: 16px 16px auto auto; display: grid; place-items: center; min-width: 32px; min-height: 32px; border-radius: var(--dees-radius-md); background: var(--dees-color-bg-primary); box-shadow: var(--dees-shadow-xs); }
+    .selection dees-input-checkbox { --dees-input-spacing: 0px; }
+    .product-content { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 20px; }
+    .category { color: var(--dees-color-text-secondary); font-size: 11px; font-weight: 500; }
+    h3 { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
+    .description { color: var(--dees-color-text-secondary); margin: 0; }
+    .stock { display: flex; align-items: center; gap: 5px; color: var(--dees-color-text-secondary); font-size: 11px; margin-top: auto; padding-top: 8px; }
+    .stock.unavailable { color: var(--dees-color-text-warning); }
+    .product-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 20px 20px; }
+    .price { display: grid; align-content: center; min-height: 40px; gap: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+    .current-price { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
+    .original-price { font-size: 12px; color: var(--dees-color-text-secondary); }
+    .quantity { border-radius: var(--dees-radius-lg); background: var(--dees-color-fill-secondary); }
+    @media (hover: hover) { article.selectable:hover:not(.selected) { border-color: var(--dees-color-border-strong); box-shadow: var(--dees-shadow-sm); } }
+    @media (prefers-reduced-motion: reduce) { article { transition: none; } }
+  `];
         render() {
-            const { name, category, description, price, originalPrice, currency = '$', inStock = true, stockText = inStock ? 'In Stock' : 'Out of Stock', imageUrl, iconName = 'lucide:package', } = this.productData;
-            const formatPrice = (value) => {
-                return `${currency}${value.toFixed(2)}`;
-            };
-            return html `
-      <dees-tile
-        class="${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
-        @click=${this.handleCardClick}
-      >
-        <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-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) => {
-                e.stopPropagation();
-                this.handleSelectionToggle();
-            }}
-              >
-                <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 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) => {
-                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>
-    `;
+            const product = this.productData;
+            const available = product.inStock !== false;
+            const currency = product.currency || '$';
+            return html `<article class="${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}" aria-labelledby="product-name" @click=${this.toggleSelection}>
+      <div class="product-image">${product.imageUrl ? html `<img src=${product.imageUrl} alt=${product.name} loading="lazy" decoding="async">` : html `<dees-icon .icon=${product.iconName || 'lucide:package'} iconSize="64"></dees-icon>`}</div>
+      ${this.selectable ? html `<div class="selection" @click=${(event) => event.stopPropagation()}>
+        <dees-input-checkbox .ariaLabel=${`Select ${product.name}`} .value=${this.selected}
+          @newValue=${(event) => this.setSelection(event.detail)}></dees-input-checkbox>
+      </div>` : ''}
+      <div class="product-content">${product.category ? html `<div class="category">${product.category}</div>` : ''}
+        <h3 id="product-name">${product.name}</h3>${product.description ? html `<p class="description">${product.description}</p>` : ''}
+        <div class="stock ${available ? '' : 'unavailable'}"><dees-icon .icon=${available ? 'lucide:check' : 'lucide:clock'} iconSize="12"></dees-icon>${product.stockText || (available ? 'In stock' : 'Out of stock')}</div>
+      </div>
+      <footer class="product-footer"><div class="price"><span class="current-price">${currency}${product.price.toFixed(2)}</span>
+        ${product.originalPrice !== undefined && product.originalPrice > product.price ? html `<s class="original-price">${currency}${product.originalPrice.toFixed(2)}</s>` : ''}</div>
+        ${this.showQuantitySelector ? html `<div class="quantity" role="group" aria-label=${`Quantity for ${product.name}`} @click=${(event) => event.stopPropagation()}>
+          <dees-input-quantityselector .value=${this.quantity}
+            @newValue=${(event) => {
+                this.quantity = event.detail;
+                this.dispatchEvent(new CustomEvent('quantityChange', { detail: { quantity: this.quantity, productData: this.productData }, bubbles: true, composed: true }));
+            }}></dees-input-quantityselector></div>` : ''}
+      </footer>
+    </article>`;
         }
-        handleCardClick() {
-            if (this.selectable) {
-                this.selected = !this.selected;
-                this.dispatchEvent(new CustomEvent('selectionChange', {
-                    detail: {
-                        selected: this.selected,
-                        productData: this.productData
-                    },
-                    bubbles: true,
-                    composed: true
-                }));
-            }
-        }
-        handleSelectionToggle() {
-            this.selected = !this.selected;
-            this.dispatchEvent(new CustomEvent('selectionChange', {
-                detail: {
-                    selected: this.selected,
-                    productData: this.productData
-                },
-                bubbles: true,
-                composed: true
-            }));
+        toggleSelection() { if (this.selectable)
+            this.setSelection(!this.selected); }
+        setSelection(selected) {
+            if (!this.selectable || this.selected === selected)
+                return;
+            this.selected = selected;
+            this.dispatchEvent(new CustomEvent('selectionChange', { detail: { selected, productData: this.productData }, bubbles: true, composed: true }));
         }
         constructor() {
             super(...arguments);
@@ -381,4 +162,4 @@ let DeesShoppingProductcard = (() => {
     return DeesShoppingProductcard = _classThis;
 })();
 export { DeesShoppingProductcard };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1zaG9wcGluZy1wcm9kdWN0Y2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLXNpbXBsZS9kZWVzLXNob3BwaW5nLXByb2R1Y3RjYXJkL2RlZXMtc2hvcHBpbmctcHJvZHVjdGNhcmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxhQUFhLEVBQ2IsUUFBUSxFQUNSLElBQUksRUFDSixHQUFHLEVBQ0gsVUFBVSxFQUVWLFdBQVcsR0FDWixNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUMvRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUN0RCxPQUFPLDZDQUE2QyxDQUFDO0lBc0J4Qyx1QkFBdUI7NEJBRG5DLGFBQWEsQ0FBQywyQkFBMkIsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7O3VDQUFuQixTQUFRLFdBQVc7Ozs7dUNBSXJELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQ0FNMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dEQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7c0NBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQztvQ0FHM0IsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO1lBZDVCLHNMQUFTLFdBQVcsNkJBQVgsV0FBVyxpR0FHbEI7WUFHRiw2S0FBUyxRQUFRLDZCQUFSLFFBQVEsMkZBQWE7WUFHOUIsaU5BQVMsb0JBQW9CLDZCQUFwQixvQkFBb0IsbUhBQWlCO1lBRzlDLG1MQUFTLFVBQVUsNkJBQVYsVUFB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1zaG9wcGluZy1wcm9kdWN0Y2FyZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLXNpbXBsZS9kZWVzLXNob3BwaW5nLXByb2R1Y3RjYXJkL2RlZXMtc2hvcHBpbmctcHJvZHVjdGNhcmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsV0FBVyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUMvSCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDL0QsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDdEQsT0FBTyw4Q0FBOEMsQ0FBQztBQUN0RCxPQUFPLGdFQUFnRSxDQUFDO0FBQ3hFLE9BQU8sZ0ZBQWdGLENBQUM7SUFrQjNFLHVCQUF1Qjs0QkFEbkMsYUFBYSxDQUFDLDJCQUEyQixDQUFDOzs7O3NCQUNFLFdBQVc7Ozs7Ozs7Ozs7Ozs7Ozs7dUNBQW5CLFNBQVEsV0FBVzs7Ozt1Q0FHckQsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO29DQUMxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0RBQzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQztzQ0FDM0IsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDO29DQUMzQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7WUFKQSxzTEFBUyxXQUFXLDZCQUFYLFdBQVcsaUdBQW9EO1lBQ3hFLDZLQUFTLFFBQVEsNkJBQVIsUUFBUSwyRkFBSztZQUNyQixpTkFBUyxvQkFBb0Is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

package/dist_ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.d.ts

@@ -1,6 +1,9 @@
-import { DeesElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-button/dees-button/dees-button.js';
+import '../../00group-overlay/dees-speechbubble/dees-speechbubble.js';
 import type { DeesWorkspaceTerminal } from '../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js';
+import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'dees-simple-appdash': DeesSimpleAppDash;
@@ -26,31 +29,43 @@ export interface IGlobalMessage {
     icon?: string;
     actions?: IGlobalMessageAction[];
 }
+/** A compact app shell. Views, notices and the terminal share one bounded workspace. */
 export declare class DeesSimpleAppDash extends DeesElement {
     static demo: () => TemplateResult<1>;
     static demoGroups: string[];
     accessor name: string;
     accessor viewTabs: IView[];
     accessor terminalSetupCommand: string;
+    /** Consumer-owned runtime used by the embedded terminal. */
+    accessor executionEnvironment: IExecutionEnvironment | null;
     accessor globalMessages: IGlobalMessage[];
+    /** Collapse to an icon rail. Narrow containers use the rail automatically. */
+    accessor collapsed: boolean;
     accessor selectedView: IView;
     accessor _activeMessages: IGlobalMessage[];
-    static styles: CSSResult[];
+    private accessor compact;
+    private accessor terminalOpen;
+    currentTerminal: DeesWorkspaceTerminal | null;
+    private currentView?;
+    private terminalRequest;
+    constructor();
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private get rail();
+    private icon;
+    private isGroupActive;
+    private renderView;
     render(): TemplateResult;
-    firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
-    willUpdate(changedProperties: Map<string, unknown>): void;
-    updated(changedProperties: Map<string, unknown>): void;
-    private updateBannerOffset;
+    private handleNavigationKey;
+    willUpdate(changes: Map<string, unknown>): void;
+    updated(changes: Map<string, unknown>): void;
     private getMessageIcon;
     addMessage(message: Omit<IGlobalMessage, 'id'> & {
         id?: string;
     }): string;
     removeMessage(id: string): void;
     clearMessages(): void;
-    currentTerminal: DeesWorkspaceTerminal | null;
     launchTerminal(): Promise<DeesWorkspaceTerminal | undefined>;
     private closeTerminal;
-    private isGroupActive;
-    private currentView;
-    loadView(viewArg: IView): any;
+    disconnectedCallback(): Promise<void>;
+    loadView(view: IView): Promise<void>;
 }

package/dist_ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.d.ts

@@ -1,8 +1,7 @@
 import '../../00group-form/dees-form/dees-form.js';
-import '../../00group-input/dees-input-text/dees-input-text.js';
-import '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
-import '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
-import '../../00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
 import '../../00group-form/dees-form-submit/dees-form-submit.js';
+import '../../00group-input/dees-input-text/dees-input-text.js';
+import '../../00group-input/dees-input-toggle/dees-input-toggle.js';
 import '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
+import '../../00group-dataview/dees-table/dees-table.js';
 export declare const demoFunc: () => import("@design.estate/dees-element").TemplateResult<1>;