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

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.2.0-alpha.1 */
+/* version 0.2.0-alpha.2 */
 
 input {
   padding: 0;

package/DS1/2-core/{article-v1.ts → ds-article.ts}

@@ -5,7 +5,7 @@ import { getViewMode } from "../utils/viewMode";
 /**
  * A component for displaying article content with image/text toggle
  *
- * @element article-v1
+ * @element ds-article
  */
 export class Article extends LitElement {
   static get properties() {
@@ -349,7 +349,7 @@ export class Article extends LitElement {
       this._text = text || this.defaultValue || selectedKey;
     } catch (error) {
       console.error(
-        `[article-v1] Error loading text for key "${selectedKey}":`,
+        `[ds-article] Error loading text for key "${selectedKey}":`,
         error
       );
       this._text = this.defaultValue || selectedKey;
@@ -444,10 +444,11 @@ export class Article extends LitElement {
   }
 }
 
-customElements.define("article-v1", Article);
+customElements.define("ds-article", Article);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "article-v1": Article;
+    "ds-article": Article;
   }
 }
+

package/DS1/2-core/{attributes-v1.ts → ds-attributes.ts}

@@ -4,7 +4,7 @@ import { getText } from "../utils/language";
 /**
  * A component for displaying project/work attributes (year, category, status)
  *
- * @element attributes-v1
+ * @element ds-attributes
  * @prop {string} year - Year key for translation
  * @prop {string} category - Category key for translation
  * @prop {string} status - Status key for translation
@@ -145,10 +145,11 @@ export class Attributes extends LitElement {
   }
 }
 
-customElements.define("attributes-v1", Attributes);
+customElements.define("ds-attributes", Attributes);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "attributes-v1": Attributes;
+    "ds-attributes": Attributes;
   }
 }
+

package/DS1/2-core/{cycle-v1.ts → ds-cycle.ts}

@@ -11,7 +11,7 @@ import { currentTheme, setTheme } from "../utils/theme";
 import type { ThemeType } from "../utils/theme";
 import { saveSettings } from "../utils/settings";
 import "./ds-button";
-import "./icon-v1";
+import "./ds-icon";
 
 // Accent color utilities
 const saveAccentColor = (color: string) => {
@@ -523,9 +523,9 @@ export class Cycle extends LitElement {
     } else if (this.type === "icon-only") {
       // Return SVG icon for icon-only type (note/page icons)
       if (value === "note") {
-        return html`<icon-v1 type="note"></icon-v1>`;
+        return html`<ds-icon type="note"></ds-icon>`;
       } else if (value === "page") {
-        return html`<icon-v1 type="page"></icon-v1>`;
+        return html`<ds-icon type="page"></ds-icon>`;
       }
       return html`<span>${value}</span>`;
     }
@@ -560,15 +560,15 @@ export class Cycle extends LitElement {
 
   getNotesStyleIcon(style: string) {
     if (style === "page") {
-      return html`<icon-v1 type="page"></icon-v1>`;
+      return html`<ds-icon type="page"></ds-icon>`;
     } else if (style === "note") {
-      return html`<icon-v1 type="note"></icon-v1>`;
+      return html`<ds-icon type="note"></ds-icon>`;
     } else if (style === "default") {
-      return html`<icon-v1 type="default"></icon-v1>`;
+      return html`<ds-icon type="default"></ds-icon>`;
     } else if (style === "big") {
-      return html`<icon-v1 type="big"></icon-v1>`;
+      return html`<ds-icon type="big"></ds-icon>`;
     } else if (style === "gallery") {
-      return html`<icon-v1 type="gallery"></icon-v1>`;
+      return html`<ds-icon type="gallery"></ds-icon>`;
     }
     return html`<span>${style}</span>`;
   }
@@ -729,10 +729,11 @@ export class Cycle extends LitElement {
   }
 }
 
-customElements.define("cycle-v1", Cycle);
+customElements.define("ds-cycle", Cycle);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "cycle-v1": Cycle;
+    "ds-cycle": Cycle;
   }
 }
+

package/DS1/2-core/{downloadcv-v1.ts → ds-downloadcv.ts}

@@ -4,7 +4,7 @@ import { currentLanguage, translate } from "../utils/language";
 /**
  * Download CV button that resolves language-specific URLs
  *
- * @element downloadcv-v1
+ * @element ds-downloadcv
  * @prop {string} urlEn - URL for English CV
  * @prop {string} urlDa - URL for Danish CV
  * @prop {string} urlJa - URL for Japanese CV
@@ -75,17 +75,17 @@ export class DownloadCV extends LitElement {
 
   private async _download() {
     if (!this._activeUrl) {
-      console.warn("[downloadcv-v1] No URL available");
+      console.warn("[ds-downloadcv] No URL available");
       return;
     }
 
-    console.log("[downloadcv-v1] Attempting download from:", this._activeUrl);
+    console.log("[ds-downloadcv] Attempting download from:", this._activeUrl);
 
     try {
       // Prefer blob download (reliable filename, works cross-origin with CORS)
       const res = await fetch(this._activeUrl, { mode: "cors" });
       console.log(
-        "[downloadcv-v1] Fetch response:",
+        "[ds-downloadcv] Fetch response:",
         res.status,
         res.statusText
       );
@@ -105,9 +105,9 @@ export class DownloadCV extends LitElement {
       a.click();
       a.remove();
       URL.revokeObjectURL(url);
-      console.log("[downloadcv-v1] Download triggered successfully");
+      console.log("[ds-downloadcv] Download triggered successfully");
     } catch (err) {
-      console.error("[downloadcv-v1] Fetch failed, using fallback:", err);
+      console.error("[ds-downloadcv] Fetch failed, using fallback:", err);
       // Fallback: open the file directly
       window.open(this._activeUrl, "_blank", "noopener,noreferrer");
     }
@@ -136,10 +136,11 @@ export class DownloadCV extends LitElement {
   }
 }
 
-customElements.define("downloadcv-v1", DownloadCV);
+customElements.define("ds-downloadcv", DownloadCV);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "downloadcv-v1": DownloadCV;
+    "ds-downloadcv": DownloadCV;
   }
 }
+

package/DS1/2-core/{header-v1.ts → ds-header.ts}

@@ -3,7 +3,7 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for displaying page headers
  *
- * @element header-v1
+ * @element ds-header
  * @prop {string} gridarea - Grid area placement
  */
 export class Header extends LitElement {
@@ -72,10 +72,11 @@ export class Header extends LitElement {
   }
 }
 
-customElements.define("header-v1", Header);
+customElements.define("ds-header", Header);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "header-v1": Header;
+    "ds-header": Header;
   }
 }
+

package/DS1/2-core/{home-v1.ts → ds-home.ts}

@@ -158,10 +158,11 @@ export class Home extends LitElement {
   }
 }
 
-customElements.define("home-v1", Home);
+customElements.define("ds-home", Home);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "home-v1": Home;
+    "ds-home": Home;
   }
 }
+

package/DS1/2-core/{icon-v1.ts → ds-icon.ts}

@@ -311,13 +311,13 @@ export class Icon extends LitElement {
   }
 }
 
-customElements.define("icon-v1", Icon);
+customElements.define("ds-icon", Icon);
 
 // Add this line to help with debugging
 console.log("Icon component registered with custom elements registry");
 
 declare global {
   interface HTMLElementTagNameMap {
-    "icon-v1": Icon;
+    "ds-icon": Icon;
   }
 }

package/DS1/2-core/{link-v1.ts → ds-link.ts}

@@ -4,7 +4,7 @@ import { getText } from "../utils/language";
 /**
  * A component for creating localized links that open in new tabs
  *
- * @element link-v1
+ * @element ds-link
  * @prop {string} href - The URL to link to
  */
 export class Link extends LitElement {
@@ -44,7 +44,7 @@ export class Link extends LitElement {
       text-decoration: none;
     }
 
-    icon-v1 {
+    ds-icon {
       display: inline-block;
       vertical-align: middle;
     }
@@ -106,16 +106,16 @@ export class Link extends LitElement {
     return html`
       <a href="${this.href}" target="_blank" rel="noopener noreferrer">
         ${this._text}
-        <icon-v1 type="open"></icon-v1>
+        <ds-icon type="open"></ds-icon>
       </a>
     `;
   }
 }
 
-customElements.define("link-v1", Link);
+customElements.define("ds-link", Link);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "link-v1": Link;
+    "ds-link": Link;
   }
 }

