ds-one 0.2.5-alpha.8 → 0.3.0-alpha.1

package/dist/3-unit/ds-form.d.ts

@@ -0,0 +1,70 @@
+import { LitElement } from "lit";
+export interface FormData {
+    [key: string]: string | number | boolean | null;
+}
+export interface FormValidationResult {
+    valid: boolean;
+    errors: {
+        [key: string]: string;
+    };
+}
+export declare class Form extends LitElement {
+    static properties: {
+        action: {
+            type: StringConstructor;
+        };
+        method: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        novalidate: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        autocomplete: {
+            type: StringConstructor;
+        };
+        _isSubmitting: {
+            type: BooleanConstructor;
+            state: boolean;
+        };
+    };
+    action: string;
+    method: "get" | "post";
+    name: string;
+    novalidate: boolean;
+    autocomplete: "on" | "off";
+    _isSubmitting: boolean;
+    constructor();
+    static styles: import("lit").CSSResult;
+    /**
+     * Get all form data as an object
+     */
+    getFormData(): FormData;
+    private _collectFormData;
+    /**
+     * Validate the form
+     */
+    validate(): FormValidationResult;
+    private _validateElement;
+    /**
+     * Reset the form
+     */
+    reset(): void;
+    private _resetElement;
+    /**
+     * Submit the form
+     */
+    submit(): Promise<void>;
+    private _handleSubmit;
+    private _handleKeydown;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ds-form": Form;
+    }
+}
+//# sourceMappingURL=ds-form.d.ts.map

package/dist/3-unit/ds-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-form.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-form.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,MAAM,WAAW,QAAQ;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACnC;AAED,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;MAOf;IAEM,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,IAAI,GAAG,KAAK,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;;IAY/B,MAAM,CAAC,MAAM,0BAqBX;IAEF;;OAEG;IACH,WAAW,IAAI,QAAQ;IAYvB,OAAO,CAAC,gBAAgB;IA8BxB;;OAEG;IACH,QAAQ,IAAI,oBAAoB;IAoBhC,OAAO,CAAC,gBAAgB;IAmCxB;;OAEG;IACH,KAAK,IAAI,IAAI;IAWb,OAAO,CAAC,aAAa;IA0BrB;;OAEG;IACG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAsD7B,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,cAAc;IAWtB,MAAM;CAeP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/3-unit/ds-form.js

