@deepfuture/dui-components 0.0.1

package/vstack/register.js

@@ -0,0 +1,4 @@
+import { DuiVstack } from "./index.js";
+if (!customElements.get(DuiVstack.tagName)) {
+    customElements.define(DuiVstack.tagName, DuiVstack);
+}

package/vstack/vstack.d.ts

@@ -0,0 +1,17 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/vstack */
+import { LitElement, type TemplateResult } from "lit";
+import { type StackGap } from "@deepfuture/dui-core/layout-types";
+/**
+ * `<dui-vstack>` — A vertical stack layout component.
+ *
+ * @slot - Stack content.
+ * @csspart root - The stack container.
+ * @cssprop --vstack-gap - Override gap between items.
+ */
+export declare class DuiVstack extends LitElement {
+    static tagName: "dui-vstack";
+    static styles: import("lit").CSSResult[];
+    /** Gap between stack items. Maps to space tokens. */
+    accessor gap: StackGap;
+    render(): TemplateResult;
+}

package/vstack/vstack.js

@@ -0,0 +1,83 @@
+/** Ported from original DUI: deep-future-app/app/client/components/dui/vstack */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { base } from "@deepfuture/dui-core/base";
+/** Structural styles only — layout CSS. */
+const styles = css `
+  :host {
+    --vstack-gap: var(--space-4);
+    display: block;
+    width: 100%;
+  }
+
+  :host([gap="0"]) {
+    --vstack-gap: var(--space-0);
+  }
+  :host([gap="1"]) {
+    --vstack-gap: var(--space-1);
+  }
+  :host([gap="2"]) {
+    --vstack-gap: var(--space-2);
+  }
+  :host([gap="3"]) {
+    --vstack-gap: var(--space-3);
+  }
+  :host([gap="4"]) {
+    --vstack-gap: var(--space-4);
+  }
+  :host([gap="5"]) {
+    --vstack-gap: var(--space-5);
+  }
+  :host([gap="6"]) {
+    --vstack-gap: var(--space-6);
+  }
+  :host([gap="8"]) {
+    --vstack-gap: var(--space-8);
+  }
+  :host([gap="10"]) {
+    --vstack-gap: var(--space-10);
+  }
+  :host([gap="12"]) {
+    --vstack-gap: var(--space-12);
+  }
+  :host([gap="16"]) {
+    --vstack-gap: var(--space-16);
+  }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vstack-gap);
+  }
+`;
+/**
+ * `<dui-vstack>` — A vertical stack layout component.
+ *
+ * @slot - Stack content.
+ * @csspart root - The stack container.
+ * @cssprop --vstack-gap - Override gap between items.
+ */
+export class DuiVstack extends LitElement {
+    static { this.tagName = "dui-vstack"; }
+    static { this.styles = [base, styles]; }
+    #gap_accessor_storage = "4";
+    /** Gap between stack items. Maps to space tokens. */
+    get gap() { return this.#gap_accessor_storage; }
+    set gap(value) { this.#gap_accessor_storage = value; }
+    render() {
+        return html `
+      <div part="root">
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], DuiVstack.prototype, "gap", null);