package/DS1/2-core/{markdown-v1.ts → ds-markdown.ts}

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from "lit";
 
 customElements.define(
-  "markdown-v1",
+  "ds-markdown",
   class Markdown extends LitElement {
     static properties = {
       content: { type: String },
@@ -246,6 +246,7 @@ customElements.define(
 
 declare global {
   interface HTMLElementTagNameMap {
-    "markdown-v1": any;
+    "ds-markdown": any;
   }
 }
+

package/DS1/2-core/{price-v1.ts → ds-price.ts}

@@ -6,7 +6,7 @@ import { getPriceLabel } from "../utils/pricing";
 /**
  * A component for displaying the monthly price label based on language/region
  *
- * @element price-v1
+ * @element ds-price
  * @prop {string} country - Preferred country (overrides language mapping)
  * @prop {string} region - Alias for country; if provided, takes precedence over country
  */
@@ -98,10 +98,11 @@ export class Price extends LitElement {
   }
 }
 
-customElements.define("price-v1", Price);
+customElements.define("ds-price", Price);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "price-v1": Price;
+    "ds-price": Price;
   }
 }
+

package/DS1/2-core/{squarecircle-v1.ts → ds-squarecircle.ts}

@@ -4,7 +4,7 @@ import { setTheme, currentTheme } from "../utils/theme";
 /**
  * A component for theme toggle or project links (square or circle shape)
  *
- * @element squarecircle-v1
+ * @element ds-squarecircle
  * @prop {string} type - "theme-toggle" or "link"
  * @prop {string} shape - "square" or "circle"
  * @prop {string} href - URL for link type
@@ -145,10 +145,11 @@ export class SquareCircle extends LitElement {
   }
 }
 
-customElements.define("squarecircle-v1", SquareCircle);
+customElements.define("ds-squarecircle", SquareCircle);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "squarecircle-v1": SquareCircle;
+    "ds-squarecircle": SquareCircle;
   }
 }
+

package/DS1/2-core/{title-v1.ts → ds-title.ts}

@@ -4,7 +4,7 @@ import { getText } from "../utils/language";
 /**
  * A component for displaying page titles with localization support
  *
- * @element title-v1
+ * @element ds-title
  * @prop {string} key - The translation key to use
  * @prop {string} defaultValue - Default value if translation is not found
  */
@@ -109,7 +109,7 @@ export class Title extends LitElement {
       this._text = text || this.defaultValue || this.key;
     } catch (error) {
       console.error(
-        `[title-v1] Error loading text for key "${this.key}":`,
+        `[ds-title] Error loading text for key "${this.key}":`,
         error
       );
       this._text = this.defaultValue || this.key;
@@ -129,10 +129,11 @@ export class Title extends LitElement {
   }
 }
 
-customElements.define("title-v1", Title);
+customElements.define("ds-title", Title);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "title-v1": Title;
+    "ds-title": Title;
   }
 }
+

package/DS1/2-core/{tooltip-v1.ts → ds-tooltip.ts}

@@ -167,7 +167,7 @@ export class Tooltip extends LitElement {
       const t = translate(this.key);
       this._text = t && t !== this.key ? t : this.defaultValue || this.key;
     } catch (err) {
-      console.error("tooltip-v1: error loading text for key", this.key, err);
+      console.error("ds-tooltip: error loading text for key", this.key, err);
       this._text = this.defaultValue || this.key;
     }
     this.requestUpdate();
@@ -185,10 +185,11 @@ export class Tooltip extends LitElement {
   }
 }
 
-customElements.define("tooltip-v1", Tooltip);
+customElements.define("ds-tooltip", Tooltip);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "tooltip-v1": Tooltip;
+    "ds-tooltip": Tooltip;
   }
 }
