ds-one 0.2.0-alpha.2 → 0.2.5-alpha.1

package/dist/index.d.ts

@@ -1,35 +1,25 @@
-import "./0-face/2025-04-23-device";
-import "./utils/cdn-loader";
+/**
+ * DS one - Main entry point for all components
+ *
+ * This module initializes core utilities and exports all design system components
+ * organized by layer: 0-face (foundation), 2-core (components), 3-unit (composites), 4-page (layouts)
+ */
+import "./0-face/device";
+import "./0-face/i18n";
+export * from "./0-face/device";
+export * from "./0-face/i18n";
+export * from "./0-face/preferences";
+export * from "./0-face/pricing";
+export * from "./0-face/theme";
 export * from "./2-core/ds-button";
-export * from "./2-core/ds-text";
-export * from "./2-core/ds-icon";
-export * from "./2-core/ds-link";
 export * from "./2-core/ds-cycle";
+export * from "./2-core/ds-icon";
+export * from "./2-core/ds-text";
 export * from "./2-core/ds-tooltip";
-export * from "./2-core/ds-price";
-export * from "./2-core/ds-markdown";
-export * from "./2-core/ds-home";
-export * from "./2-core/ds-year";
-export * from "./2-core/ds-title";
-export * from "./2-core/ds-header";
-export * from "./2-core/ds-attributes";
-export * from "./2-core/ds-downloadcv";
-export * from "./2-core/ds-article";
-export * from "./2-core/ds-viewtoggle";
-export * from "./2-core/ds-squarecircle";
+export * from "./2-core/ds-date";
 export * from "./3-unit/ds-list";
-export * from "./3-unit/ds-panel";
 export * from "./3-unit/ds-row";
-export * from "./3-unit/ds-singlenav";
-export * from "./3-unit/ds-doublenav";
 export * from "./3-unit/ds-table";
 export * from "./4-page/ds-grid";
 export * from "./4-page/ds-layout";
-export * from "./utils/language";
-export * from "./utils/theme";
-export * from "./utils/viewMode";
-export * from "./utils/settings";
-export * from "./utils/pricing";
-export * from "./utils/scroll";
-export * from "./0-face/2025-04-23-device";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../DS1/index.ts"],"names":[],"mappings":"AAIA,OAAO,4BAA4B,CAAC;AAGpC,OAAO,oBAAoB,CAAC;AAG5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../DS1/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,iBAAiB,CAAC;AAGzB,OAAO,eAAe,CAAC;AAMvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAM/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AAMjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAMlC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC"}

package/dist/index.js

@@ -1,43 +1,41 @@
-// DS one - Main entry point for all components
-// Export all components for easy importing
+/**
+ * DS one - Main entry point for all components
+ *
+ * This module initializes core utilities and exports all design system components
+ * organized by layer: 0-face (foundation), 2-core (components), 3-unit (composites), 4-page (layouts)
+ */
+// ============================================================================
+// Initialization (side-effect imports)
+// ============================================================================
 // Initialize device detection (will auto-detect and log on load)
-import "./0-face/2025-04-23-device";
-// Initialize CDN loader (will auto-load external translations if available)
-import "./utils/cdn-loader";
-// Core components
+import "./0-face/device";
+// Initialize language utilities (will auto-load external translations if available)
+import "./0-face/i18n";
+// ============================================================================
+// 0-face: Foundation & Utilities
+// ============================================================================
+export * from "./0-face/device";
+export * from "./0-face/i18n";
+export * from "./0-face/preferences";
+export * from "./0-face/pricing";
+export * from "./0-face/theme";
+// ============================================================================
+// 2-core: Core Components
+// ============================================================================
 export * from "./2-core/ds-button";
-export * from "./2-core/ds-text";
-export * from "./2-core/ds-icon";
-export * from "./2-core/ds-link";
 export * from "./2-core/ds-cycle";
+export * from "./2-core/ds-icon";
+export * from "./2-core/ds-text";
 export * from "./2-core/ds-tooltip";
-export * from "./2-core/ds-price";
-export * from "./2-core/ds-markdown";
-export * from "./2-core/ds-home";
-export * from "./2-core/ds-year";
-export * from "./2-core/ds-title";
-export * from "./2-core/ds-header";
-export * from "./2-core/ds-attributes";
-export * from "./2-core/ds-downloadcv";
-export * from "./2-core/ds-article";
-export * from "./2-core/ds-viewtoggle";
-export * from "./2-core/ds-squarecircle";
-// Unit components
+export * from "./2-core/ds-date";
+// ============================================================================
+// 3-unit: Composite Components
+// ============================================================================
 export * from "./3-unit/ds-list";
