ds-one 0.2.0-alpha.3 → 0.2.5-alpha.10

package/dist/2-core/ds-attributes.js

@@ -1,128 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
-/**
- * A component for displaying project/work attributes (year, category, status)
- *
- * @element ds-attributes
- * @prop {string} year - Year key for translation
- * @prop {string} category - Category key for translation
- * @prop {string} status - Status key for translation
- * @prop {string} type - Type of attributes: "project" or "work"
- */
-export class Attributes extends LitElement {
-    static get properties() {
-        return {
-            year: { type: String, reflect: true },
-            category: { type: String, reflect: true },
-            status: { type: String, reflect: true },
-            type: { type: String, reflect: true },
-        };
-    }
-    constructor() {
-        super();
-        this.year = "";
-        this.category = "";
-        this.status = "";
-        this.type = "project";
-        this.boundHandlers = {
-            languageChanged: (() => {
-                this.requestUpdate();
-            }),
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        window.addEventListener("language-changed", this.boundHandlers.languageChanged);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener("language-changed", this.boundHandlers.languageChanged);
-    }
-    _getStatusClass(status) {
-        if (status.includes("Done"))
-            return "done";
-        if (status.includes("Ongoing"))
-            return "ongoing";
-        if (status.includes("Pending"))
-            return "pending";
-        if (status.includes("NotStarted"))
-            return "not-started";
-        return "pending";
-    }
-    render() {
-        return html `
-      ${this.year
-            ? html `
-            <div class="attribute-row">${getText(this.year) || this.year}</div>
-          `
-            : ""}
-      ${this.category
-            ? html `
-            <div class="attribute-row">
-              ${this.type === "work"
-                ? html `<span
-                    class="status-indicator ${this._getStatusClass(this.status)}"
-                  ></span>`
-                : ""}
-              ${getText(this.category) || this.category}
-            </div>
-          `
-            : ""}
-      ${this.status && this.type === "project"
-            ? html `
-            <div class="attribute-row">
-              <span
-                class="status-indicator ${this._getStatusClass(this.status)}"
-              ></span>
-              ${getText(this.status) || this.status}
-            </div>
-          `
-            : ""}
-    `;
-    }
-}
-Attributes.styles = css `
-    :host {
-      display: flex;
-      flex-direction: row;
-      gap: calc(16px * var(--scaling-factor));
-      align-items: flex-start;
-    }
-
-    .attribute-row {
-      display: inline-flex;
-      height: calc(20px * var(--scaling-factor));
-      padding: 0px calc(2px * var(--scaling-factor));
-      align-items: flex-start;
-      gap: calc(5px * var(--scaling-factor));
-      font-family: var(--typeface);
-      font-size: calc(14px * var(--scaling-factor));
-      color: light-dark(var(--slate), var(--slate-dark));
-    }
-
-    .status-indicator {
-      width: calc(8px * var(--scaling-factor));
-      height: calc(8px * var(--scaling-factor));
-      display: inline-block;
-      transition:
-        background 0.2s,
-        border-radius 0.2s;
-    }
-
-    .status-indicator.done {
-      background-color: green;
-    }
-
-    .status-indicator.ongoing {
-      background-color: #30adec;
-    }
-
-    .status-indicator.pending {
-      background-color: #f6c71c;
-    }
-
-    .status-indicator.not-started {
-      background-color: #b1b4b9;
-    }
-  `;
-customElements.define("ds-attributes", Attributes);

package/dist/2-core/ds-button.figma.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=ds-button.figma.d.ts.map

package/dist/2-core/ds-button.figma.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-button.figma.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-button.figma.ts"],"names":[],"mappings":""}

package/dist/2-core/ds-button.figma.js

@@ -1,6 +0,0 @@
-import figma from "@figma/code-connect";
-import html from "@figma/code-connect/html";
-figma.connect("https://www.figma.com/design/XAnoaRoq9LxVAHUZgtdO0r/DS-one?node-id=1-6", {
-    props: {},
-    example: () => html `<ds-button>Button</ds-button>`,
-});

package/dist/2-core/ds-downloadcv.d.ts

@@ -1,58 +0,0 @@
-import { LitElement } from "lit";
-/**
- * Download CV button that resolves language-specific URLs
- *
- * @element ds-downloadcv
- * @prop {string} urlEn - URL for English CV
- * @prop {string} urlDa - URL for Danish CV
- * @prop {string} urlJa - URL for Japanese CV
- * @prop {string} filename - Base filename for download (default: "cv")
- */
-export declare class DownloadCV extends LitElement {
-    static properties: {
-        urlEn: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        urlDa: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        urlJa: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
-        filename: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        _activeUrl: {
-            type: StringConstructor;
-            state: boolean;
-        };
-    };
-    urlEn: string;
-    urlDa: string;
-    urlJa: string;
-    filename: string;
-    _activeUrl: string;
-    constructor();
-    static styles: import("lit").CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changed: Map<string, unknown>): void;
-    private _handleLanguageChange;
-    private _resolveUrl;
-    private _download;
-    private _inferExtFromUrl;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "ds-downloadcv": DownloadCV;
-    }
-}
-//# sourceMappingURL=ds-downloadcv.d.ts.map