@@ -0,0 +1,232 @@
+// ds-form.ts
+// Form component for handling form submissions and validation
+import { LitElement, html, css } from "lit";
+export class Form extends LitElement {
+    constructor() {
+        super();
+        this.action = "";
+        this.method = "post";
+        this.name = "";
+        this.novalidate = false;
+        this.autocomplete = "on";
+        this._isSubmitting = false;
+    }
+    /**
+     * Get all form data as an object
+     */
+    getFormData() {
+        const data = {};
+        const slot = this.shadowRoot?.querySelector("slot");
+        const elements = slot?.assignedElements({ flatten: true }) || [];
+        for (const element of elements) {
+            this._collectFormData(element, data);
+        }
+        return data;
+    }
+    _collectFormData(element, data) {
+        // Check if element has name and value properties
+        const name = element.getAttribute("name") || element.name;
+        if (name) {
+            const value = element.value;
+            if (value !== undefined) {
+                // Handle checkboxes and radio buttons
+                if (element instanceof HTMLInputElement &&
+                    (element.type === "checkbox" || element.type === "radio")) {
+                    if (element.type === "checkbox") {
+                        data[name] = element.checked;
+                    }
+                    else if (element.type === "radio" && element.checked) {
+                        data[name] = value;
+                    }
+                }
+                else {
+                    data[name] = value;
+                }
+            }
+        }
+        // Recursively check children
+        const children = element.shadowRoot?.querySelectorAll("*") || element.querySelectorAll("*");
+        children.forEach((child) => {
+            this._collectFormData(child, data);
+        });
+    }
+    /**
+     * Validate the form
+     */
+    validate() {
+        const result = {
+            valid: true,
+            errors: {},
+        };
+        if (this.novalidate) {
+            return result;
+        }
+        const slot = this.shadowRoot?.querySelector("slot");
+        const elements = slot?.assignedElements({ flatten: true }) || [];
+        for (const element of elements) {
+            this._validateElement(element, result);
+        }
+        return result;
+    }
+    _validateElement(element, result) {
+        const name = element.getAttribute("name") || element.name;
+        // Check for custom validation on ds-input elements
+        if (element.tagName.toLowerCase() === "ds-input") {
+            const input = element;
+            if (input.required && !input.value) {
+                result.valid = false;
+                result.errors[name || "unknown"] = "This field is required";
+            }
+        }
+        // Check native form elements
+        if (element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement) {
+            if (!element.checkValidity()) {
+                result.valid = false;
+                result.errors[name || "unknown"] = element.validationMessage;
+            }
+        }
+        // Recursively check children
+        const children = element.shadowRoot?.querySelectorAll("*") || element.querySelectorAll("*");
+        children.forEach((child) => {
+            this._validateElement(child, result);
+        });
+    }
+    /**
+     * Reset the form
+     */
+    reset() {
+        const slot = this.shadowRoot?.querySelector("slot");
+        const elements = slot?.assignedElements({ flatten: true }) || [];
+        for (const element of elements) {
+            this._resetElement(element);
+        }
+        this.dispatchEvent(new CustomEvent("form-reset", { bubbles: true }));
+    }
+    _resetElement(element) {
+        if (element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement) {
+            if (element instanceof HTMLInputElement && element.type === "checkbox") {
+                element.checked = false;
+            }
+            else {
+                element.value = "";
+            }
+        }
+        // Handle ds-input elements
+        if (element.tagName.toLowerCase() === "ds-input") {
+            element.value = "";
+        }
+        // Recursively reset children
+        const children = element.shadowRoot?.querySelectorAll("*") || element.querySelectorAll("*");
+        children.forEach((child) => {
+            this._resetElement(child);
+        });
+    }
+    /**
+     * Submit the form
+     */
+    async submit() {
+        if (this._isSubmitting)
+            return;
+        const validationResult = this.validate();
+        if (!validationResult.valid) {
+            this.dispatchEvent(new CustomEvent("form-invalid", {
+                detail: validationResult.errors,
+                bubbles: true,
+            }));
+            return;
+        }
+        this._isSubmitting = true;
+        const formData = this.getFormData();
+        this.dispatchEvent(new CustomEvent("form-submit", {
+            detail: { data: formData },
+            bubbles: true,
+        }));
+        // If action is provided, submit to the server
+        if (this.action) {
+            try {
+                const response = await fetch(this.action, {
+                    method: this.method.toUpperCase(),
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(formData),
+                });
+                this.dispatchEvent(new CustomEvent("form-response", {
+                    detail: { response, data: formData },
+                    bubbles: true,
+                }));
+            }
+            catch (error) {
+                this.dispatchEvent(new CustomEvent("form-error", {
+                    detail: { error, data: formData },
+                    bubbles: true,
+                }));
+            }
+        }
+        this._isSubmitting = false;
+    }
+    _handleSubmit(e) {
+        e.preventDefault();
+        this.submit();
+    }
+    _handleKeydown(e) {
+        if (e.key === "Enter" && !e.shiftKey) {
+            const target = e.target;
+            // Don't submit if in a textarea
+            if (target.tagName.toLowerCase() !== "textarea") {
+                e.preventDefault();
+                this.submit();
+            }
+        }
+    }
+    render() {
+        return html `
+      <form
+        .action=${this.action}
+        .method=${this.method}
+        .name=${this.name}
+        ?novalidate=${this.novalidate}
+        autocomplete=${this.autocomplete}
+        @submit=${this._handleSubmit}
+        @keydown=${this._handleKeydown}
+      >
+        <slot></slot>
+      </form>
+    `;
+    }
+}
+Form.properties = {
+    action: { type: String },
+    method: { type: String },
+    name: { type: String },
+    novalidate: { type: Boolean, reflect: true },
+    autocomplete: { type: String },
+    _isSubmitting: { type: Boolean, state: true },
+};
+Form.styles = css `
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--05) * var(--sf, 1));
+      width: 100%;
+    }
+
+    ::slotted(*) {
+      width: 100%;
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  `;
+customElements.define("ds-form", Form);

package/dist/3-unit/ds-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-list.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-list.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,MAAM,0BAOX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-list.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-list.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/3-unit/ds-list.js