-export * from "./3-unit/ds-panel";
 export * from "./3-unit/ds-row";
-export * from "./3-unit/ds-singlenav";
-export * from "./3-unit/ds-doublenav";
 export * from "./3-unit/ds-table";
-// Page components
+// ============================================================================
+// 4-page: Layout Components
+// ============================================================================
 export * from "./4-page/ds-grid";
 export * from "./4-page/ds-layout";
-// Utilities
-export * from "./utils/language";
-export * from "./utils/theme";
-export * from "./utils/viewMode";
-export * from "./utils/settings";
-export * from "./utils/pricing";
-export * from "./utils/scroll";
-// Device detection
-export * from "./0-face/2025-04-23-device";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ds-one",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.5-alpha.1",
   "description": "A component-based design system built with TypeScript and LitElement that provides reusable UI components with built-in theming, internationalization, and accessibility features.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -40,7 +40,7 @@
     "lint:fix": "eslint . --ext .ts,.js --fix",
     "format": "prettier --write .",
     "test": "bun test",
-    "clean": "rm -rf node_modules web/node_modules",
+    "clean": "rm -rf node_modules web/node_modules dist",
     "release:patch": "bun run scripts/release.ts patch",
     "release:minor": "bun run scripts/release.ts minor",
     "release:major": "bun run scripts/release.ts major",

package/DS1/0-face/2025-04-23-language.ts

@@ -1,4 +0,0 @@
-// 2025-04-23-language.ts
-// Language detection and internationalization utilities
-
-// TODO: Implement language detection utilities 

package/DS1/2-core/ds-article.ts

