ds-one 0.2.5-alpha.1 → 0.2.5-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ds-one",
-  "version": "0.2.5-alpha.1",
+  "version": "0.2.5-alpha.11",
   "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",
@@ -27,7 +27,7 @@
     "dist/**/*.js"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "bun run build:bundle",
     "build:bundle": "bunx tsc && bunx esbuild dist/index.js --bundle --format=esm --outfile=dist/ds-one.bundle.js --sourcemap --platform=browser --target=es2020 && bunx esbuild dist/index.js --bundle --format=esm --outfile=dist/ds-one.bundle.min.js --minify --sourcemap --platform=browser --target=es2020",
     "build:types": "tsc --noEmit",
@@ -45,12 +45,11 @@
     "release:minor": "bun run scripts/release.ts minor",
     "release:major": "bun run scripts/release.ts major",
     "release:pre:alpha": "bun run scripts/release.ts prerelease --preid=alpha",
-    "release:pre:beta": "bun run scripts/release.ts prerelease --preid=beta",
-    "release:pre:rc": "bun run scripts/release.ts prerelease --preid=rc",
-    "docs:dev": "cd web && bun run dev",
-    "docs:build": "cd web && bun run build",
-    "docs:preview": "cd web && bun run preview",
-    "docs:deploy": "cd web && bun run deploy"
+    "publish": "npm publish --tag alpha",
+    "docs:dev": "cd website && bun run dev",
+    "docs:build": "cd website && bun run build",
+    "docs:preview": "cd website && bun run preview",
+    "docs:deploy": "cd website && bun run deploy"
   },
   "keywords": [
     "design-system",

package/DS1/3-unit/doublenav-v1.ts

@@ -1,105 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-/**
- * A component for double navigation (previous/next)
- *
- * @element doublenav-v1
- * @prop {string} previous - URL for previous link
- * @prop {string} next - URL for next link
- * @prop {string} previousText - Text for previous link
- * @prop {string} nextText - Text for next link
- * @prop {string} overlay - Overlay color (blue, red, orange, green, yellow)
- */
-export class DoubleNav extends LitElement {
-  static get properties() {
-    return {
-      previous: { type: String, reflect: true },
-      next: { type: String, reflect: true },
-      previousText: { type: String, reflect: true, attribute: "previous-text" },
-      nextText: { type: String, reflect: true, attribute: "next-text" },
-      overlay: { type: String, reflect: true },
-    };
-  }
-
-  declare previous: string;
-  declare next: string;
-  declare previousText: string;
-  declare nextText: string;
-  declare overlay?: string;
-
-  constructor() {
-    super();
-    this.previous = "";
-    this.next = "";
-    this.previousText = "";
-    this.nextText = "";
-    this.overlay = "";
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: space-between;
-      gap: calc(5px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
-      align-items: center;
-    }
-
-    a {
-      display: inline-flex;
-      align-items: center;
-      gap: calc(5px * var(--scaling-factor));
-      text-decoration: none;
-      color: inherit;
-    }
-
-    .nav-previous {
-      justify-self: start;
-    }
-
-    .nav-next {
-      justify-self: end;
-    }
-
-    .nav-previous icon-v1 {
-      order: -1;
-    }
-
-    .nav-next icon-v1 {
-      padding-top: 3px;
-    }
-
-    .nav-previous icon-v1 {
-      padding-top: 3px;
-    }
-  `;
-
-  render() {
-    return html`
-      ${this.previous
-        ? html`
-            <a href="${this.previous}" class="nav-previous">
-              <icon-v1 type="left"></icon-v1>
-              <ds-text>${this.previousText || "Previous"}</ds-text>
-            </a>
-          `
-        : html`<div></div>`}
-      ${this.next
-        ? html`
-            <a href="${this.next}" class="nav-next">
-              <ds-text>${this.nextText || "Next"}</ds-text>
-              <icon-v1 type="right"></icon-v1>
-            </a>
-          `
-        : html`<div></div>`}
-    `;
-  }
-}
-
-customElements.define("doublenav-v1", DoubleNav);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "doublenav-v1": DoubleNav;
-  }
-}

package/DS1/3-unit/ds-portfolio-doublenav.ts

@@ -1,105 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-/**
- * A component for double navigation (previous/next)
- *
- * @element portfolio-doublenav
- * @prop {string} previous - URL for previous link
- * @prop {string} next - URL for next link
- * @prop {string} previousText - Text for previous link
- * @prop {string} nextText - Text for next link
- * @prop {string} overlay - Overlay color (blue, red, orange, green, yellow)
- */
-export class PortfolioDoubleNav extends LitElement {
-  static get properties() {
-    return {
-      previous: { type: String, reflect: true },
-      next: { type: String, reflect: true },
-      previousText: { type: String, reflect: true, attribute: "previous-text" },
-      nextText: { type: String, reflect: true, attribute: "next-text" },
-      overlay: { type: String, reflect: true },
-    };
-  }
-
-  declare previous: string;
-  declare next: string;
-  declare previousText: string;
-  declare nextText: string;
-  declare overlay?: string;
-
-  constructor() {
-    super();
-    this.previous = "";
-    this.next = "";
-    this.previousText = "";
-    this.nextText = "";
-    this.overlay = "";
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: space-between;
-      gap: calc(5px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
-      align-items: center;
-    }
-
-    a {
-      display: inline-flex;
-      align-items: center;
-      gap: calc(5px * var(--scaling-factor));
-      text-decoration: none;
-      color: inherit;
-    }
-
-    .nav-previous {
-      justify-self: start;
-    }
-
-    .nav-next {
-      justify-self: end;
-    }
-
-    .nav-previous ds-icon {
-      order: -1;
-    }
-
-    .nav-next ds-icon {
-      padding-top: 3px;
-    }
-
-    .nav-previous ds-icon {
-      padding-top: 3px;
-    }
-  `;
-
-  render() {
-    return html`
-      ${this.previous
-        ? html`
-            <a href="${this.previous}" class="nav-previous">
-              <ds-icon type="left"></ds-icon>
-              <ds-text>${this.previousText || "Previous"}</ds-text>
-            </a>
-          `
-        : html`<div></div>`}
-      ${this.next
-        ? html`
-            <a href="${this.next}" class="nav-next">
-              <ds-text>${this.nextText || "Next"}</ds-text>
-              <ds-icon type="right"></ds-icon>
-            </a>
-          `
-        : html`<div></div>`}
-    `;
-  }
-}
-
-customElements.define("portfolio-doublenav", PortfolioDoubleNav);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "portfolio-doublenav": PortfolioDoubleNav;
-  }
-}