+

package/DS1/2-core/{viewtoggle-v1.ts → ds-viewtoggle.ts}

@@ -5,7 +5,7 @@ import { getViewMode, setViewMode } from "../utils/viewMode";
 /**
  * A component for toggling between text and image view modes
  *
- * @element viewtoggle-v1
+ * @element ds-viewtoggle
  */
 export class ViewToggle extends LitElement {
   static properties = {
@@ -73,10 +73,11 @@ export class ViewToggle extends LitElement {
   }
 }
 
-customElements.define("viewtoggle-v1", ViewToggle);
+customElements.define("ds-viewtoggle", ViewToggle);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "viewtoggle-v1": ViewToggle;
+    "ds-viewtoggle": ViewToggle;
   }
 }
+

package/DS1/2-core/{year-v1.ts → ds-year.ts}

@@ -3,7 +3,7 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for displaying the current year
  *
- * @element year-v1
+ * @element ds-year
  */
 export class Year extends LitElement {
   static styles = css`
@@ -21,10 +21,11 @@ export class Year extends LitElement {
   }
 }
 
-customElements.define("year-v1", Year);
+customElements.define("ds-year", Year);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "year-v1": Year;
+    "ds-year": Year;
   }
 }
+

package/DS1/3-unit/{doublenav-v1.ts → ds-doublenav.ts}

@@ -3,7 +3,7 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for double navigation (previous/next)
  *
- * @element doublenav-v1
+ * @element ds-doublenav
  * @prop {string} previous - URL for previous link
  * @prop {string} next - URL for next link
  * @prop {string} previousText - Text for previous link
@@ -61,15 +61,15 @@ export class DoubleNav extends LitElement {
       justify-self: end;
     }
 
-    .nav-previous icon-v1 {
+    .nav-previous ds-icon {
       order: -1;
     }
 
-    .nav-next icon-v1 {
+    .nav-next ds-icon {
       padding-top: 3px;
     }
 
-    .nav-previous icon-v1 {
+    .nav-previous ds-icon {
       padding-top: 3px;
     }
   `;
@@ -79,7 +79,7 @@ export class DoubleNav extends LitElement {
       ${this.previous
         ? html`
             <a href="${this.previous}" class="nav-previous">
-              <icon-v1 type="left"></icon-v1>
+              <ds-icon type="left"></ds-icon>
               <ds-text>${this.previousText || "Previous"}</ds-text>
             </a>
           `
@@ -88,7 +88,7 @@ export class DoubleNav extends LitElement {
         ? html`
             <a href="${this.next}" class="nav-next">
               <ds-text>${this.nextText || "Next"}</ds-text>
-              <icon-v1 type="right"></icon-v1>
+              <ds-icon type="right"></ds-icon>
             </a>
           `
         : html`<div></div>`}
@@ -96,10 +96,11 @@ export class DoubleNav extends LitElement {
   }
 }
 
-customElements.define("doublenav-v1", DoubleNav);
+customElements.define("ds-doublenav", DoubleNav);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "doublenav-v1": DoubleNav;
+    "ds-doublenav": DoubleNav;
   }
 }
+

package/DS1/3-unit/{list-v1.ts → ds-list.ts}

@@ -15,10 +15,11 @@ export class List extends LitElement {
   }
 }
 
-customElements.define("list-v1", List);
+customElements.define("ds-list", List);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "list-v1": List;
+    "ds-list": List;
   }
 }
+

package/DS1/3-unit/{panel-v1.ts → ds-panel.ts}

@@ -17,10 +17,11 @@ export class Panel extends LitElement {
   }
 }
 
-customElements.define("panel-v1", Panel);
+customElements.define("ds-panel", Panel);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "panel-v1": Panel;
+    "ds-panel": Panel;
   }
 }
+

package/DS1/3-unit/{row-v1.ts → ds-row.ts}

@@ -43,10 +43,11 @@ export class Row extends LitElement {
   }
 }
 