package/dist/2-core/ds-downloadcv.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-downloadcv.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-downloadcv.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;;GAQG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;;MAMf;IAEM,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;;IAW3B,MAAM,CAAC,MAAM,0BAIX;IAEF,iBAAiB;IAMjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,OAAO,CAAC,qBAAqB,CAE3B;IAEF,OAAO,CAAC,WAAW;YAYL,SAAS;IAwCvB,OAAO,CAAC,gBAAgB;IAUxB,MAAM;CAWP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,UAAU,CAAC;KAC7B;CACF"}

package/dist/2-core/ds-downloadcv.js

@@ -1,119 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { currentLanguage, translate } from "../utils/language";
-/**
- * Download CV button that resolves language-specific URLs
- *
- * @element ds-downloadcv
- * @prop {string} urlEn - URL for English CV
- * @prop {string} urlDa - URL for Danish CV
- * @prop {string} urlJa - URL for Japanese CV
- * @prop {string} filename - Base filename for download (default: "cv")
- */
-export class DownloadCV extends LitElement {
-    constructor() {
-        super();
-        this._handleLanguageChange = () => {
-            this._resolveUrl();
-        };
-        this.urlEn = "";
-        this.urlDa = "";
-        this.urlJa = "";
-        this.filename = "cv";
-        this._activeUrl = "";
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._resolveUrl();
-        window.addEventListener("language-changed", this._handleLanguageChange);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener("language-changed", this._handleLanguageChange);
-    }
-    updated(changed) {
-        if (changed.has("urlEn") || changed.has("urlDa") || changed.has("urlJa")) {
-            this._resolveUrl();
-        }
-    }
-    _resolveUrl() {
-        const lang = currentLanguage.value || "en-US";
-        const prefix = (lang.split("-")[0] || "en").toLowerCase();
-        let url = "";
-        if (prefix === "da")
-            url = this.urlDa || this.urlEn || this.urlJa;
-        else if (prefix === "ja")
-            url = this.urlJa || this.urlEn || this.urlDa;
-        else
-            url = this.urlEn || this.urlDa || this.urlJa;
-        this._activeUrl = url || "";
-    }
-    async _download() {
-        if (!this._activeUrl) {
-            console.warn("[ds-downloadcv] No URL available");
-            return;
-        }
-        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("[ds-downloadcv] Fetch response:", res.status, res.statusText);
-            if (!res.ok)
-                throw new Error(`HTTP ${res.status}`);
-            const blob = await res.blob();
-            const langPrefix = (currentLanguage.value || "en-US")
-                .split("-")[0]
-                .toLowerCase();
-            const fileExt = this._inferExtFromUrl(this._activeUrl) || "pdf";
-            const name = `${this.filename || "cv"}-${langPrefix}.${fileExt}`;
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            a.href = url;
-            a.download = name;
-            document.body.appendChild(a);
-            a.click();
-            a.remove();
-            URL.revokeObjectURL(url);
-            console.log("[ds-downloadcv] Download triggered successfully");
-        }
-        catch (err) {
-            console.error("[ds-downloadcv] Fetch failed, using fallback:", err);
-            // Fallback: open the file directly
-            window.open(this._activeUrl, "_blank", "noopener,noreferrer");
-        }
-    }
-    _inferExtFromUrl(u) {
-        const qIndex = u.indexOf("?");
-        const clean = qIndex >= 0 ? u.slice(0, qIndex) : u;
-        const dot = clean.lastIndexOf(".");
-        if (dot === -1)
-            return null;
-        const ext = clean.slice(dot + 1).toLowerCase();
-        if (ext.length > 5)
-            return null;
-        return ext;
-    }
-    render() {
-        const disabled = !this._activeUrl;
-        return html `
-      <ds-button
-        variant="primary"
-        .disabled=${disabled}
-        default-text=${translate("downloadCV")}
-        @click=${() => this._download()}
-      ></ds-button>
-    `;
-    }
-}
-DownloadCV.properties = {
-    urlEn: { type: String, attribute: "url-en", reflect: true },
-    urlDa: { type: String, attribute: "url-da", reflect: true },
-    urlJa: { type: String, attribute: "url-ja", reflect: true },
-    filename: { type: String, reflect: true },
-    _activeUrl: { type: String, state: true },
-};
-DownloadCV.styles = css `
-    :host {
-      display: inline-flex;
-    }
-  `;
-customElements.define("ds-downloadcv", DownloadCV);

