ds-one 0.2.5-alpha.17 → 0.2.5-alpha.19

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;CA0BP;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();
@@ -38,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-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);
-    }
-
-    .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/4-page/ds-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-container.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-container.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,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAiCX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}
+{"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

@@ -1,43 +1,11 @@
 // ds-container.ts
 // Container component with responsive width constraints
-import { LitElement, html, css } from "lit";
+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 = css `
-    :host {
-      display: flex;
-      width: 100%;
-      max-width: 100%;
-      flex-direction: column;
-      background-color: var(--background-color);
-      box-sizing: border-box;
-    }
-
-    /* Ensure children don't overflow */
-    :host ::slotted(*) {
-      max-width: 100%;
-      box-sizing: border-box;
-    }
-
-    /* Mobile: 100% width */
-    @media (max-width: 820px) {
-      :host {
-        width: 100%;
-        max-width: 100%;
-      }
-    }
-
-    /* Desktop: max-width 1000px, centered */
-    @media (min-width: 821px) {
-      :host {
-        max-width: 1000px;
-        margin-left: auto;
-        margin-right: auto;
-        width: 100%;
-      }
-    }
-  `;
+Container.styles = unsafeCSS(styles);
 customElements.define("ds-container", Container);

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;AAG5C,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,0BAsDX;IAEF,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"}
+{"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"}

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

@@ -1,7 +1,8 @@
 // ds-grid.ts
 // Simple grid layout component
-import { LitElement, html, css } from "lit";
+import { LitElement, html, unsafeCSS } from "lit";
 import { detectMobileDevice } from "../0-face/device";
+import styles from "./styles/ds-grid.css?inline";
 export class Grid extends LitElement {
     connectedCallback() {
         super.connectedCallback();
@@ -44,59 +45,5 @@ export class Grid extends LitElement {
 Grid.properties = {
     align: { type: String },
 };
-Grid.styles = css `
-    :host {
-      margin-top: 0.5px !important;
-      margin-left: 0.5px !important;
-      display: grid;
-      width: 1440px;
-      height: 1280px;
-      grid-template-columns: repeat(auto-fill, 19px);
-      grid-template-rows: repeat(auto-fill, 19px);
-      gap: 1px;
-      row-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      outline: calc(1px * var(--sf)) solid var(--yellow);
-      position: fixed;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-    }
-
-    /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
-    :host(.mobile) {
-      width: calc(100% - calc(1px * var(--sf)));
-      max-width: 100vw;
-      margin-left: 0.5px !important;
-      margin-top: 0 !important;
-      box-sizing: border-box;
-      position: fixed;
-      top: calc(0.5px * var(--sf));
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-      gap: calc(1px * var(--sf));
-      grid-template-columns: repeat(14, calc(19px * var(--sf)));
-      grid-template-rows: repeat(auto-fill, calc(19px * var(--sf)));
-    }
-
-    :host([align="left"]) {
-      left: 0;
-      transform: none;
-    }
-
-    :host([align="center"]) {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    :host([align="right"]) {
-      left: auto;
-      right: 0;
-      transform: none;
-    }
-  `;
+Grid.styles = unsafeCSS(styles);
 customElements.define("ds-grid", Grid);

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

@@ -20,7 +20,7 @@ export declare class Layout extends LitElement {
     mode: string;
     align?: string;
     view?: boolean;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.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,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,MAAM,0BA4NX;IAEF,MAAM;CAqEP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}
+{"version":3,"file":"ds-layout.d.ts","sourceRoot":"","sources":["../../DS1/4-page/ds-layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAGvD,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,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,UAAU;;;;;;;;;;MAIf;IAEF,IAAI,EAAE,MAAM,CAAe;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,MAAM,CAAC,MAAM,4BAsjBX;IAEF,MAAM;CAwMP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}