@@ -1,18 +1,12 @@
-// ds-banner.ts
+// ds-list.ts
 // Unit component that
-// can be used to show a list of items consiting of compoentnts from core
-import { LitElement, html, css } from "lit";
+// can be used to show a list of items consisting of components from core
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-list.css?inline";
 export class List extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
 }
-List.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      width: 100%;
-    }
-  `;
+List.styles = unsafeCSS(styles);
 customElements.define("ds-list", List);

package/dist/3-unit/ds-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-row.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;;;;;MAEf;IAEM,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC;;IAOlC,MAAM,CAAC,MAAM,0BAiBX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,GAAG,CAAC;KACf;CACF"}
+{"version":3,"file":"ds-row.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,GAAI,SAAQ,UAAU;IACjC,MAAM,CAAC,UAAU;;;;;MAEf;IAEM,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC;;IAOlC,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,GAAG,CAAC;KACf;CACF"}

package/dist/3-unit/ds-row.js

@@ -1,4 +1,5 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-row.css?inline";
 export class Row extends LitElement {
     constructor() {
         super();
@@ -11,22 +12,5 @@ export class Row extends LitElement {
 Row.properties = {
     type: { type: String, reflect: true },
 };
-Row.styles = css `
-    :host {
-      display: flex;
-      align-items: end;
-      width: calc(240px * var(--sf));
-    }
-
-    :host([type="fill"]) {
-      justify-content: space-between;
-      height: calc(var(--1) * var(--sf));
-    }
-
-    :host([type="centered"]) {
-      justify-content: center;
-      height: calc(var(--1) * var(--sf));
-      gap: calc(var(--025) * var(--sf));
-    }
-  `;
+Row.styles = unsafeCSS(styles);
 customElements.define("ds-row", Row);

package/dist/3-unit/ds-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-table.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-table.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;MAIf;IAEM,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;;IAS5B,MAAM,CAAC,MAAM,0BAmFX;IAEF,MAAM;CA2BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-table.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-table.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,MAAM,WAAW,QAAQ;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;MAIf;IAEM,IAAI,EAAE,QAAQ,EAAE,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;;IAS5B,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CA0BP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/3-unit/ds-table.js

@@ -1,6 +1,7 @@
 // ds-table.ts
 // Data table component
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-table.css?inline";
 export class DsTable extends LitElement {
     constructor() {
         super();
@@ -12,7 +13,6 @@ export class DsTable extends LitElement {
         return html `
       <div class="table-container">
         <div class="table-header">
-        
           <div class="header-cell product-cell">Product</div>
           <div class="header-cell users-cell">Users</div>
           <div class="header-cell retention-cell">Retention</div>
@@ -39,88 +39,5 @@ DsTable.properties = {
     columns: { type: Array },
     showStatus: { type: Boolean, attribute: "show-status" },
 };
-DsTable.styles = css `
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .table-container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-
-    .table-header {
-      display: grid;
-      grid-template-columns: 160px 80px 80px 80px;
-      height: 20px;
-      width: 400px;
-    }
-
-    .table-body {
-      display: grid;
-      grid-template-columns: 160px 80px 80px 80px;
-      border: 1px solid var(--black);
-      width: 400px;
-    }
-
-    .header-cell {
-      height: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: left;
-      padding:  0 2px;
-      font-family: var(--typeface);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: var(--type-lineheight-default);
-      color: var(--black);
-      letter-spacing: -0.26px;
-    }
-
-    .data-cell {
-      height: 20px;
-      margin-top: -1px;
-      display: flex;
-      align-items: center;
-      justify-content: left;
-    
-      outline: 1px solid var(--black);
-
-      font-family: var(--typeface);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: var(--type-lineheight-default);
-      color: var(--black);
-      letter-spacing: -0.26px;
-    }
-
-    .status-cell {
-      background-color: var(--light-green);
-    }
-
-    .product-cell {
-      text-align: left;
-      justify-content: flex-start;
-    }
-
-    .users-cell,
-    .retention-cell {
-      text-align: center;
-    }
-
-    .status-cell {
-      text-align: center;
-    }
-
-    /* Responsive adjustments */
-    @media (max-width: 480px) {
-      .table-header,
-      .table-body {
-        width: 100%;
-        grid-template-columns: 1fr 60px 60px 60px;
-      }
-    }
-  `;
+DsTable.styles = unsafeCSS(styles);
 customElements.define("ds-table", DsTable);