@@ -1,454 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { getText } from "../utils/language";
-import { getViewMode } from "../utils/viewMode";
-
-/**
- * A component for displaying article content with image/text toggle
- *
- * @element ds-article
- */
-export class Article extends LitElement {
-  static get properties() {
-    return {
-      imgLightDesktop: {
-        type: String,
-        reflect: true,
-        attribute: "img-light-desktop",
-      },
-      imgDarkDesktop: {
-        type: String,
-        reflect: true,
-        attribute: "img-dark-desktop",
-      },
-      imgLightMobile: {
-        type: String,
-        reflect: true,
-        attribute: "img-light-mobile",
-      },
-      imgDarkMobile: {
-        type: String,
-        reflect: true,
-        attribute: "img-dark-mobile",
-      },
-      src: { type: String, reflect: true },
-      alt: { type: String, reflect: true },
-      imageToggle: { type: Boolean, reflect: true, attribute: "image-toggle" },
-      imageOnlyWidth: {
-        type: Number,
-        reflect: true,
-        attribute: "image-only-width",
-      },
-      priority: { type: Boolean, reflect: true },
-      externalToggle: {
-        type: Boolean,
-        reflect: true,
-        attribute: "external-toggle",
-      },
-      mobileKey: { type: String, reflect: true, attribute: "mobile-key" },
-      desktopKey: { type: String, reflect: true, attribute: "desktop-key" },
-      textKey: { type: String, reflect: true, attribute: "text-key" },
-      defaultValue: { type: String, reflect: true, attribute: "default-value" },
-      _text: { type: String, state: true },
-      _currentImage: { type: String, state: true },
-      _imageVisible: { type: Boolean, state: true },
-      _shouldAnimate: { type: Boolean, state: true },
-    };
-  }
-
-  declare imgLightDesktop: string;
-  declare imgDarkDesktop: string;
-  declare imgLightMobile: string;
-  declare imgDarkMobile: string;
-  declare src: string;
-  declare alt: string;
-  declare imageToggle: boolean;
-  declare imageOnlyWidth: number;
-  declare priority: boolean;
-  declare externalToggle: boolean;
-  declare mobileKey: string;
-  declare desktopKey: string;
-  declare textKey: string;
-  declare defaultValue: string;
-  declare _text: string;
-  declare _currentImage: string;
-  declare _imageVisible: boolean;
-  declare _shouldAnimate: boolean;
-
-  private _mql: MediaQueryList | null;
-  private boundHandlers: {
-    languageChanged: EventListener;
-    themeChanged: EventListener;
-    viewportChanged?: (e: MediaQueryListEvent) => void;
-    viewModeChanged: EventListener;
-  };
-
-  constructor() {
-    super();
-    this.imgLightDesktop = "";
-    this.imgDarkDesktop = "";
-    this.imgLightMobile = "";
-    this.imgDarkMobile = "";
-    this.src = "";
-    this.alt = "";
-    this.imageToggle = false;
-    this.imageOnlyWidth = 480;
-    this.priority = false;
-    this.externalToggle = false;
-    this.mobileKey = "";
-    this.desktopKey = "";
-    this.textKey = "";
-    this.defaultValue = "";
-    this._text = "";
-    this._currentImage = "";
-    this._imageVisible = true;
-    this._shouldAnimate = false;
-    this._mql = null;
-
-    this.boundHandlers = {
-      languageChanged: (() => {
-        this._loadText();
-      }) as EventListener,
-      themeChanged: (() => {
-        this._resolveImage();
-      }) as EventListener,
-      viewportChanged: (e: MediaQueryListEvent) => {
-        this._resolveImage();
-        this._loadText();
-      },
-      viewModeChanged: ((e: CustomEvent) => {
-        if (this.imageToggle && this.externalToggle) {
-          const newMode = e.detail;
-          const shouldShowImage = newMode === "image";
-          if (this._imageVisible !== shouldShowImage) {
-            this._shouldAnimate = true;
-            this._imageVisible = shouldShowImage;
-            this.requestUpdate();
-          }
-        }
-      }) as EventListener,
-    };
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      font-family: var(--typeface);
-      overflow-wrap: break-word;
-      word-wrap: break-word;
-      word-break: break-word;
-      hyphens: auto;
-      color: light-dark(var(--black), var(--white));
-      line-height: calc(20px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
-    }
-
-    .container {
-      position: relative;
-      width: min(100%, var(--image-only-width));
-    }
-
-    figure.media,
-    .copy {
-      margin: 0;
-      width: 100%;
-      overflow: hidden;
-      display: block;
-      margin-bottom: calc(8px * var(--scaling-factor));
-    }
-
-    .fade-in {
-      animation: fade-in 0.25s ease;
-    }
-
-    @keyframes fade-in {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-
-    img {
-      display: block;
-      width: 100%;
-      height: auto;
-      opacity: 0;
-      transition: opacity 0.2s ease-in-out;
-    }
-
-    img.loaded {
-      opacity: 1;
-    }
-
-    .toggle-button {
-      background: none;
-      border: none;
-      color: inherit;
-      cursor: pointer;
-      font-family: var(--typeface);
-      font-size: calc(14px * var(--scaling-factor));
-      margin-bottom: calc(8px * var(--scaling-factor));
-      padding: 0;
-      text-decoration: underline;
-    }
-
-    .toggle-button:hover {
-      opacity: 0.7;
-    }
-  `;
-
-  updated(changed: Map<string, unknown>) {
-    if (changed.has("imageOnlyWidth")) {
-      const opx = Number(this.imageOnlyWidth) || 480;
-      this.style.setProperty("--image-only-width", `${opx}px`);
-    }
-    if (
-      changed.has("imgLightDesktop") ||
-      changed.has("imgDarkDesktop") ||
-      changed.has("imgLightMobile") ||
-      changed.has("imgDarkMobile") ||
-      changed.has("src")
-    ) {
-      this._resolveImage();
-    }
-    if (
-      changed.has("textKey") ||
-      changed.has("defaultValue") ||
-      changed.has("mobileKey") ||
-      changed.has("desktopKey")
-    ) {
-      this._loadText();
-    }
-    if (changed.has("imageToggle")) {
-      const isExternallyControlled = this.imageToggle && this.externalToggle;
-      if (!isExternallyControlled) {
-        const newImageVisible = !this.imageToggle;
-        if (this._imageVisible !== newImageVisible) {
-          this._shouldAnimate = true;
-          this._imageVisible = newImageVisible;
-        }
-      }
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this._loadText();
-    this._resolveImage();
-
-    if (this.imageToggle && this.externalToggle) {
-      const currentMode = getViewMode();
-      this._imageVisible = currentMode === "image";
-    } else {
-      this._imageVisible = !this.imageToggle;
-    }
-
-    this.style.setProperty("--image-only-width", `${this.imageOnlyWidth}px`);
-
-    try {
-      this._mql = window.matchMedia("(max-width: 720px)");
-      if (this._mql && this.boundHandlers.viewportChanged) {
-        this._mql.addEventListener(
-          "change",
-          this.boundHandlers.viewportChanged
-        );
-      }
-    } catch (err) {
-      // no-op
-    }
-
-    window.addEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-    window.addEventListener("theme-changed", this.boundHandlers.themeChanged);
-
-    if (this.imageToggle && this.externalToggle) {
-      window.addEventListener(
-        "view-mode-changed",
-        this.boundHandlers.viewModeChanged
-      );
-
-      setTimeout(() => {
-        const currentMode = getViewMode();
-        const shouldShowImage = currentMode === "image";
-        if (this._imageVisible !== shouldShowImage) {
-          this._shouldAnimate = true;
-          this._imageVisible = shouldShowImage;
-          this.requestUpdate();
-        }
-      }, 100);
-    } else if (this.imageToggle) {
-      window.addEventListener(
-        "article-toggle",
-        this._toggleImage as EventListener
-      );
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener(
-      "language-changed",
-      this.boundHandlers.languageChanged
-    );
-    window.removeEventListener(
-      "theme-changed",
-      this.boundHandlers.themeChanged
-    );
-    window.removeEventListener(
-      "article-toggle",
-      this._toggleImage as EventListener
-    );
-    window.removeEventListener(
-      "view-mode-changed",
-      this.boundHandlers.viewModeChanged
-    );
-
-    if (this._mql && this.boundHandlers.viewportChanged) {
-      try {
-        this._mql.removeEventListener(
-          "change",
-          this.boundHandlers.viewportChanged
-        );
-      } catch (err) {
-        // no-op
-      }
-    }
-  }
-
-  private _loadText() {
-    const isMobile = (() => {
-      try {
-        return (
-          window.matchMedia && window.matchMedia("(max-width: 720px)").matches
-        );
-      } catch (err) {
-        return false;
-      }
-    })();
-
-    const selectedKey = (() => {
-      const mobile = (this.mobileKey || "").trim();
-      const desktop = (this.desktopKey || "").trim();
-      const base = (this.textKey || "").trim();
-      if (mobile || desktop) {
-        return isMobile ? mobile || base : desktop || base;
-      }
-      return base;
-    })();
-
-    if (!selectedKey) {
-      this._text = this.defaultValue || "";
-      return;
-    }
-
-    try {
-      const text = getText(selectedKey);
-      this._text = text || this.defaultValue || selectedKey;
-    } catch (error) {
-      console.error(
-        `[ds-article] Error loading text for key "${selectedKey}":`,
-        error
-      );
-      this._text = this.defaultValue || selectedKey;
-    }
-  }
-
-  private _resolveImage() {
-    if (this.src && typeof this.src === "string") {
-      const direct = this.src.startsWith("@") ? this.src.slice(1) : this.src;
-      this._currentImage = direct;
-      return;
-    }
-
-    const theme =
-      document.documentElement.getAttribute("data-theme") || "light";
-    const isMobile = (() => {
-      try {
-        return (
-          window.matchMedia && window.matchMedia("(max-width: 720px)").matches
-        );
-      } catch (err) {
-        return false;
-      }
-    })();
-
-    let chosen = "";
-    if (isMobile) {
-      if (theme === "dark") {
-        chosen = this.imgDarkMobile || this.imgLightMobile;
-      } else {
-        chosen = this.imgLightMobile || this.imgDarkMobile;
-      }
-    } else {
-      if (theme === "dark") {
-        chosen = this.imgDarkDesktop || this.imgLightDesktop;
-      } else {
-        chosen = this.imgLightDesktop || this.imgDarkDesktop;
-      }
-    }
-
-    if (typeof chosen === "string" && chosen.startsWith("@")) {
-      chosen = chosen.slice(1);
-    }
-    this._currentImage = chosen || "";
-  }
-
-  private _toggleImage = () => {
-    this._shouldAnimate = true;
-    this._imageVisible = !this._imageVisible;
-    this.requestUpdate();
-  };
-
-  private _handleImageLoad = (e: Event) => {
-    const img = e.target as HTMLImageElement;
-    img.classList.add("loaded");
-  };
-
-  render() {
-    const showImage =
-      (this.imageToggle ? this._imageVisible : true) && !!this._currentImage;
-    const animationClass = this._shouldAnimate ? "fade-in" : "";
-
-    if (this._shouldAnimate) {
-      this._shouldAnimate = false;
-    }
-
-    const buttonText = this._imageVisible
-      ? getText("hideImage")
-      : getText("viewImage");
-
-    return html`
-      <div class="container">
-        ${this.imageToggle && !this.externalToggle
-          ? html`<button @click="${this._toggleImage}" class="toggle-button">
-              ${buttonText}
-            </button>`
-          : ""}
-        ${showImage
-          ? html`<figure class="media ${animationClass}">
-              <img
-                src="${this._currentImage}"
-                alt="${this.alt || ""}"
-                loading="${this.priority ? "eager" : "lazy"}"
-                fetchpriority="${this.priority ? "high" : "auto"}"
-                decoding="async"
-                @load="${this._handleImageLoad}"
-              />
-            </figure>`
-          : html`<p class="copy ${animationClass}">${this._text}</p>`}
-      </div>
-    `;
-  }
-}
-
-customElements.define("ds-article", Article);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ds-article": Article;
-  }
-}
-