package/DS1/3-unit/ds-portfolio-panel.ts

@@ -1,27 +0,0 @@
-
-import { LitElement, html, css } from "lit";
-
-export class PortfolioPanel extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: row;
-      height: var(--08);
-      align-items: end;
-      gap: var(--025);
-    }
-  `;
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-customElements.define("portfolio-panel", PortfolioPanel);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "portfolio-panel": PortfolioPanel;
-  }
-}
-

package/DS1/3-unit/ds-portfolio-singlenav.ts

@@ -1,79 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-/**
- * A component for single navigation links
- *
- * @element portfolio-singlenav
- * @prop {string} type - Type of navigation: "projects" or "work"
- * @prop {string} to - Optional custom destination URL
- */
-export class PortfolioSingleNav extends LitElement {
-  static get properties() {
-    return {
-      type: { type: String, reflect: true },
-      to: { type: String, reflect: true },
-    };
-  }
-
-  declare type: "projects" | "work";
-  declare to?: string;
-
-  constructor() {
-    super();
-    this.type = "work";
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: end;
-      gap: calc(5px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
-      align-items: center;
-    }
-
-    a {
-      display: inline-flex;
-      align-items: center;
-      gap: calc(5px * var(--scaling-factor));
-      text-decoration: none;
-      color: inherit;
-    }
-  `;
-
-  render() {
-    const navConfig = this.getNavConfig();
-    const href = this.to || navConfig.href;
-
-    return html`
-      <a href="${href}">
-        <ds-text key="${navConfig.key}"></ds-text>
-        <ds-icon type="right"></ds-icon>
-      </a>
-    `;
-  }
-
-  private getNavConfig() {
-    switch (this.type) {
-      case "projects":
-        return {
-          href: "/projects",
-          key: "projects",
-        };
-      case "work":
-        return {
-          href: "/",
-          key: "workExperience",
-        };
-    }
-  }
-}
-
-customElements.define("portfolio-singlenav", PortfolioSingleNav);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "portfolio-singlenav": PortfolioSingleNav;
-  }
-}
-

