ds-one 0.2.5-alpha.9 → 0.3.0-alpha.2

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

@@ -0,0 +1,75 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import "../2-core/ds-text";
+import "../2-core/ds-icon";
+import "./ds-row";
+import styles from "./styles/ds-accordion.css?inline";
+/**
+ * Native accordion using <details>/<summary> (no JS toggle logic).
+ *
+ * Usage (with translation text):
+ * <ds-accordion summary="How it began" details="Designed in Hokkaido"></ds-accordion>
+ *
+ * Usage (with slotted details content):
+ * <ds-accordion summary="How it began">
+ *   <div slot="details">Rich HTML content here</div>
+ * </ds-accordion>
+ */
+export class Accordion extends LitElement {
+    constructor() {
+        super();
+        this.summary = "";
+        this.details = "";
+        this.open = false;
+        this._hasSlottedContent = false;
+    }
+    _handleSlotChange(e) {
+        const slot = e.target;
+        const assignedNodes = slot.assignedNodes({ flatten: true });
+        // Filter out empty text nodes (whitespace only)
+        const hasContent = assignedNodes.some((node) => node.nodeType === Node.ELEMENT_NODE ||
+            (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+        this._hasSlottedContent = hasContent;
+    }
+    render() {
+        return html `
+      <details ?open=${this.open}>
+        <summary>
+          <ds-row class="summaryRow" type="centered">
+            <ds-text .text=${this.summary}></ds-text>
+            <ds-icon class="chevron" aria-hidden="true">
+              <svg
+                viewBox="0 0 10.157 8.219"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+                focusable="false"
+              >
+                <path
+                  d="M5.078 8.219L0 3.141L1.414 1.727L5.078 5.391L8.743 1.727L10.157 3.141L5.078 8.219Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </ds-icon>
+          </ds-row>
+        </summary>
+
+        <div class="detailsBody">
+          <slot name="details" @slotchange=${this._handleSlotChange}></slot>
+          ${!this._hasSlottedContent
+            ? html `<ds-text
+                class="detailsText"
+                .text=${this.details}
+              ></ds-text>`
+            : ""}
+        </div>
+      </details>
+    `;
+    }
+}
+Accordion.properties = {
+    summary: { type: String },
+    details: { type: String },
+    open: { type: Boolean, reflect: true },
+    _hasSlottedContent: { type: Boolean, state: true },
+};
+Accordion.styles = unsafeCSS(styles);
+customElements.define("ds-accordion", Accordion);

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/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);

package/dist/4-page/ds-grid.d.ts

@@ -12,7 +12,12 @@ export declare class Grid extends LitElement {
         };
     };
     align?: string;
+    private resizeObserver?;
+    private resizeTimeout?;
     static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateMobileClass;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,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,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM,CAAC,MAAM,0BAsDX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-grid.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-grid.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,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,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU;;;;MAEf;IAEF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,cAAc,CAAC,CAAa;IACpC,OAAO,CAAC,aAAa,CAAC,CAAM;IAE5B,MAAM,CAAC,MAAM,0BAAqB;IAElC,iBAAiB;IAgBjB,oBAAoB;IAUpB,OAAO,CAAC,iBAAiB;IAWzB,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}