package/dist/2-core/ds-header.d.ts

@@ -1,28 +0,0 @@
-import { LitElement } from "lit";
-/**
- * A component for displaying page headers
- *
- * @element ds-header
- * @prop {string} gridarea - Grid area placement
- */
-export declare class Header extends LitElement {
-    private _gridArea;
-    static get properties(): {
-        gridarea: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-    };
-    set gridarea(value: string);
-    get gridarea(): string;
-    static styles: import("lit").CSSResult;
-    constructor();
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "ds-header": Header;
-    }
-}
-//# sourceMappingURL=ds-header.d.ts.map

package/dist/2-core/ds-header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-header.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;;GAKG;AACH,qBAAa,MAAO,SAAQ,UAAU;IACpC,OAAO,CAAC,SAAS,CAAM;IAEvB,MAAM,KAAK,UAAU;;;;;MAIpB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAKzB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,MAAM,CAAC,MAAM,0BAuBX;;IAMF,YAAY;IAMZ,MAAM;CASP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAC;KACrB;CACF"}

package/dist/2-core/ds-header.js

@@ -1,66 +0,0 @@
-import { LitElement, html, css } from "lit";
-/**
- * A component for displaying page headers
- *
- * @element ds-header
- * @prop {string} gridarea - Grid area placement
- */
-export class Header extends LitElement {
-    static get properties() {
-        return {
-            gridarea: { type: String, reflect: true },
-        };
-    }
-    set gridarea(value) {
-        const oldValue = this._gridArea;
-        this._gridArea = value;
-        this.style.gridArea = value;
-        this.requestUpdate("gridarea", oldValue);
-    }
-    get gridarea() {
-        return this._gridArea;
-    }
-    constructor() {
-        super();
-        this._gridArea = "";
-    }
-    firstUpdated() {
-        if (this.hasAttribute("gridarea")) {
-            this.style.gridArea = this.getAttribute("gridarea") || "";
-        }
-    }
-    render() {
-        return html `
-      <h2
-        style="display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%;"
-      >
-        <slot></slot>
-      </h2>
-    `;
-    }
-}
-Header.styles = css `
-    :host {
-      display: flex;
-      padding: calc(2px * var(--scaling-factor));
-      align-items: flex-start;
-      width: 100%;
-    }
-
-    h2 {
-      display: flex;
-      place-content: center;
-      font-family: var(--typeface);
-      color: light-dark(var(--black), var(--white));
-      align-items: center;
-      font-weight: 500;
-      font-size: calc(14px * var(--scaling-factor));
-      margin: 0;
-      width: 100%;
-    }
-
-    ::slotted(*) {
-      margin: 0;
-    }
-  `;
-customElements.define("ds-header", Header);