-customElements.define("row-v1", Row);
+customElements.define("ds-row", Row);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "row-v1": Row;
+    "ds-row": Row;
   }
 }
+

package/DS1/3-unit/{singlenav-v1.ts → ds-singlenav.ts}

@@ -3,7 +3,7 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for single navigation links
  *
- * @element singlenav-v1
+ * @element ds-singlenav
  * @prop {string} type - Type of navigation: "projects" or "work"
  * @prop {string} to - Optional custom destination URL
  */
@@ -48,7 +48,7 @@ export class SingleNav extends LitElement {
     return html`
       <a href="${href}">
         <ds-text key="${navConfig.key}"></ds-text>
-        <icon-v1 type="right"></icon-v1>
+        <ds-icon type="right"></ds-icon>
       </a>
     `;
   }
@@ -69,10 +69,11 @@ export class SingleNav extends LitElement {
   }
 }
 
-customElements.define("singlenav-v1", SingleNav);
+customElements.define("ds-singlenav", SingleNav);
 
 declare global {
   interface HTMLElementTagNameMap {
-    "singlenav-v1": SingleNav;
+    "ds-singlenav": SingleNav;
   }
 }
+

package/DS1/index.ts

@@ -10,28 +10,28 @@ import "./utils/cdn-loader";
 // Core components
 export * from "./2-core/ds-button";
 export * from "./2-core/ds-text";
-export * from "./2-core/icon-v1";
-export * from "./2-core/link-v1";
-export * from "./2-core/cycle-v1";
-export * from "./2-core/tooltip-v1";
-export * from "./2-core/price-v1";
-export * from "./2-core/markdown-v1";
-export * from "./2-core/home-v1";
-export * from "./2-core/year-v1";
-export * from "./2-core/title-v1";
-export * from "./2-core/header-v1";
-export * from "./2-core/attributes-v1";
-export * from "./2-core/downloadcv-v1";
-export * from "./2-core/article-v1";
-export * from "./2-core/viewtoggle-v1";
-export * from "./2-core/squarecircle-v1";
+export * from "./2-core/ds-icon";
+export * from "./2-core/ds-link";
+export * from "./2-core/ds-cycle";
+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 "./3-unit/list-v1";
-export * from "./3-unit/panel-v1";
-export * from "./3-unit/row-v1";
-export * from "./3-unit/singlenav-v1";
-export * from "./3-unit/doublenav-v1";
+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

package/README.md

@@ -26,7 +26,7 @@ npm install ds-one@alpha
 yarn add ds-one@alpha
 ```
 
-**Note**: Currently published as alpha version `0.2.0-alpha.1`. Use `@alpha` tag to install.
+**Note**: Currently published as alpha version `0.2.0-alpha.2`. Use `@alpha` tag to install.
 
 ### Basic Usage (CDN)
 
@@ -86,13 +86,13 @@ Try DS one in your browser: **[dsone.dev](https://dsone.dev)** (documentation sl
 - **[Internationalization](./docs/i18n.md)** - Language keys and Notion CMS setup
 - **[Examples](./docs/examples.md)** - Usage examples and patterns
 
-## Current Status: v0.2.0-alpha.1
+## Current Status: v0.2.0-alpha.2
 
 **⚠️ Alpha Release**: This is an early alpha version. The API may change as we refine the components and architecture.
 
 ### Completed Features
 
-- ✅ Core component library (ds-button, ds-text, icon-v1, etc.)
+- ✅ Core component library (ds-button, ds-text, ds-icon, etc.)
 - ✅ Theming system with accent color support
 - ✅ Internationalization with language keys
 - ✅ Responsive design with mobile scaling
@@ -183,7 +183,7 @@ bun run build
 
 ```bash
 # Create a new alpha release (recommended for now)
-bun run release:pre:alpha  # Bumps alpha version (e.g., 0.2.0-alpha.1 → 0.2.0-alpha.2)
+bun run release:pre:alpha  # Bumps alpha version (e.g., 0.2.0-alpha.2 → 0.2.0-alpha.2)
 
 # Other release commands (for future use)
 bun run release:patch      # For patch releases