package/DS1/3-unit/list-v1.ts

@@ -1,24 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-export class List extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      width: 100%;
-    }
-  `;
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-customElements.define("list-v1", List);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "list-v1": List;
-  }
-}

package/DS1/3-unit/panel-v1.ts

@@ -1,26 +0,0 @@
-
-import { LitElement, html, css } from "lit";
-
-export class Panel extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: row;
-      height: var(--08);
-      align-items: end;
-      gap: var(--025);
-    }
-  `;
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-customElements.define("panel-v1", Panel);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "panel-v1": Panel;
-  }
-}

package/DS1/3-unit/row-v1.ts

@@ -1,52 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-declare global {
-  interface CustomElementRegistry {
-    define(name: string, constructor: typeof LitElement): void;
-  }
-  var customElements: CustomElementRegistry;
-}
-
-export class Row extends LitElement {
-  static properties = {
-    type: { type: String, reflect: true },
-  };
-
-  declare type: "fill" | "centered";
-
-  constructor() {
-    super();
-    this.type = "fill";
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      align-items: end;
-      width: calc(240px * var(--scaling-factor));
-    }
-
-    :host([type="fill"]) {
-      justify-content: space-between;
-      height: calc(var(--1) * var(--scaling-factor));
-    }
-
-    :host([type="centered"]) {
-      justify-content: center;
-      height: calc(var(--1) * var(--scaling-factor));
-      gap: calc(var(--025) * var(--scaling-factor));
-    }
-  `;
-
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-
-customElements.define("row-v1", Row);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "row-v1": Row;
-  }
-}

package/DS1/3-unit/singlenav-v1.ts

@@ -1,78 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-/**
- * A component for single navigation links
- *
- * @element singlenav-v1
- * @prop {string} type - Type of navigation: "projects" or "work"
- * @prop {string} to - Optional custom destination URL
- */
-export class SingleNav extends LitElement {
-  static get properties() {
-    return {
-      type: { type: String, reflect: true },
-      to: { type: String, reflect: true },
-    };
-  }
-
-  declare type: "projects" | "work";
-  declare to?: string;
-
-  constructor() {
-    super();
-    this.type = "work";
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: end;
-      gap: calc(5px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
-      align-items: center;
-    }
-
-    a {
-      display: inline-flex;
-      align-items: center;
-      gap: calc(5px * var(--scaling-factor));
-      text-decoration: none;
-      color: inherit;
-    }
-  `;
-
-  render() {
-    const navConfig = this.getNavConfig();
-    const href = this.to || navConfig.href;
-
-    return html`
-      <a href="${href}">
-        <ds-text key="${navConfig.key}"></ds-text>
-        <icon-v1 type="right"></icon-v1>
-      </a>
-    `;
-  }
-
-  private getNavConfig() {
-    switch (this.type) {
-      case "projects":
-        return {
-          href: "/projects",
-          key: "projects",
-        };
-      case "work":
-        return {
-          href: "/",
-          key: "workExperience",
-        };
-    }
-  }
-}
-
-customElements.define("singlenav-v1", SingleNav);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "singlenav-v1": SingleNav;
-  }
-}