package/dist/2-core/ds-home.d.ts

@@ -1,26 +0,0 @@
-import { LitElement } from "lit";
-export declare class Home extends LitElement {
-    static properties: any;
-    state: "active" | "disabled";
-    /**
-     * Ensure Home is always disabled on mobile devices.
-     * Runs once when the element is connected to the DOM.
-     */
-    connectedCallback(): void;
-    /**
-     * Lightweight mobile detection. Mirrors the app's utility without importing it
-     * to keep the design system component self-contained.
-     */
-    private _isMobileDevice;
-    protected updated(): void;
-    static styles: import("lit").CSSResult;
-    private _navigateHome;
-    private _onKeyDown;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "ds-home": Home;
-    }
-}
-//# sourceMappingURL=ds-home.d.ts.map

package/dist/2-core/ds-home.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-home.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-home.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,UAAU,EAEZ,GAAG,CAAC;IAET,KAAK,EAAE,QAAQ,GAAG,UAAU,CAAY;IAExC;;;OAGG;IACH,iBAAiB;IAOjB;;;OAGG;IACH,OAAO,CAAC,eAAe;IAoBvB,SAAS,CAAC,OAAO,IAAI,IAAI;IAOzB,MAAM,CAAC,MAAM,0BAyEX;IAIF,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,UAAU;IAQlB,MAAM;CAgBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/2-core/ds-home.js