package/dist/3-unit/styles/ds-accordion.css

@@ -0,0 +1,46 @@
+/* ds-accordion.css */
+/* Accordion component styles using native <details>/<summary> */
+
+:host {
+  display: block;
+  width: calc(240px * var(--sf));
+  color: var(--text-color-primary);
+}
+
+details {
+  width: 100%;
+}
+
+summary {
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+  outline: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+.summaryRow {
+  width: 100%;
+}
+
+ds-icon.chevron {
+  transform: rotate(0deg);
+  transition: transform 140ms ease;
+}
+
+details[open] ds-icon.chevron {
+  transform: rotate(180deg);
+}
+
+.detailsBody {
+  padding-top: calc(var(--half) * var(--sf));
+}
+
+.detailsText {
+  display: block;
+  white-space: normal;
+  text-align: left;
+}

package/dist/3-unit/styles/ds-list.css

@@ -0,0 +1,9 @@
+/* ds-list.css */
+/* List component styles for displaying a list of items */
+
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+}

package/dist/3-unit/styles/ds-row.css

@@ -0,0 +1,19 @@
+/* ds-row.css */
+/* Row component styles */
+
+:host {
+  display: flex;
+  align-items: end;
+  width: calc(240px * var(--sf));
+}
+
+:host([type="fill"]) {
+  justify-content: space-between;
+  height: calc(var(--1) * var(--sf));
+}
+
+:host([type="centered"]) {
+  justify-content: center;
+  height: calc(var(--1) * var(--sf));
+  gap: calc(var(--025) * var(--sf));
+}

package/dist/3-unit/styles/ds-table.css

@@ -0,0 +1,80 @@
+/* ds-table.css */
+/* Data table component styles */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.table-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 160px 80px 80px 80px;
+  height: 20px;
+  width: 400px;
+}
+
+.table-body {
+  display: grid;
+  grid-template-columns: 160px 80px 80px 80px;
+  border: 1px solid var(--black);
+  width: 400px;
+}
+
+.header-cell {
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  padding: 0 2px;
+  font-family: var(--typeface-regular);
+  font-size: var(--type-size-default);
+  font-weight: var(--type-weight-default);
+  line-height: var(--type-lineheight-default);
+  color: var(--black);
+  letter-spacing: -0.26px;
+}
+
+.data-cell {
+  height: 20px;
+  margin-top: -1px;
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  outline: 1px solid var(--black);
+  font-family: var(--typeface-regular);
+  font-size: var(--type-size-default);
+  font-weight: var(--type-weight-default);
+  line-height: var(--type-lineheight-default);
+  color: var(--black);
+  letter-spacing: -0.26px;
+}
+
+.status-cell {
+  background-color: var(--apple-green);
+  text-align: center;
+}
+
+.product-cell {
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.users-cell,
+.retention-cell {
+  text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .table-header,
+  .table-body {
+    width: 100%;
+    grid-template-columns: 1fr 60px 60px 60px;
+  }
+}

package/dist/{3-unit/row-v1.d.ts → 4-page/ds-container.d.ts}

@@ -5,21 +5,13 @@ declare global {
     }
     var customElements: CustomElementRegistry;
 }
-export declare class Row extends LitElement {
-    static properties: {
-        type: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    type: "fill" | "centered";
-    constructor();
+export declare class Container extends LitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "row-v1": Row;
+        "ds-container": Container;
     }
 }
-//# sourceMappingURL=row-v1.d.ts.map
+//# sourceMappingURL=ds-container.d.ts.map

package/dist/4-page/ds-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,UAAU,GAAG,IAAI,CAAC;KAC5D;IACD,IAAI,cAAc,EAAE,qBAAqB,CAAC;CAC3C;AAED,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAAqB;IAElC,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/4-page/ds-container.js

@@ -0,0 +1,11 @@
+// ds-container.ts
+// Container component with responsive width constraints
+import { LitElement, html, unsafeCSS } from "lit";
+import styles from "./styles/ds-container.css?inline";
+export class Container extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+Container.styles = unsafeCSS(styles);
+customElements.define("ds-container", Container);