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

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

@@ -1,15 +1,16 @@
 import { LitElement, html, css } from "lit";
-import { translate, currentLanguage, getAvailableLanguagesSync, getLanguageDisplayName, setLanguage, } from "../utils/language";
-import { currentTheme, setTheme } from "../utils/theme";
-import { saveSettings } from "../utils/settings";
+import { translate, currentLanguage, getAvailableLanguagesSync, getLanguageDisplayName, setLanguage, } from "../0-face/i18n";
+import { currentTheme, setTheme } from "../0-face/theme";
+import { savePreferences } from "../0-face/preferences";
 import "./ds-button";
 import "./ds-icon";
+import "./ds-text";
 // Accent color utilities
 const saveAccentColor = (color) => {
     localStorage.setItem("accentColor", color);
 };
 const getAccentColor = () => {
-    return localStorage.getItem("accentColor") || "--blue"; // Default color if none set
+    return localStorage.getItem("accentColor") || "--sharp-blue"; // Default color if none set
 };
 const applyAccentColor = () => {
     const color = getAccentColor();
@@ -96,12 +97,12 @@ export class Cycle extends LitElement {
         else if (this.type === "accent-color") {
             // Set up accent color cycling
             this.values = [
-                "--light-green",
-                "--green",
-                "--light-blue",
-                "--blue",
+                "--apple-green",
+                "--every-green",
+                "--zenith-blue",
+                "--sharp-blue",
                 "--pink",
-                "--red",
+                "--tuned-red",
                 "--orange",
                 "--yellow",
             ];
@@ -110,8 +111,6 @@ export class Cycle extends LitElement {
             this.currentValue = currentAccentColor;
             // Apply the accent color to ensure it's active
             applyAccentColor();
-            // Set label
-            this.label = this.getLabel();
         }
         else if (this.type === "notes-style-medium") {
             // Set up notes style medium cycling
@@ -183,8 +182,6 @@ export class Cycle extends LitElement {
             this.currentValue = currentAccentColor;
             // Apply the accent color to ensure it's active
             applyAccentColor();
-            // Update label
-            this.label = this.getLabel();
         }
         else if (this.type === "notes-style-medium") {
             // Get current notes style medium
@@ -248,8 +245,8 @@ export class Cycle extends LitElement {
             else {
                 setLanguage(newLanguage);
             }
-            // Save settings
-            saveSettings({ language: newLanguage });
+            // Save preferences
+            savePreferences({ language: newLanguage });
             // Dispatch language change event
             window.dispatchEvent(new CustomEvent("language-changed", {
                 detail: { language: newLanguage },
@@ -264,8 +261,8 @@ export class Cycle extends LitElement {
             this.currentValue = newTheme;
             // Set the new theme using the shared helper
             setTheme(newTheme);
-            // Save settings
-            saveSettings({ theme: newTheme });
+            // Save preferences
+            savePreferences({ theme: newTheme });
             // Theme helper already emits the change event, so no manual dispatch here
         }
         else if (this.type === "accent-color") {
@@ -279,8 +276,8 @@ export class Cycle extends LitElement {
             saveAccentColor(newColor);
             // Apply the new accent color
             applyAccentColor();
-            // Save settings
-            saveSettings({ accentColor: newColor });
+            // Save preferences
+            savePreferences({ accentColor: newColor });
             // Dispatch accent color change event
             window.dispatchEvent(new CustomEvent("accent-color-changed", {
                 detail: { color: newColor },
@@ -295,8 +292,8 @@ export class Cycle extends LitElement {
             this.currentValue = newStyle;
             // Save the new notes style medium
             saveNotesStyleMedium(newStyle);
-            // Save settings
-            saveSettings({ notesStyleMedium: newStyle });
+            // Save preferences
+            savePreferences({ notesStyleMedium: newStyle });
             // Dispatch notes style medium change event
             window.dispatchEvent(new CustomEvent("notes-style-medium-changed", {
                 detail: { style: newStyle },
@@ -311,8 +308,8 @@ export class Cycle extends LitElement {
             this.currentValue = newBehavior;
             // Save the new note behavior
             savePageStyle(newBehavior);
-            // Save settings
-            saveSettings({ pageStyle: newBehavior });
+            // Save preferences
+            savePreferences({ pageStyle: newBehavior });
             // Dispatch note behavior change event
             window.dispatchEvent(new CustomEvent("page-style-changed", {
                 detail: { behavior: newBehavior },
@@ -327,8 +324,8 @@ export class Cycle extends LitElement {
             this.currentValue = newIconOnlyValue;
             // Save the new page style
             savePageStyle(newIconOnlyValue);
-            // Save settings
-            saveSettings({ pageStyle: newIconOnlyValue });
+            // Save preferences
+            savePreferences({ pageStyle: newIconOnlyValue });
             // No label update for icon-only type
             this.label = "";
             // Dispatch page style change event
@@ -350,8 +347,8 @@ export class Cycle extends LitElement {
         else if (this.type === "theme") {
             // Try to get translated theme name
             if (this.translationsReady) {
-                const translatedName = translate(`themes.${value}`);
-                if (translatedName && translatedName !== `themes.${value}`) {
+                const translatedName = translate(value);
+                if (translatedName && translatedName !== value) {
                     return translatedName;
                 }
             }
@@ -389,16 +386,30 @@ export class Cycle extends LitElement {
         }
         return value;
     }
+    getColorKey(colorVar) {
+        // Map CSS variables to language keys
+        const colorMap = {
+            "--tuned-red": "red",
+            "--orange": "orange",
+            "--yellow": "yellow",
+            "--apple-green": "appleGreen",
+            "--every-green": "green",
+            "--zenith-blue": "lightBlue",
+            "--sharp-blue": "blue",
+            "--pink": "pink",
+        };
+        return colorMap[colorVar] || colorVar.replace("--", "").replace("-", " ");
+    }
     getColorName(colorVar) {
         // Map CSS variables to language keys
         const colorMap = {
-            "--red": "red",
+            "--tuned-red": "red",
             "--orange": "orange",
             "--yellow": "yellow",
-            "--light-green": "lightGreen",
-            "--green": "green",
-            "--light-blue": "lightBlue",
-            "--blue": "blue",
+            "--apple-green": "appleGreen",
+            "--every-green": "green",
+            "--zenith-blue": "lightBlue",
+            "--sharp-blue": "blue",
             "--pink": "pink",
         };
         const languageKey = colorMap[colorVar];
@@ -495,7 +506,25 @@ export class Cycle extends LitElement {
         return html `
       <div class="cycle-container">
         ${this.type !== "icon-only"
-            ? html `<span class="cycle-label">${this.label}</span>`
+            ? html `${this.type === "language"
+                ? html `<ds-text
+                  key="language"
+                  default-value="Language"
+                  class="cycle-label"
+                ></ds-text>`
+                : this.type === "theme"
+                    ? html `<ds-text
+                    key="theme"
+                    default-value="Theme"
+                    class="cycle-label"
+                  ></ds-text>`
+                    : this.type === "accent-color"
+                        ? html `<ds-text
+                      key="accentColor"
+                      default-value="Accent color"
+                      class="cycle-label"
+                    ></ds-text>`
+                        : html `<span class="cycle-label">${this.label}</span>`}`
             : ""}
         <div
           style="display: flex; align-items: center; ${this.type === "icon-only"
@@ -515,7 +544,24 @@ export class Cycle extends LitElement {
                   style="display: inline-flex; align-items: center; gap: var(--025)"
                   >${this.getValueDisplay(this.currentValue)}</span
                 >`
-            : html `<span>${this.getValueDisplay(this.currentValue)}</span>`}
+            : this.type === "theme"
+                ? html `<ds-text
+                    key=${this.currentValue}
+                    default-value=${this.currentValue}
+                  ></ds-text>`
+                : this.type === "accent-color"
+                    ? html `<ds-text
+                      key=${this.getColorKey(this.currentValue)}
+                      default-value=${this.getColorName(this.currentValue)}
+                    ></ds-text>`
+                    : this.type === "page-style"
+                        ? html `<ds-text
+                        key=${this.currentValue}
+                        default-value=${this.currentValue}
+                      ></ds-text>`
+                        : html `<ds-text
+                        default-value=${this.getValueDisplay(this.currentValue)}
+                      ></ds-text>`}
           </ds-button>
           ${this.type === "accent-color"
             ? html `

package/dist/2-core/{ds-year.d.ts → ds-date.d.ts}

@@ -2,15 +2,15 @@ import { LitElement } from "lit";
 /**
  * A component for displaying the current year
  *
- * @element ds-year
+ * @element ds-date
  */
-export declare class Year extends LitElement {
+export declare class DateComponent extends LitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "ds-year": Year;
+        "ds-date": DateComponent;
     }
 }
-//# sourceMappingURL=ds-year.d.ts.map
+//# sourceMappingURL=ds-date.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-date.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BAOX;IAEF,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}

package/dist/2-core/{ds-year.js → ds-date.js}

@@ -2,20 +2,20 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for displaying the current year
  *
- * @element ds-year
+ * @element ds-date
  */
-export class Year extends LitElement {
+export class DateComponent extends LitElement {
     render() {
         const year = new Date().getFullYear();
         return html `<span>${year}</span>`;
     }
 }
-Year.styles = css `
+DateComponent.styles = css `
     :host {
       display: inline;
-      font-family: var(--typeface, var(--typeface-regular));
+      font-family: var(--typeface-regular, var(--typeface-regular-regular));
       font-size: inherit;
       color: inherit;
     }
   `;
-customElements.define("ds-year", Year);
+customElements.define("ds-date", DateComponent);

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

@@ -240,8 +240,8 @@ Icon.styles = css `
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      width: calc(16px * var(--scaling-factor));
-      height: calc(16px * var(--scaling-factor));
+      width: calc(16px * var(--sf));
+      height: calc(16px * var(--sf));
     }
 
     svg {
@@ -258,8 +258,8 @@ Icon.styles = css `
       display: flex;
       justify-content: center;
       align-items: center;
-      width: calc(16px * var(--scaling-factor));
-      height: calc(16px * var(--scaling-factor));
+      width: calc(16px * var(--sf));
+      height: calc(16px * var(--sf));
     }
 
     /* Notes style color variable for future implementation */

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

@@ -0,0 +1 @@
+//# sourceMappingURL=ds-input.d.ts.map

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

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

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

@@ -0,0 +1 @@
+// here should be an input component

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

@@ -31,12 +31,14 @@ export declare class Text extends LitElement {
     defaultValue: string;
     fallback: string;
     _text: string;
+    _currentLanguage: string;
     private boundHandlers;
     constructor();
     static styles: import("lit").CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: Map<string, unknown>): void;
+    _updateLanguageAttribute(): void;
     _loadText(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;GAOG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;MAOpB;IAEO,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,aAAa,CAAqC;;IAkB1D,MAAM,CAAC,MAAM,0BAQX;IAEF,iBAAiB;IAoBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,SAAS;IAgBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-text.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;;GAOG;AACH,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;MAOpB;IAEO,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,aAAa,CAAqC;;IAqB1D,MAAM,CAAC,MAAM,0BAgBX;IAEF,iBAAiB;IAsBjB,oBAAoB;IAYpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ/C,wBAAwB;IASxB,SAAS;IAiBT,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

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

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { getText } from "../utils/language";
+import { getText, currentLanguage } from "../0-face/i18n";
 /**
  * A component for displaying text from translations
  *
@@ -23,16 +23,21 @@ export class Text extends LitElement {
         this.defaultValue = "";
         this.fallback = "";
         this._text = "";
+        this._currentLanguage = currentLanguage.value;
         // Create bound event handlers for proper cleanup
         this.boundHandlers = {
             languageChanged: (() => {
                 console.log("Language changed event received in ds-text");
+                this._currentLanguage = currentLanguage.value;
                 this._loadText();
+                this.requestUpdate();
             }),
         };
     }
     connectedCallback() {
         super.connectedCallback();
+        this._currentLanguage = currentLanguage.value;
+        this._updateLanguageAttribute();
         this._loadText();
         // Listen for language changes
         window.addEventListener("language-changed", this.boundHandlers.languageChanged);
@@ -52,6 +57,15 @@ export class Text extends LitElement {
             this._loadText();
         }
     }
+    _updateLanguageAttribute() {
+        const lang = this._currentLanguage || currentLanguage.value;
+        if (lang === "ja") {
+            this.setAttribute("data-language", "ja");
+        }
+        else {
+            this.removeAttribute("data-language");
+        }
+    }
     _loadText() {
         if (!this.key) {
             this._text = this.defaultValue || this.fallback || "";
@@ -65,6 +79,7 @@ export class Text extends LitElement {
             console.error("Error loading text for key:", this.key, error);
             this._text = this.defaultValue || this.fallback || this.key;
         }
+        this._updateLanguageAttribute();
         this.requestUpdate();
     }
     render() {
@@ -74,10 +89,18 @@ export class Text extends LitElement {
 Text.styles = css `
     :host {
       display: inline;
+      font-family: var(--typeface-regular);
+      font-size: calc(var(--type-size-default) * var(--sf));
+      font-weight: var(--type-weight-default);
+      line-height: calc(var(--type-lineheight-default) * var(--sf));
+      letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));
+      text-align: var(--text-align-default);
+      text-transform: var(--text-transform-default);
+      text-decoration: var(--text-decoration-default);
     }
 
-    .loading {
-      opacity: 0.6;
+    :host([data-language="ja"]) {
+      font-family: var(--typeface-regular-jp);
     }
   `;
 customElements.define("ds-text", Text);

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

@@ -28,7 +28,7 @@ export declare class Tooltip extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
-    _loadText(): Promise<void>;
+    _loadText(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ds-tooltip.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IAEM,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,mBAAmB,CAGzB;IACF,OAAO,CAAC,iBAAiB,CAKvB;;IAsCF,MAAM,CAAC,MAAM,0BA6CX;IAEF,iBAAiB,IAAI,IAAI;IAmBzB,oBAAoB,IAAI,IAAI;IAiB5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAuBhC,MAAM;CAUP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAC;KACvB;CACF"}
+{"version":3,"file":"ds-tooltip.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;MAKf;IAEM,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,mBAAmB,CAGzB;IACF,OAAO,CAAC,iBAAiB,CAKvB;;IAsCF,MAAM,CAAC,MAAM,0BA+CX;IAEF,iBAAiB,IAAI,IAAI;IAmBzB,oBAAoB,IAAI,IAAI;IAiB5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAM5C,SAAS,IAAI,IAAI;IAiBjB,MAAM;CAUP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,OAAO,CAAC;KACvB;CACF"}

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

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { translate, getNotionText } from "../utils/language";
+import { translate } from "../0-face/i18n";
 export class Tooltip extends LitElement {
     constructor() {
         super();
@@ -58,19 +58,13 @@ export class Tooltip extends LitElement {
             this._loadText();
         }
     }
-    async _loadText() {
+    _loadText() {
         if (!this.key) {
             this._text = this.defaultValue || "";
             this.requestUpdate();
             return;
         }
         try {
-            const notionText = await getNotionText(this.key);
-            if (notionText) {
-                this._text = notionText;
-                this.requestUpdate();
-                return;
-            }
             const t = translate(this.key);
             this._text = t && t !== this.key ? t : this.defaultValue || this.key;
         }
@@ -114,19 +108,21 @@ Tooltip.styles = css `
       position: absolute;
       left: 50%;
       bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--scaling-factor)));
+      transform: translate(-50%, calc(-2px * var(--sf)));
       z-index: 1000;
       pointer-events: none;
-      height: calc(var(--08) * var(--scaling-factor));
+      height: calc(var(--08) * var(--sf));
       opacity: 0;
-      transition: opacity 120ms ease, transform 120ms ease;
+      transition:
+        opacity 120ms ease,
+        transform 120ms ease;
       background-color: light-dark(var(--black), var(--white));
       color: light-dark(var(--white), var(--black));
       border-radius: 0;
       font-size: var(--type-size-default);
-      padding: 0px calc(1px * var(--scaling-factor));
+      padding: 0px calc(1px * var(--sf));
       font-family: var(
-        --typeface,
+        --typeface-regular,
         -apple-system,
         BlinkMacSystemFont,
         "Segoe UI",

package/dist/3-unit/ds-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-list.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,MAAM,0BAOX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}
+{"version":3,"file":"ds-list.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-list.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,IAAK,SAAQ,UAAU;IAClC,MAAM,CAAC,MAAM,0BAOX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAC;KACjB;CACF"}

package/dist/3-unit/ds-list.js

@@ -1,3 +1,6 @@
+// ds-banner.ts
+// Unit component that
+// can be used to show a list of items consiting of compoentnts from core
 import { LitElement, html, css } from "lit";
 export class List extends LitElement {
     render() {

package/dist/3-unit/{ds-doublenav.d.ts → ds-portfolio-doublenav.d.ts}

@@ -2,14 +2,14 @@ import { LitElement } from "lit";
 /**
  * A component for double navigation (previous/next)
  *
- * @element ds-doublenav
+ * @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 declare class DoubleNav extends LitElement {
+export declare class PortfolioDoubleNav extends LitElement {
     static get properties(): {
         previous: {
             type: StringConstructor;
@@ -45,7 +45,7 @@ export declare class DoubleNav extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "ds-doublenav": DoubleNav;
+        "portfolio-doublenav": PortfolioDoubleNav;
     }
 }
-//# sourceMappingURL=ds-doublenav.d.ts.map
+//# sourceMappingURL=ds-portfolio-doublenav.d.ts.map

package/dist/3-unit/ds-portfolio-doublenav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-portfolio-doublenav.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-portfolio-doublenav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;;;;;;GASG;AACH,qBAAa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,KAAK,UAAU;;;;;;;;;;;;;;;;;;;;;;;MAQpB;IAEO,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;;IAWzB,MAAM,CAAC,MAAM,0BAoCX;IAEF,MAAM;CAoBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,kBAAkB,CAAC;KAC3C;CACF"}

package/dist/3-unit/{ds-doublenav.js → ds-portfolio-doublenav.js}

@@ -2,14 +2,14 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for double navigation (previous/next)
  *
- * @element ds-doublenav
+ * @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 DoubleNav extends LitElement {
+export class PortfolioDoubleNav extends LitElement {
     static get properties() {
         return {
             previous: { type: String, reflect: true },
@@ -48,7 +48,7 @@ export class DoubleNav extends LitElement {
     `;
     }
 }
-DoubleNav.styles = css `
+PortfolioDoubleNav.styles = css `
     :host {
       display: flex;
       justify-content: space-between;
@@ -85,4 +85,4 @@ DoubleNav.styles = css `
       padding-top: 3px;
     }
   `;
-customElements.define("ds-doublenav", DoubleNav);
+customElements.define("portfolio-doublenav", PortfolioDoubleNav);

package/dist/3-unit/{ds-panel.d.ts → ds-portfolio-panel.d.ts}

@@ -1,11 +1,11 @@
 import { LitElement } from "lit";
-export declare class Panel extends LitElement {
+export declare class PortfolioPanel extends LitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "ds-panel": Panel;
+        "portfolio-panel": PortfolioPanel;
     }
 }
-//# sourceMappingURL=ds-panel.d.ts.map
+//# sourceMappingURL=ds-portfolio-panel.d.ts.map

package/dist/3-unit/ds-portfolio-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-portfolio-panel.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-portfolio-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,0BAQX;IAEF,MAAM;CAGP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/dist/3-unit/{ds-panel.js → ds-portfolio-panel.js}

@@ -1,10 +1,10 @@
 import { LitElement, html, css } from "lit";
-export class Panel extends LitElement {
+export class PortfolioPanel extends LitElement {
     render() {
         return html `<slot></slot>`;
     }
 }
-Panel.styles = css `
+PortfolioPanel.styles = css `
     :host {
       display: flex;
       flex-direction: row;
@@ -13,4 +13,4 @@ Panel.styles = css `
       gap: var(--025);
     }
   `;
-customElements.define("ds-panel", Panel);
+customElements.define("portfolio-panel", PortfolioPanel);

package/dist/3-unit/{ds-singlenav.d.ts → ds-portfolio-singlenav.d.ts}

@@ -2,11 +2,11 @@ import { LitElement } from "lit";
 /**
  * A component for single navigation links
  *
- * @element ds-singlenav
+ * @element portfolio-singlenav
  * @prop {string} type - Type of navigation: "projects" or "work"
  * @prop {string} to - Optional custom destination URL
  */
-export declare class SingleNav extends LitElement {
+export declare class PortfolioSingleNav extends LitElement {
     static get properties(): {
         type: {
             type: StringConstructor;
@@ -26,7 +26,7 @@ export declare class SingleNav extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        "ds-singlenav": SingleNav;
+        "portfolio-singlenav": PortfolioSingleNav;
     }
 }
-//# sourceMappingURL=ds-singlenav.d.ts.map
+//# sourceMappingURL=ds-portfolio-singlenav.d.ts.map

package/dist/3-unit/ds-portfolio-singlenav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-portfolio-singlenav.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-portfolio-singlenav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C;;;;;;GAMG;AACH,qBAAa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,KAAK,UAAU;;;;;;;;;MAKpB;IAEO,IAAI,EAAE,UAAU,GAAG,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;;IAOpB,MAAM,CAAC,MAAM,0BAgBX;IAEF,MAAM;IAYN,OAAO,CAAC,YAAY;CAcrB;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,kBAAkB,CAAC;KAC3C;CACF"}

package/dist/3-unit/{ds-singlenav.js → ds-portfolio-singlenav.js}

@@ -2,11 +2,11 @@ import { LitElement, html, css } from "lit";
 /**
  * A component for single navigation links
  *
- * @element ds-singlenav
+ * @element portfolio-singlenav
  * @prop {string} type - Type of navigation: "projects" or "work"
  * @prop {string} to - Optional custom destination URL
  */
-export class SingleNav extends LitElement {
+export class PortfolioSingleNav extends LitElement {
     static get properties() {
         return {
             type: { type: String, reflect: true },
@@ -42,21 +42,21 @@ export class SingleNav extends LitElement {
         }
     }
 }
-SingleNav.styles = css `
+PortfolioSingleNav.styles = css `
     :host {
       display: flex;
       justify-content: end;
-      gap: calc(5px * var(--scaling-factor));
-      padding: calc(2px * var(--scaling-factor));
+      gap: calc(5px * var(--sf));
+      padding: calc(2px * var(--sf));
       align-items: center;
     }
 
     a {
       display: inline-flex;
       align-items: center;
-      gap: calc(5px * var(--scaling-factor));
+      gap: calc(5px * var(--sf));
       text-decoration: none;
       color: inherit;
     }
   `;
-customElements.define("ds-singlenav", SingleNav);
+customElements.define("portfolio-singlenav", PortfolioSingleNav);