@@ -1,148 +0,0 @@
-import { LitElement, html, css } from "lit";
-// Home tab button that reveals on hover (active) or stays visible and non-interactive (disabled)
-export class Home extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.state = "active";
-    }
-    /**
-     * Ensure Home is always disabled on mobile devices.
-     * Runs once when the element is connected to the DOM.
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (this._isMobileDevice()) {
-            this.state = "disabled";
-        }
-    }
-    /**
-     * Lightweight mobile detection. Mirrors the app's utility without importing it
-     * to keep the design system component self-contained.
-     */
-    _isMobileDevice() {
-        const nav = globalThis.navigator;
-        const win = globalThis.window;
-        const ua = (nav && (nav.userAgent || nav.vendor)) || (win && win.opera) || "";
-        const uaMatchesMobile = /Mobile|Android|iP(ad|hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)|Windows Phone|Phone|Tablet/i.test(ua);
-        const touchPoints = (nav && nav.maxTouchPoints) || 0;
-        const isTouchCapable = touchPoints > 1;
-        const narrowViewport = win
-            ? Math.min(win.innerWidth || 0, win.innerHeight || 0) <= 820
-            : false;
-        return uaMatchesMobile || (isTouchCapable && narrowViewport);
-    }
-    updated() {
-        // Enforce disabled on mobile even if someone flips the state later
-        if (this._isMobileDevice() && this.state !== "disabled") {
-            this.state = "disabled";
-        }
-    }
-    // No setup needed; `state` defaults to "active" and reflects if provided
-    _navigateHome() {
-        if (this.state === "disabled")
-            return;
-        window.location.href = "./home.html";
-    }
-    _onKeyDown(e) {
-        if (this.state === "disabled")
-            return;
-        if (e?.key === "Enter" || e?.key === " ") {
-            e.preventDefault();
-            this._navigateHome();
-        }
-    }
-    render() {
-        const isDisabled = this.state === "disabled";
-        return html `
-      <div class="hover-fill"></div>
-      <div
-        class="home ${isDisabled ? "is-disabled" : "is-active"}"
-        role="button"
-        aria-disabled="${String(isDisabled)}"
-        tabindex="${isDisabled ? -1 : 0}"
-        @click="${this._navigateHome}"
-        @keydown="${this._onKeyDown}"
-      >
-        <ds-text key="home"></ds-text>
-      </div>
-    `;
-    }
-}
-Home.properties = {
-    state: { type: String, reflect: true }, // "active" | "disabled"
-};
-Home.styles = css `
-    :host {
-      /* local sizing vars, derived from one.css */
-      --home-visible: calc(var(--1) * 0.1); /* 2px */
-
-      position: relative;
-      display: flex; /* expand hover zone horizontally */
-      width: 100%; /* take the whole row width of the app container */
-      height: calc(
-        var(--1) * var(--scaling-factor)
-      ); /* provide hover zone under the tab */
-      font-family: var(--typeface);
-      overflow: hidden; /* hide the part above the host */
-    }
-
-    /* Disabled: preserve full hover area space but keep inactive */
-    :host([state="disabled"]) {
-      height: var(--1); /* keep same layout height as active */
-      overflow: hidden;
-    }
-
-    .home {
-      position: absolute;
-      left: 0;
-      width: calc(var(--4) * var(--scaling-factor));
-      height: calc(var(--1) * var(--scaling-factor));
-      margin: 0 calc(var(--1) * var(--scaling-factor));
-      display: flex;
-      align-items: center;
-      background: var(--accent-color);
-      color: light-dark(var(--black), var(--black));
-      user-select: none;
-      transition: top 120ms ease;
-    }
-
-    /* Inner text spacing without affecting the 80px outer width */
-    .home > ds-text {
-      padding: 0 calc(var(--1) * 0.15 * var(--scaling-factor));
-      box-sizing: border-box;
-      height: 100%;
-      display: inline-flex;
-      align-items: center;
-    }
-
-    /* invisible flex filler to extend hover area to the right */
-    .hover-fill {
-      flex: 1 1 auto;
-    }
-
-    /* Active: hidden until hover */
-    .home.is-active {
-      cursor: pointer;
-      /* Hide above, leave a 2px strip visible */
-      top: calc(var(--home-visible) - var(--1));
-    }
-
-    /* Reveal the tab when hovering anywhere in the host area
-       (the host is 80x20, while the tab starts hidden above) */
-    :host(:hover) .home.is-active {
-      top: 0;
-    }
-
-    /* Disabled: stays hidden and not interactive */
-    .home.is-disabled {
-      top: calc(var(--home-visible) - var(--1));
-      cursor: default;
-      pointer-events: none;
-      color: var(--accent-color);
-    }
-
-    .label {
-      font-size: var(--type-size-default);
-    }
-  `;
-customElements.define("ds-home", Home);

package/dist/2-core/ds-link.d.ts

@@ -1,35 +0,0 @@
-import { LitElement } from "lit";
-/**
- * A component for creating localized links that open in new tabs
- *
- * @element ds-link
- * @prop {string} href - The URL to link to
- */
-export declare class Link extends LitElement {
-    static get properties(): {
-        href: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        _text: {
-            type: StringConstructor;
-            state: boolean;
-        };
-    };
-    href: string;
-    _text: string;
-    private boundHandlers;
-    constructor();
-    static styles: import("lit").CSSResult;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changedProperties: Map<string, unknown>): void;
-    _loadText(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        "ds-link": Link;
-    }
-}
-//# sourceMappingURL=ds-link.d.ts.map

package/dist/2-core/ds-link.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ds-link.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;GAKG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;MAKpB;IAEO,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,aAAa,CAAqC;;IAe1D,MAAM,CAAC,MAAM,0BAeX;IAEF,iBAAiB;IAiBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,SAAS;IAWT,MAAM;CAYP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}