ds-one 0.2.5-alpha.17 → 0.2.5-alpha.19

package/dist/ds-one.bundle.js

@@ -37,12 +37,12 @@ function initDeviceDetection() {
   if (deviceInfo.isMobile && typeof document !== "undefined") {
     const designWidth = 280;
     const actualWidth = deviceInfo.screenWidth;
-    const scalingFactor = actualWidth / designWidth;
-    document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
-    document.documentElement.style.setProperty("--sf", scalingFactor.toFixed(3));
+    const scalingFactor2 = actualWidth / designWidth;
+    document.documentElement.style.setProperty("--sf", scalingFactor2.toFixed(3));
+    document.documentElement.style.setProperty("--sf", scalingFactor2.toFixed(3));
     document.documentElement.classList.add("mobile");
     document.documentElement.classList.remove("desktop");
-    console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor.toFixed(2)}`);
+    console.log(`[DS one] Mobile device detected - ${deviceInfo.deviceType} (${deviceInfo.screenWidth}x${deviceInfo.screenHeight}), scaling factor: ${scalingFactor2.toFixed(2)}`);
   } else {
     if (typeof document !== "undefined") {
       document.documentElement.style.setProperty("--sf", "1");
@@ -81,6 +81,92 @@ if (typeof window !== "undefined") {
     }, 100);
   });
 }
+function applike() {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return;
+  }
+  let viewport = document.querySelector('meta[name="viewport"]');
+  if (!viewport) {
+    viewport = document.createElement("meta");
+    viewport.setAttribute("name", "viewport");
+    document.head.appendChild(viewport);
+  }
+  viewport.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
+  const style = document.createElement("style");
+  style.id = "ds-one-applike-style";
+  style.textContent = `
+    * {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+    html, body {
+      touch-action: pan-x pan-y !important;
+      -ms-touch-action: pan-x pan-y !important;
+    }
+  `;
+  const existingStyle = document.getElementById("ds-one-applike-style");
+  if (existingStyle) {
+    existingStyle.remove();
+  }
+  document.head.appendChild(style);
+  let lastTouchEnd = 0;
+  let touchStartTime = 0;
+  const preventZoom = (event) => {
+    if (event instanceof TouchEvent) {
+      if (event.touches.length > 1) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      const now = Date.now();
+      if (event.type === "touchstart") {
+        if (now - lastTouchEnd < 300) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        touchStartTime = now;
+      } else if (event.type === "touchend") {
+        const touchDuration = now - touchStartTime;
+        if (touchDuration < 300 && now - lastTouchEnd < 300) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        lastTouchEnd = now;
+      } else if (event.type === "touchmove") {
+        if (event.touches.length > 1) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+      }
+    }
+    if (event instanceof WheelEvent && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+  };
+  const options = { passive: false, capture: true };
+  document.addEventListener("touchstart", preventZoom, options);
+  document.addEventListener("touchmove", preventZoom, options);
+  document.addEventListener("touchend", preventZoom, options);
+  document.addEventListener("touchcancel", preventZoom, options);
+  document.addEventListener("wheel", preventZoom, options);
+  document.addEventListener("gesturestart", (e7) => {
+    e7.preventDefault();
+    e7.stopPropagation();
+  }, options);
+  document.addEventListener("gesturechange", (e7) => {
+    e7.preventDefault();
+    e7.stopPropagation();
+  }, options);
+  document.addEventListener("gestureend", (e7) => {
+    e7.preventDefault();
+    e7.stopPropagation();
+  }, options);
+}
 
 // dist/0-face/i18n.js
 var translationKeys = {};
@@ -1473,6 +1559,78 @@ var l3 = Signal.State;
 var o4 = Signal.Computed;
 var r4 = (l5, o9) => new Signal.State(l5, o9);
 
+// dist/0-face/scaling.js
+var defaultConfig = {
+  mode: "auto",
+  baseWidth: 280,
+  minScale: 0.75,
+  maxScale: 2
+};
+var scalingFactor = r4(1);
+var scalingConfig = r4(defaultConfig);
+function calculateScalingFactor(viewportWidth, config = scalingConfig.get()) {
+  if (config.mode === "fixed") {
+    return 1;
+  }
+  const rawScale = viewportWidth / config.baseWidth;
+  const clampedScale = Math.max(config.minScale, Math.min(config.maxScale, rawScale));
+  return Number(clampedScale.toFixed(3));
+}
+function setScalingConfig(config) {
+  const currentConfig = scalingConfig.get();
+  const newConfig = { ...currentConfig, ...config };
+  scalingConfig.set(newConfig);
+  if (typeof window !== "undefined") {
+    updateScalingFactor();
+  }
+}
+function updateScalingFactor() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+  const viewportWidth = document.documentElement.clientWidth;
+  const config = scalingConfig.get();
+  const newFactor = calculateScalingFactor(viewportWidth, config);
+  scalingFactor.set(newFactor);
+  document.documentElement.style.setProperty("--sf", newFactor.toString());
+  window.dispatchEvent(new CustomEvent("scaling-changed", {
+    detail: { scalingFactor: newFactor, config }
+  }));
+}
+function getScalingFactor() {
+  return scalingFactor.get();
+}
+function scale(designPx) {
+  return designPx * scalingFactor.get();
+}
+function unscale(scaledPx) {
+  const factor = scalingFactor.get();
+  return factor === 0 ? scaledPx : scaledPx / factor;
+}
+function initScaling() {
+  if (typeof window === "undefined") {
+    return;
+  }
+  updateScalingFactor();
+  let resizeTimeout;
+  window.addEventListener("resize", () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      updateScalingFactor();
+    }, 100);
+  });
+  window.addEventListener("orientationchange", () => {
+    setTimeout(updateScalingFactor, 100);
+  });
+}
+if (typeof window !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initScaling);
+  } else {
+    initScaling();
+  }
+}
+
 // dist/0-face/theme.js
 function getInitialTheme() {
   if (typeof window === "undefined") {
@@ -1811,6 +1969,9 @@ var o7 = s5.litElementPolyfillSupport;
 o7?.({ LitElement: i6 });
 (s5.litElementVersions ?? (s5.litElementVersions = [])).push("4.2.1");
 
+// dist/2-core/styles/ds-text.css?inline
+var ds_text_default = {};
+
 // dist/2-core/ds-text.js
 var Text = class extends i6 {
   static get properties() {
@@ -1900,36 +2061,12 @@ var Text = class extends i6 {
     return x`<span>${this._text || this.defaultValue || this.key}</span>`;
   }
 };
-Text.styles = i4`
-    :host {
-      display: inline;
-      font-family: var(--typeface-regular);
-      font-size: var(--type-size-default);
-      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);
-    }
-
-    :host([data-language="ja"]) {
-      font-family: var(--typeface-regular-jp);
-    }
-
-    :host([data-language="zh"]),
-    :host([data-language="zh-hant"]) {
-      font-family: var(--typeface-regular-zh-hant);
-      font-weight: 800;
-    }
-
-    :host([data-language="zh-hans"]) {
-      font-family: var(--typeface-regular-zh-hans);
-      font-weight: 800;
-    }
-  `;
+Text.styles = r5(ds_text_default);
 customElements.define("ds-text", Text);
 
+// dist/2-core/styles/ds-button.css?inline
+var ds_button_default = {};
+
 // dist/2-core/ds-button.js
 var Button = class extends i6 {
   constructor() {
@@ -2002,73 +2139,210 @@ Button.properties = {
   href: { type: String },
   _loading: { type: Boolean, state: true }
 };
-Button.styles = i4`
-    button {
-      max-height: calc(var(--08) * var(--sf));
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      cursor: pointer;
-      padding: 0 calc(0.5px * var(--sf));
-      color: var(--button-text-color);
-      font-family: var(--typeface-regular);
+Button.styles = r5(ds_button_default);
+customElements.define("ds-button", Button);
+
+// dist/2-core/styles/ds-banner.css?inline
+var ds_banner_default = {};
+
+// dist/2-core/ds-banner.js
+var Banner = class extends i6 {
+  constructor() {
+    super(...arguments);
+    this.textKey = "";
+    this.actionKey = "";
+    this.href = "";
+    this.mailto = "";
+    this.subjectKey = "";
+    this.describeKey = "";
+    this.appVersionKey = "";
+    this.variant = "warning";
+    this.version = "";
+    this._showVersion = false;
+    this._boundUpdate = () => this.requestUpdate();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("translations-loaded", this._boundUpdate);
+    window.addEventListener("language-changed", this._boundUpdate);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("translations-loaded", this._boundUpdate);
+    window.removeEventListener("language-changed", this._boundUpdate);
+  }
+  _toggleVersion() {
+    if (this.version) {
+      this._showVersion = !this._showVersion;
     }
+  }
+  _getMailtoHref() {
+    if (this.href && this.href !== "#")
+      return this.href;
+    if (this.mailto) {
+      try {
+        const subject = this.subjectKey ? getText(this.subjectKey) || this.subjectKey : "Issue report";
+        const describe = this.describeKey ? getText(this.describeKey) || this.describeKey : "Describe the issue:";
+        const appVersionLabel = this.appVersionKey ? getText(this.appVersionKey) || this.appVersionKey : "App version:";
+        const body = `${describe}
+
 
-    button.title {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
+${appVersionLabel} ${this.version || ""}`;
+        return `mailto:${this.mailto}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+      } catch (error) {
+        return `mailto:${this.mailto}?subject=Issue%20report&body=Describe%20the%20issue%3A%0A%0A%0AApp%20version%3A%20${this.version || ""}`;
+      }
     }
+    return "#";
+  }
+  render() {
+    const mailtoHref = this._getMailtoHref();
+    return x`
+      <div class="text-wrapper" @click=${this._toggleVersion}>
+        ${this._showVersion && this.version ? x`<ds-text default-value=${this.version}></ds-text>` : x`<ds-text key=${this.textKey}><slot></slot></ds-text>`}
+      </div>
+      ${this.actionKey ? x`
+            <div class="action-wrapper">
+              <a href=${mailtoHref}>
+                <ds-text key=${this.actionKey}></ds-text>
+              </a>
+            </div>
+          ` : ""}
+    `;
+  }
+};
+Banner.properties = {
+  textKey: { type: String, attribute: "text-key" },
+  actionKey: { type: String, attribute: "action-key" },
+  href: { type: String },
+  mailto: { type: String },
+  subjectKey: { type: String, attribute: "subject-key" },
+  describeKey: { type: String, attribute: "describe-key" },
+  appVersionKey: { type: String, attribute: "app-version-key" },
+  variant: { type: String },
+  version: { type: String },
+  _showVersion: { type: Boolean, state: true }
+};
+Banner.styles = r5(ds_banner_default);
+customElements.define("ds-banner", Banner);
 
-    button.primary {
-      background-color: var(--accent-color);
-      color: var(--button-text-color);
-      text-decoration-line: none;
-      font-family: var(--typeface-regular);
+// dist/2-core/ds-card.js
+var Card = class extends i6 {
+  constructor() {
+    super();
+    this.variant = "default";
+    this.elevation = 1;
+    this.interactive = false;
+    this.disabled = false;
+    this.padding = "medium";
+  }
+  render() {
+    return x`
+      <div class="card-content" part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+Card.properties = {
+  variant: { type: String, reflect: true },
+  elevation: { type: Number, reflect: true },
+  interactive: { type: Boolean, reflect: true },
+  disabled: { type: Boolean, reflect: true },
+  padding: { type: String, reflect: true }
+};
+Card.styles = i4`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      border-radius: calc(var(--025) * var(--sf, 1));
+      background-color: var(--card-background, var(--surface-color, #fff));
+      color: var(--text-color-primary);
+      transition:
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
     }
 
-    button.secondary {
-      background-color: var(--button-background-color-secondary);
-      color: var(--button-text-color);
-      font-family: var(--typeface-regular);
+    :host([variant="default"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
     }
 
-    button.text {
+    :host([variant="outlined"]) {
       background-color: transparent;
-      color: var(--button-color, var(--button-text-color));
-      font-family: var(--typeface-regular);
-      padding: 0;
-      text-decoration: none;
+      border: 1px solid var(--border-color, rgba(0, 0, 0, 0.2));
     }
 
-    button.text:hover {
-      opacity: 0.8;
-      text-decoration: none;
+    :host([variant="elevated"]) {
+      background-color: var(--card-background, var(--surface-color, #fff));
+      border: none;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
 
-    button[bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
+    :host([variant="filled"]) {
+      background-color: var(
+        --card-background-filled,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
     }
 
-    button[no-background] {
-      background-color: transparent;
-      max-height: var(--1);
+    :host([elevation="0"]) {
+      box-shadow: none;
+    }
+
+    :host([elevation="1"]) {
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    :host([elevation="2"]) {
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    }
+
+    :host([elevation="3"]) {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+    }
+
+    :host([interactive]) {
+      cursor: pointer;
+    }
+
+    :host([interactive]:hover:not([disabled])) {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    :host([interactive]:active:not([disabled])) {
+      transform: translateY(0);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    :host([padding="none"]) {
       padding: 0;
-      color: var(--button-color, var(--button-text-color-secondary));
     }
 
-    button[no-background][bold] {
-      font-weight: var(--type-weight-bold);
-      font-family: var(--typeface-medium);
-      color: var(--button-color, var(--button-text-color-secondary));
+    :host([padding="small"]) {
+      padding: calc(var(--025) * var(--sf, 1));
+    }
+
+    :host([padding="medium"]) {
+      padding: calc(var(--05) * var(--sf, 1));
     }
 
-    .loading {
-      opacity: 0.7;
+    :host([padding="large"]) {
+      padding: calc(var(--1) * var(--sf, 1));
+    }
+
+    .card-content {
+      width: 100%;
+      height: 100%;
     }
   `;
-customElements.define("ds-button", Button);
+customElements.define("ds-card", Card);
 
 // node_modules/lit-html/directives/unsafe-html.js
 var e6 = class extends i2 {
@@ -2088,6 +2362,9 @@ var e6 = class extends i2 {
 e6.directiveName = "unsafeHTML", e6.resultType = 1;
 var o8 = e(e6);
 
+// dist/2-core/styles/ds-icon.css?inline
+var ds_icon_default = {};
+
 // dist/2-core/ds-icon.js
 var Icon = class _Icon extends i6 {
   get type() {
@@ -2323,38 +2600,7 @@ var Icon = class _Icon extends i6 {
 Icon.properties = {
   type: { type: String, reflect: true }
 };
-Icon.styles = i4`
-    :host {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
-    }
-
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: var(--icon-color, currentColor);
-    }
-
-    path {
-      fill: var(--icon-color, currentColor);
-    }
-
-    .icon-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: calc(16px * var(--sf));
-      height: calc(16px * var(--sf));
-    }
-
-    /* Notes style color variable for future implementation */
-    :host {
-      --notes-style-color: #ffb6b9;
-    }
-  `;
+Icon.styles = r5(ds_icon_default);
 Icon.iconNameToSvgMap = (() => {
   try {
     const modules = import.meta.glob("../x Icon/*.svg", {
@@ -2378,6 +2624,9 @@ Icon.iconNameToSvgMap = (() => {
 customElements.define("ds-icon", Icon);
 console.log("Icon component registered with custom elements registry");
 
+// dist/2-core/styles/ds-cycle.css?inline
+var ds_cycle_default = {};
+
 // dist/2-core/ds-cycle.js
 var saveAccentColor = (color) => {
   localStorage.setItem("accentColor", color);
@@ -2762,28 +3011,24 @@ var Cycle = class extends i6 {
     this.setupInitialValue();
   }
 };
-Cycle.styles = i4`
-    :host {
-      display: inline-flex;
-      align-items: center;
-    }
+Cycle.styles = r5(ds_cycle_default);
+customElements.define("ds-cycle", Cycle);
 
-    .cycle {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--025);
-    }
+// dist/2-core/styles/ds-date.css?inline
+var ds_date_default = {};
 
-    .color-preview {
-      width: var(--05);
-      height: var(--05);
-      border-radius: 999px;
-      border: 1px solid
-        color-mix(in srgb, var(--text-color-primary) 20%, transparent);
-      flex: 0 0 auto;
-    }
-  `;
-customElements.define("ds-cycle", Cycle);
+// dist/2-core/ds-date.js
+var DateComponent = class extends i6 {
+  render() {
+    const year = (/* @__PURE__ */ new Date()).getFullYear();
+    return x`<span>${year}</span>`;
+  }
+};
+DateComponent.styles = r5(ds_date_default);
+customElements.define("ds-date", DateComponent);
+
+// dist/2-core/styles/ds-gap.css?inline
+var ds_gap_default = {};
 
 // dist/2-core/ds-gap.js
 var Gap = class extends i6 {
@@ -2799,81 +3044,253 @@ Gap.properties = {
   /** Raw scale token selector ("01", "025", "05", "08", "1", "2", "3", "4", "8", "12") */
   size: { type: String, reflect: true }
 };
-Gap.styles = i4`
+Gap.styles = r5(ds_gap_default);
+customElements.define("ds-gap", Gap);
+
+// dist/2-core/ds-input.js
+var Input = class extends i6 {
+  constructor() {
+    super();
+    this.type = "text";
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.placeholderKey = "";
+    this.label = "";
+    this.labelKey = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.autofocus = false;
+    this.autocomplete = "off";
+    this.pattern = "";
+    this.minlength = 0;
+    this.maxlength = 0;
+    this.min = "";
+    this.max = "";
+    this.step = "";
+    this.variant = "default";
+    this.error = "";
+    this.errorKey = "";
+    this._focused = false;
+  }
+  _handleInput(e7) {
+    const target = e7.target;
+    this.value = target.value;
+    this.dispatchEvent(new CustomEvent("input-change", {
+      detail: { value: this.value, name: this.name },
+      bubbles: true
+    }));
+  }
+  _handleFocus() {
+    this._focused = true;
+    this.dispatchEvent(new CustomEvent("input-focus", { bubbles: true }));
+  }
+  _handleBlur() {
+    this._focused = false;
+    this.dispatchEvent(new CustomEvent("input-blur", { bubbles: true }));
+  }
+  /**
+   * Focus the input element
+   */
+  focus() {
+    const input = this.shadowRoot?.querySelector("input");
+    input?.focus();
+  }
+  /**
+   * Blur the input element
+   */
+  blur() {
+    const input = this.shadowRoot?.querySelector("input");
+    input?.blur();
+  }
+  /**
+   * Select all text in the input
+   */
+  select() {
+    const input = this.shadowRoot?.querySelector("input");
+    input?.select();
+  }
+  render() {
+    const hasError = Boolean(this.error || this.errorKey);
+    return x`
+      <div class="input-wrapper">
+        ${this.label || this.labelKey ? x`
+              <label for="input">
+                ${this.labelKey ? x`<ds-text .key=${this.labelKey}></ds-text>` : this.label}
+              </label>
+            ` : null}
+
+        <div class="input-container">
+          <input
+            id="input"
+            .type=${this.type}
+            .name=${this.name}
+            .value=${this.value}
+            .placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            ?autofocus=${this.autofocus}
+            autocomplete=${this.autocomplete}
+            pattern=${this.pattern || ""}
+            minlength=${this.minlength || ""}
+            maxlength=${this.maxlength || ""}
+            min=${this.min}
+            max=${this.max}
+            step=${this.step}
+            class=${hasError ? "has-error" : ""}
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+          />
+        </div>
+
+        ${hasError ? x`
+              <div class="error-message">
+                ${this.errorKey ? x`<ds-text .key=${this.errorKey}></ds-text>` : this.error}
+              </div>
+            ` : null}
+      </div>
+    `;
+  }
+};
+Input.properties = {
+  type: { type: String, reflect: true },
+  name: { type: String, reflect: true },
+  value: { type: String },
+  placeholder: { type: String },
+  placeholderKey: { type: String, attribute: "placeholder-key" },
+  label: { type: String },
+  labelKey: { type: String, attribute: "label-key" },
+  disabled: { type: Boolean, reflect: true },
+  readonly: { type: Boolean, reflect: true },
+  required: { type: Boolean, reflect: true },
+  autofocus: { type: Boolean },
+  autocomplete: { type: String },
+  pattern: { type: String },
+  minlength: { type: Number },
+  maxlength: { type: Number },
+  min: { type: String },
+  max: { type: String },
+  step: { type: String },
+  variant: { type: String, reflect: true },
+  error: { type: String },
+  errorKey: { type: String, attribute: "error-key" },
+  _focused: { type: Boolean, state: true }
+};
+Input.styles = i4`
     :host {
       display: block;
       width: 100%;
-      /* Default if no attribute is provided */
-      --gap-size: var(--unit);
-      height: var(--gap-size);
-      flex: 0 0 auto;
     }
 
-    /* Semantic sizing tokens (from DS1/1-root/one.css) */
-    :host([tenth]) {
-      --gap-size: var(--tenth);
-    }
-    :host([quarter]) {
-      --gap-size: var(--quarter);
-    }
-    :host([half]) {
-      --gap-size: var(--half);
-    }
-    :host([eight-tenth]) {
-      --gap-size: var(--eight-tenth);
-    }
-    :host([unit]) {
-      --gap-size: var(--unit);
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--025) * var(--sf, 1));
+      width: 100%;
     }
-    :host([double]) {
-      --gap-size: var(--double);
+
+    label {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--text-color-secondary);
     }
-    :host([triple]) {
-      --gap-size: var(--triple);
+
+    .input-container {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
     }
-    :host([quad]) {
-      --gap-size: var(--quad);
+
+    input {
+      width: 100%;
+      height: calc(var(--1) * var(--sf, 1));
+      padding: 0 calc(var(--025) * var(--sf, 1));
+      font-family: var(--typeface-regular);
+      font-size: calc(14px * var(--sf, 1));
+      color: var(--text-color-primary);
+      background-color: var(--input-background, transparent);
+      border: 1px solid var(--input-border-color, var(--border-color, #ccc));
+      border-radius: calc(var(--025) * var(--sf, 1));
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+      box-sizing: border-box;
     }
-    :host([oct]) {
-      --gap-size: var(--oct);
+
+    input::placeholder {
+      color: var(--text-color-tertiary, #999);
     }
-    :host([dozen]) {
-      --gap-size: var(--dozen);
+
+    input:focus {
+      border-color: var(--accent-color, #007aff);
+      box-shadow: 0 0 0 2px var(--input-focus-ring, rgba(0, 122, 255, 0.2));
     }
 
-    /* Raw scale sizing (size="...") */
-    :host([size="01"]) {
-      --gap-size: var(--01);
+    input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--input-disabled-background, #f5f5f5);
     }
-    :host([size="025"]) {
-      --gap-size: var(--025);
+
+    input:read-only {
+      background-color: var(--input-readonly-background, #fafafa);
     }
-    :host([size="05"]) {
-      --gap-size: var(--05);
+
+    :host([variant="filled"]) input {
+      background-color: var(
+        --input-filled-background,
+        var(--surface-color-secondary, #f5f5f5)
+      );
+      border: none;
+      border-bottom: 2px solid var(--border-color, #ccc);
+      border-radius: calc(var(--025) * var(--sf, 1))
+        calc(var(--025) * var(--sf, 1)) 0 0;
     }
-    :host([size="08"]) {
-      --gap-size: var(--08);
+
+    :host([variant="filled"]) input:focus {
+      border-bottom-color: var(--accent-color, #007aff);
+      box-shadow: none;
     }
-    :host([size="1"]) {
-      --gap-size: var(--1);
+
+    :host([variant="outlined"]) input {
+      background-color: transparent;
+      border: 2px solid var(--border-color, #ccc);
     }
-    :host([size="2"]) {
-      --gap-size: var(--2);
+
+    :host([variant="outlined"]) input:focus {
+      border-color: var(--accent-color, #007aff);
     }
-    :host([size="3"]) {
-      --gap-size: var(--3);
+
+    .error-message {
+      font-family: var(--typeface-regular);
+      font-size: calc(12px * var(--sf, 1));
+      color: var(--error-color, #ff3b30);
+      margin-top: calc(var(--025) * var(--sf, 1));
     }
-    :host([size="4"]) {
-      --gap-size: var(--4);
+
+    :host([required]) label::after {
+      content: " *";
+      color: var(--error-color, #ff3b30);
     }
-    :host([size="8"]) {
-      --gap-size: var(--8);
+
+    /* Error state */
+    input.has-error {
+      border-color: var(--error-color, #ff3b30);
     }
-    :host([size="12"]) {
-      --gap-size: var(--12);
+
+    input.has-error:focus {
+      box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.2);
     }
   `;
-customElements.define("ds-gap", Gap);
+customElements.define("ds-input", Input);
+
+// dist/2-core/styles/ds-tooltip.css?inline
+var ds_tooltip_default = {};
 
 // dist/2-core/ds-tooltip.js
 var Tooltip = class extends i6 {
@@ -2963,88 +3380,11 @@ Tooltip.properties = {
   _text: { state: true },
   _visible: { state: true }
 };
-Tooltip.styles = i4`
-    :host {
-      position: relative;
-      display: inline-block;
-    }
+Tooltip.styles = r5(ds_tooltip_default);
+customElements.define("ds-tooltip", Tooltip);
 
-    .slot-wrapper {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .bubble {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      left: 50%;
-      bottom: 100%;
-      transform: translate(-50%, calc(-2px * var(--sf)));
-      z-index: 1000;
-      pointer-events: none;
-      height: calc(var(--08) * var(--sf));
-      opacity: 0;
-      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(--sf));
-      font-family: var(
-        --typeface-regular,
-        -apple-system,
-        BlinkMacSystemFont,
-        "Segoe UI",
-        Roboto,
-        sans-serif
-      );
-      font-weight: 500;
-      white-space: nowrap;
-      min-width: max-content;
-    }
-
-    .bubble.visible {
-      opacity: 1;
-    }
-  `;
-customElements.define("ds-tooltip", Tooltip);
-
-// dist/2-core/ds-date.js
-var DateComponent = class extends i6 {
-  render() {
-    const year = (/* @__PURE__ */ new Date()).getFullYear();
-    return x`<span>${year}</span>`;
-  }
-};
-DateComponent.styles = i4`
-    :host {
-      display: inline;
-      font-family: var(--typeface-regular, var(--typeface-regular-regular));
-      font-size: inherit;
-      color: inherit;
-    }
-  `;
-customElements.define("ds-date", DateComponent);
-
-// dist/3-unit/ds-list.js
-var List = class extends i6 {
-  render() {
-    return x`<slot></slot>`;
-  }
-};
-List.styles = i4`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-      width: 100%;
-    }
-  `;
-customElements.define("ds-list", List);
+// dist/3-unit/styles/ds-row.css?inline
+var ds_row_default = {};
 
 // dist/3-unit/ds-row.js
 var Row = class extends i6 {
@@ -3059,26 +3399,12 @@ var Row = class extends i6 {
 Row.properties = {
   type: { type: String, reflect: true }
 };
-Row.styles = i4`
-    :host {
-      display: flex;
-      align-items: end;
-      width: calc(240px * var(--sf));
-    }
-
-    :host([type="fill"]) {
-      justify-content: space-between;
-      height: calc(var(--1) * var(--sf));
-    }
-
-    :host([type="centered"]) {
-      justify-content: center;
-      height: calc(var(--1) * var(--sf));
-      gap: calc(var(--025) * var(--sf));
-    }
-  `;
+Row.styles = r5(ds_row_default);
 customElements.define("ds-row", Row);
 
+// dist/3-unit/styles/ds-accordion.css?inline
+var ds_accordion_default = {};
+
 // dist/3-unit/ds-accordion.js
 var Accordion = class extends i6 {
   constructor() {
@@ -3121,52 +3447,235 @@ Accordion.properties = {
   detailsKey: { type: String, attribute: "details-key" },
   open: { type: Boolean, reflect: true }
 };
-Accordion.styles = i4`
+Accordion.styles = r5(ds_accordion_default);
+customElements.define("ds-accordion", Accordion);
+
+// dist/3-unit/ds-form.js
+var Form = class extends i6 {
+  constructor() {
+    super();
+    this.action = "";
+    this.method = "post";
+    this.name = "";
+    this.novalidate = false;
+    this.autocomplete = "on";
+    this._isSubmitting = false;
+  }
+  /**
+   * Get all form data as an object
+   */
+  getFormData() {
+    const data = {};
+    const slot = this.shadowRoot?.querySelector("slot");
+    const elements = slot?.assignedElements({ flatten: true }) || [];
+    for (const element of elements) {
+      this._collectFormData(element, data);
+    }
+    return data;
+  }
+  _collectFormData(element, data) {
+    const name = element.getAttribute("name") || element.name;
+    if (name) {
+      const value = element.value;
+      if (value !== void 0) {
+        if (element instanceof HTMLInputElement && (element.type === "checkbox" || element.type === "radio")) {
+          if (element.type === "checkbox") {
+            data[name] = element.checked;
+          } else if (element.type === "radio" && element.checked) {
+            data[name] = value;
+          }
+        } else {
+          data[name] = value;
+        }
+      }
+    }
+    const children = element.shadowRoot?.querySelectorAll("*") || element.querySelectorAll("*");
+    children.forEach((child) => {
+      this._collectFormData(child, data);
+    });
+  }
+  /**
+   * Validate the form
+   */
+  validate() {
+    const result = {
+      valid: true,
+      errors: {}
+    };
+    if (this.novalidate) {
+      return result;
+    }
+    const slot = this.shadowRoot?.querySelector("slot");
+    const elements = slot?.assignedElements({ flatten: true }) || [];
+    for (const element of elements) {
+      this._validateElement(element, result);
+    }
+    return result;
+  }
+  _validateElement(element, result) {
+    const name = element.getAttribute("name") || element.name;
+    if (element.tagName.toLowerCase() === "ds-input") {
+      const input = element;
+      if (input.required && !input.value) {
+        result.valid = false;
+        result.errors[name || "unknown"] = "This field is required";
+      }
+    }
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+      if (!element.checkValidity()) {
+        result.valid = false;
+        result.errors[name || "unknown"] = element.validationMessage;
+      }
+    }
+    const children = element.shadowRoot?.querySelectorAll("*") || element.querySelectorAll("*");
+    children.forEach((child) => {
+      this._validateElement(child, result);
+    });
+  }
+  /**
+   * Reset the form
+   */
+  reset() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    const elements = slot?.assignedElements({ flatten: true }) || [];
+    for (const element of elements) {
+      this._resetElement(element);
+    }
+    this.dispatchEvent(new CustomEvent("form-reset", { bubbles: true }));
+  }
+  _resetElement(element) {
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+      if (element instanceof HTMLInputElement && element.type === "checkbox") {
+        element.checked = false;
+      } else {
+        element.value = "";
+      }
+    }
+    if (element.tagName.toLowerCase() === "ds-input") {
+      element.value = "";
+    }
+    const children = element.shadowRoot?.querySelectorAll("*") || element.querySelectorAll("*");
+    children.forEach((child) => {
+      this._resetElement(child);
+    });
+  }
+  /**
+   * Submit the form
+   */
+  async submit() {
+    if (this._isSubmitting)
+      return;
+    const validationResult = this.validate();
+    if (!validationResult.valid) {
+      this.dispatchEvent(new CustomEvent("form-invalid", {
+        detail: validationResult.errors,
+        bubbles: true
+      }));
+      return;
+    }
+    this._isSubmitting = true;
+    const formData = this.getFormData();
+    this.dispatchEvent(new CustomEvent("form-submit", {
+      detail: { data: formData },
+      bubbles: true
+    }));
+    if (this.action) {
+      try {
+        const response = await fetch(this.action, {
+          method: this.method.toUpperCase(),
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(formData)
+        });
+        this.dispatchEvent(new CustomEvent("form-response", {
+          detail: { response, data: formData },
+          bubbles: true
+        }));
+      } catch (error) {
+        this.dispatchEvent(new CustomEvent("form-error", {
+          detail: { error, data: formData },
+          bubbles: true
+        }));
+      }
+    }
+    this._isSubmitting = false;
+  }
+  _handleSubmit(e7) {
+    e7.preventDefault();
+    this.submit();
+  }
+  _handleKeydown(e7) {
+    if (e7.key === "Enter" && !e7.shiftKey) {
+      const target = e7.target;
+      if (target.tagName.toLowerCase() !== "textarea") {
+        e7.preventDefault();
+        this.submit();
+      }
+    }
+  }
+  render() {
+    return x`
+      <form
+        .action=${this.action}
+        .method=${this.method}
+        .name=${this.name}
+        ?novalidate=${this.novalidate}
+        autocomplete=${this.autocomplete}
+        @submit=${this._handleSubmit}
+        @keydown=${this._handleKeydown}
+      >
+        <slot></slot>
+      </form>
+    `;
+  }
+};
+Form.properties = {
+  action: { type: String },
+  method: { type: String },
+  name: { type: String },
+  novalidate: { type: Boolean, reflect: true },
+  autocomplete: { type: String },
+  _isSubmitting: { type: Boolean, state: true }
+};
+Form.styles = i4`
     :host {
       display: block;
-      width: calc(240px * var(--sf));
-      color: var(--text-color-primary);
-    }
-
-    details {
       width: 100%;
     }
 
-    summary {
-      cursor: pointer;
-      user-select: none;
-      list-style: none;
-      outline: none;
-    }
-
-    summary::-webkit-details-marker {
-      display: none;
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--05) * var(--sf, 1));
+      width: 100%;
     }
 
-    .summaryRow {
+    ::slotted(*) {
       width: 100%;
     }
 
-    ds-icon.chevron {
-      transform: rotate(0deg);
-      transition: transform 140ms ease;
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
     }
+  `;
+customElements.define("ds-form", Form);
 
-    details[open] ds-icon.chevron {
-      transform: rotate(180deg);
-    }
+// dist/3-unit/styles/ds-list.css?inline
+var ds_list_default = {};
 
-    .detailsBody {
-      padding-top: calc(var(--half) * var(--sf));
-    }
+// dist/3-unit/ds-list.js
+var List = class extends i6 {
+  render() {
+    return x`<slot></slot>`;
+  }
+};
+List.styles = r5(ds_list_default);
+customElements.define("ds-list", List);
 
-    .detailsText {
-      display: block;
-      white-space: normal;
-      text-align: left;
-    }
-  `;
-customElements.define("ds-accordion", Accordion);
+// dist/3-unit/styles/ds-table.css?inline
+var ds_table_default = {};
 
 // dist/3-unit/ds-table.js
 var DsTable = class extends i6 {
@@ -3204,134 +3713,24 @@ DsTable.properties = {
   columns: { type: Array },
   showStatus: { type: Boolean, attribute: "show-status" }
 };
-DsTable.styles = i4`
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    .table-container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-
-    .table-header {
-      display: grid;
-      grid-template-columns: 160px 80px 80px 80px;
-      height: 20px;
-      width: 400px;
-    }
-
-    .table-body {
-      display: grid;
-      grid-template-columns: 160px 80px 80px 80px;
-      border: 1px solid var(--black);
-      width: 400px;
-    }
-
-    .header-cell {
-      height: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: left;
-      padding: 0 2px;
-      font-family: var(--typeface-regular);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: var(--type-lineheight-default);
-      color: var(--black);
-      letter-spacing: -0.26px;
-    }
-
-    .data-cell {
-      height: 20px;
-      margin-top: -1px;
-      display: flex;
-      align-items: center;
-      justify-content: left;
-
-      outline: 1px solid var(--black);
-
-      font-family: var(--typeface-regular);
-      font-size: var(--type-size-default);
-      font-weight: var(--type-weight-default);
-      line-height: var(--type-lineheight-default);
-      color: var(--black);
-      letter-spacing: -0.26px;
-    }
-
-    .status-cell {
-      background-color: var(--apple-green);
-    }
-
-    .product-cell {
-      text-align: left;
-      justify-content: flex-start;
-    }
-
-    .users-cell,
-    .retention-cell {
-      text-align: center;
-    }
-
-    .status-cell {
-      text-align: center;
-    }
-
-    /* Responsive adjustments */
-    @media (max-width: 480px) {
-      .table-header,
-      .table-body {
-        width: 100%;
-        grid-template-columns: 1fr 60px 60px 60px;
-      }
-    }
-  `;
+DsTable.styles = r5(ds_table_default);
 customElements.define("ds-table", DsTable);
 
+// dist/4-page/styles/ds-container.css?inline
+var ds_container_default = {};
+
 // dist/4-page/ds-container.js
 var Container = class extends i6 {
   render() {
     return x`<slot></slot>`;
   }
 };
-Container.styles = i4`
-    :host {
-      display: flex;
-      width: 100%;
-      max-width: 100%;
-      flex-direction: column;
-      background-color: var(--background-color);
-      box-sizing: border-box;
-    }
-
-    /* Ensure children don't overflow */
-    :host ::slotted(*) {
-      max-width: 100%;
-      box-sizing: border-box;
-    }
-
-    /* Mobile: 100% width */
-    @media (max-width: 820px) {
-      :host {
-        width: 100%;
-        max-width: 100%;
-      }
-    }
-
-    /* Desktop: max-width 1000px, centered */
-    @media (min-width: 821px) {
-      :host {
-        max-width: 1000px;
-        margin-left: auto;
-        margin-right: auto;
-        width: 100%;
-      }
-    }
-  `;
+Container.styles = r5(ds_container_default);
 customElements.define("ds-container", Container);
 
+// dist/4-page/styles/ds-grid.css?inline
+var ds_grid_default = {};
+
 // dist/4-page/ds-grid.js
 var Grid = class extends i6 {
   connectedCallback() {
@@ -3373,63 +3772,12 @@ var Grid = class extends i6 {
 Grid.properties = {
   align: { type: String }
 };
-Grid.styles = i4`
-    :host {
-      margin-top: 0.5px !important;
-      margin-left: 0.5px !important;
-      display: grid;
-      width: 1440px;
-      height: 1280px;
-      grid-template-columns: repeat(auto-fill, 19px);
-      grid-template-rows: repeat(auto-fill, 19px);
-      gap: 1px;
-      row-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      column-rule: calc(1px * var(--sf)) solid var(--grid-color);
-      outline: calc(1px * var(--sf)) solid var(--yellow);
-      position: fixed;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-    }
-
-    /* DO NOT CHANGE THIS GRID CODE FOR MOBILE. ITS PERFECT FOR MOBILE. */
-    :host(.mobile) {
-      width: calc(100% - calc(1px * var(--sf)));
-      max-width: 100vw;
-      margin-left: 0.5px !important;
-      margin-top: 0 !important;
-      box-sizing: border-box;
-      position: fixed;
-      top: calc(0.5px * var(--sf));
-      left: 50%;
-      transform: translateX(-50%);
-      pointer-events: none;
-      z-index: 300;
-      gap: calc(1px * var(--sf));
-      grid-template-columns: repeat(14, calc(19px * var(--sf)));
-      grid-template-rows: repeat(auto-fill, calc(19px * var(--sf)));
-    }
-
-    :host([align="left"]) {
-      left: 0;
-      transform: none;
-    }
-
-    :host([align="center"]) {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    :host([align="right"]) {
-      left: auto;
-      right: 0;
-      transform: none;
-    }
-  `;
+Grid.styles = r5(ds_grid_default);
 customElements.define("ds-grid", Grid);
 
+// dist/4-page/styles/ds-layout.css?inline
+var ds_layout_default = {};
+
 // dist/4-page/ds-layout.js
 var Layout = class extends i6 {
   constructor() {
@@ -3441,57 +3789,184 @@ var Layout = class extends i6 {
     const isPortfolio = this.mode === "portfolio";
     const isCompany = this.mode === "company";
     const isApp = this.mode === "app";
+    const isList = this.mode === "list";
+    const isHome = this.mode === "home";
     return x`
       <slot></slot>
       ${isView ? x`
             <div class="view-overlay">
-              ${isApp ? x`
+              ${isHome ? x`
                     <div class="view-area view-banner">
-                      <ds-text key="banner">banner</ds-text>
+                      <div class="grid-area-label">
+                        <ds-text key="banner" default-value="banner"></ds-text>
+                      </div>
                     </div>
                     <div class="view-area view-header">
-                      <ds-text key="header">header</ds-text>
+                      <div class="grid-area-label">
+                        <ds-text key="header" default-value="header"></ds-text>
+                      </div>
                     </div>
-
-                    <div class="view-area view-main">
-                      <ds-text key="main">main</ds-text>
+                    <div class="view-area view-message">
+                      <div class="grid-area-label">
+                        <ds-text
+                          key="message"
+                          default-value="message"
+                        ></ds-text>
+                      </div>
                     </div>
-                    <div class="view-area view-footer">
-                      <ds-text key="footer">footer</ds-text>
+                    <div class="view-area view-lists">
+                      <div class="grid-area-label">
+                        <ds-text key="lists" default-value="lists"></ds-text>
+                      </div>
                     </div>
-                  ` : isCompany ? x`
-                      <div class="view-area view-header">
-                        <ds-text key="header">header</ds-text>
+                    <div class="view-area view-footer">
+                      <div class="grid-area-label">
+                        <ds-text key="footer" default-value="footer"></ds-text>
                       </div>
-                      <div class="view-area view-content">
-                        <ds-text key="content">content</ds-text>
+                    </div>
+                  ` : isList ? x`
+                      <div class="view-area view-banner">
+                        <div class="grid-area-label">
+                          <ds-text
+                            key="banner"
+                            default-value="banner"
+                          ></ds-text>
+                        </div>
                       </div>
-                      <div class="view-area view-footer">
-                        <ds-text key="footer">footer</ds-text>
+                      <div class="view-area view-header">
+                        <div class="grid-area-label">
+                          <ds-text
+                            key="header"
+                            default-value="header"
+                          ></ds-text>
+                        </div>
                       </div>
-                    ` : isPortfolio ? x`
-                        <div class="view-area view-square">
-                          <ds-text key="square">square</ds-text>
+                      <div class="view-area view-board">
+                        <div class="grid-area-label">
+                          <ds-text key="board" default-value="board"></ds-text>
                         </div>
-                        <div class="view-area view-title">
-                          <ds-text key="title">title</ds-text>
+                      </div>
+                    ` : isApp ? x`
+                        <div class="view-area view-banner">
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="banner"
+                              default-value="banner"
+                            ></ds-text>
+                          </div>
                         </div>
                         <div class="view-area view-header">
-                          <ds-text key="header">header</ds-text>
-                        </div>
-                        <div class="view-area view-projects">
-                          <ds-text key="projects">projects</ds-text>
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="header"
+                              default-value="header"
+                            ></ds-text>
+                          </div>
                         </div>
-                        <div class="view-area view-bio">
-                          <ds-text key="bio">bio</ds-text>
+                        <div class="view-area view-main">
+                          <div class="grid-area-label">
+                            <ds-text key="main" default-value="main"></ds-text>
+                          </div>
                         </div>
-                        <div class="view-area view-nav">
-                          <ds-text key="nav">nav</ds-text>
+                        <div class="view-area view-page-dots">
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="pageDots"
+                              default-value="page-dots"
+                            ></ds-text>
+                          </div>
                         </div>
                         <div class="view-area view-footer">
-                          <ds-text key="footer">footer</ds-text>
+                          <div class="grid-area-label">
+                            <ds-text
+                              key="footer"
+                              default-value="footer"
+                            ></ds-text>
+                          </div>
                         </div>
-                      ` : ""}
+                      ` : isCompany ? x`
+                          <div class="view-area view-header">
+                            <div class="grid-area-label">
+                              <ds-text
+                                key="header"
+                                default-value="header"
+                              ></ds-text>
+                            </div>
+                          </div>
+                          <div class="view-area view-content">
+                            <div class="grid-area-label">
+                              <ds-text
+                                key="content"
+                                default-value="content"
+                              ></ds-text>
+                            </div>
+                          </div>
+                          <div class="view-area view-footer">
+                            <div class="grid-area-label">
+                              <ds-text
+                                key="footer"
+                                default-value="footer"
+                              ></ds-text>
+                            </div>
+                          </div>
+                        ` : isPortfolio ? x`
+                            <div class="view-area view-square">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="square"
+                                  default-value="square"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-title">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="title"
+                                  default-value="title"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-header">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="header"
+                                  default-value="header"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-projects">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="projects"
+                                  default-value="projects"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-bio">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="bio"
+                                  default-value="bio"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-nav">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="nav"
+                                  default-value="nav"
+                                ></ds-text>
+                              </div>
+                            </div>
+                            <div class="view-area view-footer">
+                              <div class="grid-area-label">
+                                <ds-text
+                                  key="footer"
+                                  default-value="footer"
+                                ></ds-text>
+                              </div>
+                            </div>
+                          ` : ""}
             </div>
           ` : ""}
     `;
@@ -3502,7 +3977,9 @@ Layout.properties = {
   align: { type: String },
   view: { type: Boolean }
 };
-Layout.styles = i4`
+Layout.styles = [
+  r5(ds_layout_default),
+  i4`
     :host {
       display: grid;
       position: relative;
@@ -3558,7 +4035,9 @@ Layout.styles = i4`
     :host([align="left"]),
     :host([mode="portfolio"][align="left"]),
     :host([mode="company"][align="left"]),
-    :host([mode="app"][align="left"]) {
+    :host([mode="app"][align="left"]),
+    :host([mode="list"][align="left"]),
+    :host([mode="home"][align="left"]) {
       margin: 0;
       justify-self: start;
     }
@@ -3566,7 +4045,9 @@ Layout.styles = i4`
     :host([align="center"]),
     :host([mode="portfolio"][align="center"]),
     :host([mode="company"][align="center"]),
-    :host([mode="app"][align="center"]) {
+    :host([mode="app"][align="center"]),
+    :host([mode="list"][align="center"]),
+    :host([mode="home"][align="center"]) {
       margin: 0 auto;
       justify-self: center;
     }
@@ -3574,7 +4055,9 @@ Layout.styles = i4`
     :host([align="right"]),
     :host([mode="portfolio"][align="right"]),
     :host([mode="company"][align="right"]),
-    :host([mode="app"][align="right"]) {
+    :host([mode="app"][align="right"]),
+    :host([mode="list"][align="right"]),
+    :host([mode="home"][align="right"]) {
       margin: 0 0 0 auto;
       justify-self: end;
     }
@@ -3582,20 +4065,10 @@ Layout.styles = i4`
     /* App mode - Base */
     :host([mode="app"]) {
       --app-cols: 100%;
-      --app-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
-        calc(var(--unit) * var(--sf)) calc(var(--double) * var(--sf))
-        calc(var(--dozen) * var(--sf)) calc(var(--quad) * var(--sf))
-        calc(var(--unit) * var(--sf));
-      --app-areas: "banner" "." "header" "." "main" "." "footer";
       --app-overlay-cols: 100%;
-      --app-overlay-rows: calc(var(--unit) * var(--sf))
-        calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
-        calc(var(--double) * var(--sf)) calc(var(--dozen) * var(--sf))
-        calc(var(--quad) * var(--sf)) calc(var(--unit) * var(--sf));
-      --app-overlay-areas: "banner" "." "header" "." "main" "." "footer";
       grid-template-columns: var(--app-cols);
-      grid-template-rows: var(--app-rows);
-      grid-template-areas: var(--app-areas);
+      grid-template-rows: var(--app-layout);
+      grid-template-areas: var(--app-layout-areas);
       min-height: 100vh;
       background-color: transparent;
       width: calc(240px * var(--sf, 1));
@@ -3605,8 +4078,58 @@ Layout.styles = i4`
 
     :host([mode="app"]) .view-overlay {
       grid-template-columns: var(--app-overlay-cols);
-      grid-template-rows: var(--app-overlay-rows);
-      grid-template-areas: var(--app-overlay-areas);
+      grid-template-rows: var(--app-layout);
+      grid-template-areas: var(--app-layout-areas);
+    }
+
+    /* List mode - Base */
+    :host([mode="list"]) {
+      --list-cols: 100%;
+      --list-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+        calc(var(--unit) * var(--sf)) calc(var(--twenty) * var(--sf));
+      --list-areas: "banner" "." "header" "board";
+      --list-overlay-cols: 100%;
+      --list-overlay-rows: calc(var(--unit) * var(--sf))
+        calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+        calc(var(--twenty) * var(--sf));
+      --list-overlay-areas: "banner" "." "header" "board";
+      grid-template-columns: var(--list-cols);
+      grid-template-rows: var(--list-rows);
+      grid-template-areas: var(--list-areas);
+      min-height: 100vh;
+      background-color: transparent;
+      width: calc(240px * var(--sf, 1));
+      max-width: calc(240px * var(--sf, 1));
+      margin: 0 auto;
+    }
+
+    :host([mode="list"]) .view-overlay {
+      grid-template-columns: var(--list-overlay-cols);
+      grid-template-rows: var(--list-overlay-rows);
+      grid-template-areas: var(--list-overlay-areas);
+    }
+
+    /* Home mode - Base */
+    :host([mode="home"]) {
+      --home-cols: 100%;
+      --home-areas: "banner" "." "header" "." "message" "lists" "." "footer";
+      --home-overlay-cols: 100%;
+      --home-overlay-areas: "banner" "." "header" "." "message" "lists" "."
+        "footer";
+      grid-template-columns: var(--home-cols);
+      grid-template-rows: var(--home-layout);
+      grid-template-areas: var(--home-areas);
+      min-height: 100vh;
+      background-color: transparent;
+      width: calc(240px * var(--sf, 1));
+      max-width: calc(240px * var(--sf, 1));
+      margin: 0 auto;
+    }
+
+    :host([mode="home"]) .view-overlay {
+      grid-template-columns: var(--home-overlay-cols);
+      grid-template-rows: var(--home-layout);
+      grid-template-areas: var(--home-overlay-areas);
     }
 
     .view-overlay {
@@ -3636,52 +4159,333 @@ Layout.styles = i4`
         transparent
       );
       opacity: 1;
+      position: relative;
+    }
+
+    .grid-area-label {
+      position: absolute;
+      top: calc(-20px * var(--sf, 1));
+      left: 0;
+      height: calc(20px * var(--sf, 1));
+      width: fit-content;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 calc(4px * var(--sf, 1));
+      border-radius: calc(2px * var(--sf, 1));
+      z-index: 10000;
+      pointer-events: none;
+      white-space: nowrap;
+    }
+
+    /* Banner label stays inside the area (first item) */
+    :host([mode="app"]) .view-area.view-banner .grid-area-label,
+    :host([mode="list"]) .view-area.view-banner .grid-area-label,
+    :host([mode="home"]) .view-area.view-banner .grid-area-label,
+    :host([mode="company"]) .view-area.view-header .grid-area-label,
+    :host([mode="portfolio"]) .view-area.view-square .grid-area-label {
+      top: 0;
+    }
+
+    .grid-area-label ds-text {
+      font-size: calc(11px * var(--sf, 1));
+      line-height: 1;
+      color: white;
+      text-transform: lowercase;
     }
 
     :host([mode="portfolio"]) .view-area:nth-of-type(1) {
       background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
     }
+    :host([mode="portfolio"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
     :host([mode="portfolio"]) .view-area:nth-of-type(2) {
       border-color: var(--sharp-blue);
     }
+    :host([mode="portfolio"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
     :host([mode="portfolio"]) .view-area:nth-of-type(3) {
       border-color: var(--yellow);
     }
+    :host([mode="portfolio"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
     :host([mode="portfolio"]) .view-area:nth-of-type(4) {
       border-color: var(--apple-green);
     }
+    :host([mode="portfolio"]) .view-area:nth-of-type(4) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+        );
+    }
     :host([mode="portfolio"]) .view-area:nth-of-type(5) {
       border-color: var(--pink);
     }
+    :host([mode="portfolio"]) .view-area:nth-of-type(5) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--pink) 70%, black) 0%,
+          color-mix(in srgb, var(--pink) 70%, black) 100%
+        );
+    }
     :host([mode="portfolio"]) .view-area:nth-of-type(6) {
       border-color: var(--orange);
     }
+    :host([mode="portfolio"]) .view-area:nth-of-type(6) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--orange) 70%, black) 0%,
+          color-mix(in srgb, var(--orange) 70%, black) 100%
+        );
+    }
     :host([mode="portfolio"]) .view-area:nth-of-type(7) {
       border-color: var(--zenith-blue);
     }
+    :host([mode="portfolio"]) .view-area:nth-of-type(7) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--zenith-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--zenith-blue) 70%, black) 100%
+        );
+    }
 
     :host([mode="company"]) .view-area:nth-of-type(1) {
       border-color: var(--tuned-red);
     }
+    :host([mode="company"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
     :host([mode="company"]) .view-area:nth-of-type(2) {
       border-color: var(--sharp-blue);
     }
+    :host([mode="company"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
     :host([mode="company"]) .view-area:nth-of-type(3) {
       border-color: var(--yellow);
     }
+    :host([mode="company"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
 
     :host([mode="app"]) .view-area:nth-of-type(1) {
       background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
     }
+    :host([mode="app"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
     :host([mode="app"]) .view-area:nth-of-type(2) {
       background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
     }
+    :host([mode="app"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
     :host([mode="app"]) .view-area:nth-of-type(3) {
       background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
     }
+    :host([mode="app"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
     :host([mode="app"]) .view-area:nth-of-type(4) {
       background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
     }
+    :host([mode="app"]) .view-area:nth-of-type(4) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+        );
+    }
+    :host([mode="app"]) .view-area:nth-of-type(5) {
+      background-color: color-mix(in srgb, var(--pink) 25%, transparent);
+    }
+    :host([mode="app"]) .view-area:nth-of-type(5) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--pink) 70%, black) 0%,
+          color-mix(in srgb, var(--pink) 70%, black) 100%
+        );
+    }
+
+    :host([mode="list"]) .view-area:nth-of-type(1) {
+      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+    }
+    :host([mode="list"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
+    :host([mode="list"]) .view-area:nth-of-type(2) {
+      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
+    }
+    :host([mode="list"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
+    :host([mode="list"]) .view-area:nth-of-type(3) {
+      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+    }
+    :host([mode="list"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
+    :host([mode="list"]) .view-area:nth-of-type(4) {
+      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
+    }
+    :host([mode="list"]) .view-area:nth-of-type(4) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+        );
+    }
+
+    :host([mode="home"]) .view-area:nth-of-type(1) {
+      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(1) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+        );
+    }
+    :host([mode="home"]) .view-area:nth-of-type(2) {
+      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(2) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+        );
+    }
+    :host([mode="home"]) .view-area:nth-of-type(3) {
+      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(3) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--yellow) 70%, black) 0%,
+          color-mix(in srgb, var(--yellow) 70%, black) 100%
+        );
+    }
+    :host([mode="home"]) .view-area:nth-of-type(4) {
+      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(4) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+        );
+    }
+    :host([mode="home"]) .view-area:nth-of-type(5) {
+      background-color: color-mix(in srgb, var(--pink) 25%, transparent);
+    }
+    :host([mode="home"]) .view-area:nth-of-type(5) .grid-area-label {
+      background-image:
+        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
+        linear-gradient(
+          90deg,
+          color-mix(in srgb, var(--pink) 70%, black) 0%,
+          color-mix(in srgb, var(--pink) 70%, black) 100%
+        );
+    }
 
     .view-square {
       grid-area: square;
@@ -3722,23 +4526,46 @@ Layout.styles = i4`
     .view-main {
       grid-area: main;
     }
-  `;
+
+    .view-page-dots {
+      grid-area: page-dots;
+    }
+
+    .view-board {
+      grid-area: board;
+    }
+
+    .view-message {
+      grid-area: message;
+    }
+
+    .view-lists {
+      grid-area: lists;
+    }
+    `
+];
 customElements.define("ds-layout", Layout);
 export {
   Accordion,
+  Banner,
   Button,
+  Card,
   Container,
   Cycle,
   DateComponent,
   DsTable,
+  Form,
   Gap,
   Grid,
   Icon,
+  Input,
   Layout,
   List,
   Row,
   Text,
   Tooltip,
+  applike,
+  calculateScalingFactor,
   currentLanguage,
   currentTheme,
   detectMobileDevice,
@@ -3748,14 +4575,22 @@ export {
   getDeviceInfo,
   getLanguageDisplayName,
   getPriceLabel,
+  getScalingFactor,
   getText,
   hasTranslation,
   initDeviceDetection,
+  initScaling,
   loadTranslations,
   savePreferences,
+  scale,
+  scalingConfig,
+  scalingFactor,
   setLanguage,
+  setScalingConfig,
   setTheme,
-  translate
+  translate,
+  unscale,
+  updateScalingFactor
 };
 /*! Bundled license information: