@pure-ds/storybook 0.1.0

package/public/assets/pds/components/pds-splitpanel.js

@@ -0,0 +1,401 @@
+/**
+ * @component pds-splitpanel
+ * @description A split panel component that supports horizontal and vertical layouts, resizable panels, and a responsive mobile view.
+ *
+ * @attr {String} layout - The layout direction of the panels. Can be "horizontal" or "vertical". Defaults to "horizontal".
+ * @attr {String} defaultsplit - The initial size of the primary (left/top) panel. Defaults to "450px".
+ * @attr {Number} breakpoint - The viewport width in pixels below which the component switches to mobile view. Defaults to 1024.
+ * @attr {Boolean} open - Controls the visibility of the primary panel in mobile view.
+ *
+ * @prop {String} layout - Gets or sets the layout direction.
+ * @prop {String} defaultSplit - Gets or sets the default split size.
+ * @prop {Number} breakpoint - Gets or sets the mobile breakpoint.
+ * @prop {Boolean} open - Gets or sets the open state of the mobile panel.
+ *
+ * @slot left - Content for the left (or top) panel.
+ * @slot right - Content for the right (or bottom) panel.
+ *
+ * @csspart toggle - The mobile toggle button.
+ *
+ * @cssprop --left-width - Width of the left panel in horizontal layout.
+ * @cssprop --color-border - Color of the splitter bar.
+ * @cssprop --color-surface-base - Background color of the left panel in mobile view.
+ * @cssprop --transition-fast - Transition duration for the mobile panel animation.
+ * @cssprop --spacing-4 - Positioning spacing for the mobile toggle button.
+ * @cssprop --spacing-1 - Padding for the mobile toggle button.
+ * @cssprop --spacing-2 - Padding for the mobile toggle button.
+ *
+ * @example
+ * <caption>Basic horizontal split</caption>
+ * <pds-splitpanel>
+ *   <div slot="left">Left Panel Content</div>
+ *   <div slot="right">Right Panel Content</div>
+ * </pds-splitpanel>
+ *
+ * @example
+ * <caption>Vertical split with custom default size</caption>
+ * <pds-splitpanel layout="vertical" defaultsplit="200px">
+ *   <div slot="left">Top Panel Content</div>
+ *   <div slot="right">Bottom Panel Content</div>
+ * </pds-splitpanel>
+ */
+customElements.define(
+  "pds-splitpanel",
+  class extends HTMLElement {
+    static get observedAttributes() {
+      return ["layout", "defaultsplit", "breakpoint", "open"];
+    }
+
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+
+      // Defaults
+      this._layout = "horizontal";
+      this._defaultSplit = "450px";
+      this._breakpoint = 1024;
+      this._open = this.hasAttribute("open");
+      this.isDragging = false;
+
+      // Bound handlers for add/remove
+      this._onResize = () => this.updateLayout();
+      this._onMouseMove = (e) => this.drag(e);
+      this._onMouseUp = () => this.stopDragging();
+
+      this._render();
+    }
+
+    connectedCallback() {
+      // Ensure defaults reflected if attributes missing
+      if (!this.hasAttribute("layout")) this.setAttribute("layout", this._layout);
+      if (!this.hasAttribute("defaultsplit")) this.setAttribute("defaultsplit", this._defaultSplit);
+      if (!this.hasAttribute("breakpoint")) this.setAttribute("breakpoint", String(this._breakpoint));
+      if (this._open) this.setAttribute("open", "");
+
+      // Adopt primitives + component stylesheet (fallback to <style> if PDS not present)
+      this._adoptStyles();
+
+      // Cache references
+      this.$leftWrap = this.shadowRoot.querySelector(".left-panel");
+      this.$rightWrap = this.shadowRoot.querySelector(".right-panel");
+      this.$splitter = this.shadowRoot.querySelector(".splitter");
+      this.$toggleBtn = this.shadowRoot.getElementById("mobile-toggle");
+      this.$overlay = this.shadowRoot.querySelector(".mobile-overlay");
+      this.$icon = this.shadowRoot.querySelector("pds-icon");
+
+      // Wire events
+      window.addEventListener("resize", this._onResize);
+      if (this.$splitter) this.$splitter.addEventListener("mousedown", (e) => this.startDragging(e));
+      document.addEventListener("mousemove", this._onMouseMove);
+      document.addEventListener("mouseup", this._onMouseUp);
+      if (this.$toggleBtn) this.$toggleBtn.addEventListener("click", () => this.toggleMobileView());
+      if (this.$overlay) this.$overlay.addEventListener("click", () => this.closeMobileView());
+
+      // Initial layout
+      this.updateLayout();
+      this._updateToggleButton();
+    }
+
+    disconnectedCallback() {
+      window.removeEventListener("resize", this._onResize);
+      document.removeEventListener("mousemove", this._onMouseMove);
+      document.removeEventListener("mouseup", this._onMouseUp);
+      if (this.$splitter) this.$splitter.removeEventListener("mousedown", (e) => this.startDragging(e));
+      if (this.$toggleBtn) this.$toggleBtn.removeEventListener("click", () => this.toggleMobileView());
+      if (this.$overlay) this.$overlay.removeEventListener("click", () => this.closeMobileView());
+    }
+
+    attributeChangedCallback(name, _oldVal, newVal) {
+      switch (name) {
+        case "layout":
+          this._layout = (newVal || "horizontal").toLowerCase();
+          this.updateLayout();
+          break;
+        case "defaultsplit":
+          this._defaultSplit = newVal || "450px";
+          this.updateLayout();
+          break;
+        case "breakpoint":
+          this._breakpoint = Number(newVal) || 1024;
+          this.updateLayout();
+          break;
+        case "open":
+          this._open = this.hasAttribute("open");
+          this._updateToggleButton();
+          break;
+      }
+    }
+
+    // Properties
+    get layout() {
+      return this._layout;
+    }
+    set layout(v) {
+      this.setAttribute("layout", v);
+    }
+
+    get defaultSplit() {
+      return this._defaultSplit;
+    }
+    set defaultSplit(v) {
+      this.setAttribute("defaultsplit", v);
+    }
+
+    get breakpoint() {
+      return this._breakpoint;
+    }
+    set breakpoint(v) {
+      this.setAttribute("breakpoint", String(v));
+    }
+
+    get open() {
+      return this._open;
+    }
+    set open(v) {
+      if (Boolean(v)) {
+        if (!this.hasAttribute("open")) this.setAttribute("open", "");
+      } else {
+        if (this.hasAttribute("open")) this.removeAttribute("open");
+      }
+    }
+
+    // Rendering
+    _render() {
+      this.shadowRoot.innerHTML = `
+        <div class="left-panel">
+          <slot name="left"></slot>
+        </div>
+        <div class="splitter"></div>
+        <div class="right-panel">
+          <slot name="right"></slot>
+        </div>
+        <button part="toggle"
+          id="mobile-toggle"
+          class="mobile-toggle btn btn-sm"
+          aria-label="Toggle panel"
+          aria-expanded="${this._open ? "true" : "false"}"
+        >
+          <pds-icon icon="${this._open ? "x" : "list"}" width="24" height="24"></pds-icon>
+        </button>
+        <div class="mobile-overlay"></div>
+      `;
+    }
+
+    async _adoptStyles() {
+      const cssText = `
+      :host {
+        display: flex;
+        position: relative;
+        height: 100%;
+        width: 100%;
+      }
+
+      :host([layout="horizontal"]) {
+        flex-direction: row;
+      }
+
+      :host([layout="vertical"]) {
+        flex-direction: column;
+      }
+
+      .left-panel,
+      .right-panel {
+        display: block;
+        min-width: 0;
+      }
+
+      .left-panel {
+        flex: 0 0 var(--left-width, 450px);
+      }
+
+      .right-panel {
+        flex: 1 1 auto;
+        display: flex;
+      }
+
+      .splitter {
+        background-color: var(--color-border);
+        cursor: col-resize;
+        position: relative;
+        z-index: 1;
+      }
+
+      :host([layout="horizontal"]) .splitter {
+        width: 5px;
+        height: 100%;
+      }
+
+      :host([layout="vertical"]) .splitter {
+        height: 5px;
+        width: 100%;
+        cursor: row-resize;
+      }
+
+      #mobile-toggle {
+        visibility: hidden;
+        position: fixed;
+        top: var(--spacing-4);
+        right: var(--spacing-4);
+        z-index: 1001;
+      }
+
+      :host([mobile]) #mobile-toggle {
+        visibility: visible;
+      }
+
+      :host([mobile]) .left-panel {
+        display: none;
+      }
+
+      :host([mobile]) .right-panel {
+        flex: 1 1 100%;
+        width: 100%;
+      }
+
+      :host([mobile][open]) .left-panel {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1000;
+        background: var(--color-surface-base);
+      }
+
+      :host([mobile]) .left-panel ::slotted([slot="left"]) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        transform: translateX(-100%);
+        transition: transform var(--transition-fast) ease-in-out;
+      }
+
+      :host([mobile][open]) .left-panel ::slotted([slot="left"]) {
+        transform: translateX(0);
+      }
+
+      .mobile-overlay {
+        display: none;
+      }
+
+      :host([mobile][open]) .mobile-overlay {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.5);
+        z-index: 999;
+      }
+
+      .mobile-toggle.btn {
+        padding: var(--spacing-1, 4px) var(--spacing-2, 6px);
+      }
+
+      .mobile-toggle.btn-sm {
+        padding: var(--spacing-1, 4px);
+      }
+      `;
+
+      // Prefer PDS layers if available
+      try {
+        if (window.PDS && typeof PDS.createStylesheet === "function" && typeof PDS.adoptLayers === "function") {
+          const componentStyles = PDS.createStylesheet(cssText);
+          await PDS.adoptLayers(this.shadowRoot, ["primitives", "components"], [componentStyles]);
+          return;
+        }
+      } catch (e) {
+        console.error("pds-splitpanel: adoptLayers failed", e);
+      }
+
+      // Fallback: inject <style> into shadow root
+      const style = document.createElement("style");
+      style.textContent = cssText;
+      this.shadowRoot.prepend(style);
+    }
+
+    /**
+     * Updates the layout based on the current viewport width and breakpoint.
+     * Toggles mobile mode and adjusts panel styles.
+     */
+    updateLayout() {
+      const isMobile = window.innerWidth < this._breakpoint;
+      this.toggleAttribute("mobile", isMobile);
+
+      if (isMobile) {
+        if (!this.hasAttribute("open")) this._open = false;
+        if (this.$splitter) this.$splitter.style.display = "none";
+        if (this.$rightWrap) this.$rightWrap.style.display = "block";
+        this.style.removeProperty("--left-width");
+        if (this.$leftWrap) this.$leftWrap.style.height = "";
+        if (this.$rightWrap) this.$rightWrap.style.flex = "1 1 auto";
+      } else {
+        if (this.$splitter) this.$splitter.style.display = "block";
+        this.style.setProperty("--left-width", this._defaultSplit);
+        if (this.$rightWrap)
+          this.$rightWrap.style.flex = `1 1 calc(100% - ${this._defaultSplit})`;
+        if (this._layout === "vertical") {
+          // For vertical layout, width var isn't used; ensure panels reset
+          if (this.$leftWrap) this.$leftWrap.style.height = "";
+          if (this.$rightWrap) this.$rightWrap.style.flex = "1 1 auto";
+        }
+      }
+      this._updateToggleButton();
+    }
+
+    startDragging(event) {
+      if (this.hasAttribute("mobile")) return;
+      this.isDragging = true;
+      document.body.style.cursor =
+        this._layout === "horizontal" ? "col-resize" : "row-resize";
+      event.preventDefault();
+    }
+
+    drag(event) {
+      if (!this.isDragging) return;
+
+      const newSize =
+        this._layout === "horizontal"
+          ? Math.max(200, Math.min(event.clientX, window.innerWidth - 200))
+          : Math.max(200, Math.min(event.clientY, window.innerHeight - 200));
+
+      if (this._layout === "horizontal") {
+        this.style.setProperty("--left-width", `${newSize}px`);
+        if (this.$rightWrap)
+          this.$rightWrap.style.flex = `1 1 calc(100% - ${newSize}px)`;
+      } else {
+        if (this.$leftWrap) this.$leftWrap.style.height = `${newSize}px`;
+        if (this.$rightWrap)
+          this.$rightWrap.style.flex = `1 1 calc(100% - ${newSize}px)`;
+      }
+    }
+
+    stopDragging() {
+      if (!this.isDragging) return;
+      this.isDragging = false;
+      document.body.style.cursor = "";
+    }
+
+    /**
+     * Toggles the visibility of the primary panel in mobile view.
+     */
+    toggleMobileView() {
+      this.open = !this._open;
+    }
+
+    /**
+     * Closes the primary panel in mobile view.
+     */
+    closeMobileView() {
+      this.open = false;
+    }
+
+    _updateToggleButton() {
+      if (!this.$toggleBtn || !this.$icon) return;
+      this.$toggleBtn.setAttribute("aria-expanded", this._open ? "true" : "false");
+      this.$icon.setAttribute("icon", this._open ? "x" : "list");
+    }
+  }
+);

package/public/assets/pds/components/pds-tabstrip.js

@@ -0,0 +1,251 @@
+/**
+ * @element pds-tabpanel
+ * 
+ * @attr {string} label - Label for the tab button
+ * @attr {string} id - Unique identifier for the panel (auto-generated if not provided)
+ * 
+ * @slot - Content of the tab panel
+ */
+class TabPanel extends HTMLElement {
+  connectedCallback() {
+    // ensure id + label
+    if (!this.id) this.id = `tab-${Math.random().toString(36).slice(2, 7)}`;
+    if (!this.hasAttribute("label")) this.setAttribute("label", this.id);
+
+    // Wrap light DOM into a <section> once (idempotent)
+    if (!this._section) {
+      const section = document.createElement("section");
+      section.setAttribute("role", "region");
+      section.id = this.id;
+      section.setAttribute("aria-label", this.getAttribute("label") || this.id);
+      section.dataset.tabpanel = "";
+      // Move children into section
+      while (this.firstChild) section.appendChild(this.firstChild);
+      this.appendChild(section);
+      this._section = section;
+    }
+  }
+  /**
+   * The inner `<section>` that exposes the panel region semantics.
+   * @returns {HTMLElement|null}
+   */
+  get section() {
+    return this.querySelector("[data-tabpanel]");
+  }
+}
+customElements.define("pds-tabpanel", TabPanel);
+
+/**
+ * Tab navigation component that pairs anchors with `pds-tabpanel` children.
+ *
+ * @element pds-tabstrip
+ * @fires tabchange - Fired when the active tab changes. Detail: `{ oldTab: string|null, newTab: string }`
+ *
+ * @attr {string} label - Accessible label announced for the tablist
+ * @attr {string} selected - Identifier of the currently active panel (synced with the location hash)
+ *
+ * @slot - Collection of `pds-tabpanel` nodes representing individual tab panels
+ *
+ * @csspart tabs - Navigation container comprising the clickable tab buttons
+ * @cssprop --color-accent-400 - Color of the active tab indicator underline
+ */
+class TabStrip extends HTMLElement {
+  #shadow = this.attachShadow({ mode: "open" });
+  #inkbar;
+  #panels = [];
+  #mo;
+  #currentTab = null;
+
+  constructor() {
+    super();
+    this.#shadow.innerHTML = /*html*/ `
+      <style>
+        :host{display:block}
+        nav{
+          position:relative; display:inline-flex; gap:.5rem; align-items:flex-end;
+          
+          --pad-x:.5rem; --pad-y:.25rem;
+        }
+        nav a{
+          color: currentColor;
+          display:inline-block; padding:var(--pad-y) var(--pad-x);
+          text-decoration:none; line-height:1.2; border-bottom:2px solid transparent;
+          cursor:pointer;
+        }
+        nav a[aria-current="page"]{ font-weight:600; }
+        nav a:focus-visible{ outline:auto; outline-offset:2px; }
+        .inkbar{
+          position:absolute; inset-inline-start:0; bottom:-1px; height:2px; width:0;
+          transform:translateX(0); transition:transform .25s ease, width .25s ease;
+          background-color: var(--color-accent-400); pointer-events:none;
+        }
+      </style>
+      <nav part="tabs"></nav>
+      <slot></slot>
+    `;
+  }
+
+  /**
+   * Attach event listeners and observe panels once connected.
+   */
+  connectedCallback() {
+    // Set nav aria-label based on attribute or default
+    const nav = this.#shadow.querySelector("nav");
+    nav.setAttribute("aria-label", this.getAttribute("label") || "Tabs");
+
+    // Build once panels are in the light DOM
+    queueMicrotask(() => {
+      this.#collectPanels();
+      this.#renderTabs();
+      this.#syncFromUrl(true);
+      this.#positionInkbar();
+    });
+
+    // Observe changes to children/attributes that affect tabs
+    this.#mo = new MutationObserver(() => {
+      this.#collectPanels();
+      this.#renderTabs();
+      this.#syncFromUrl(false);
+      this.#positionInkbar();
+    });
+    this.#mo.observe(this, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["id", "label"],
+    });
+
+    // Respond to URL + layout changes
+    addEventListener("hashchange", this.#onUrlChange, { passive: true });
+    addEventListener("popstate", this.#onUrlChange, { passive: true });
+    addEventListener("resize", this.#positionInkbar, { passive: true });
+
+    // Handle clicks/keys in the shadow nav
+    nav.addEventListener("click", this.#onNavClick);
+    nav.addEventListener("keydown", this.#onNavKeydown);
+  }
+    
+  // --- helpers ---
+  #collectPanels() {
+    // Direct children <pds-tabpanel> only (your structure)
+    this.#panels = Array.from(this.querySelectorAll(":scope > pds-tabpanel"));
+    // Ensure each has an id + section
+    this.#panels.forEach((p, i) => {
+      if (!p.id) p.id = `tab-${i + 1}`;
+      p.connectedCallback?.(); // make sure its section exists
+    });
+  }
+
+  #renderTabs() {
+    const nav = this.#shadow.querySelector("nav");
+    nav.innerHTML =
+      this.#panels
+        .map((p) => {
+          const id = p.id;
+          const label = p.getAttribute("label") || id;
+          return `<a href="#${id}" aria-controls="${id}">${label}</a>`;
+        })
+        .join("") + `<span class="inkbar" aria-hidden="true"></span>`;
+    this.#inkbar = nav.querySelector(".inkbar");
+  }
+
+  #syncFromUrl(initial = false) {
+    if (!this.#panels.length) return;
+    const hashId = (location.hash || "").slice(1);
+    const exists = this.#panels.some((p) => p.id === hashId);
+    const next = exists
+      ? hashId
+      : this.getAttribute("selected") || this.#panels[0].id;
+
+    // Track previous tab for event
+    const oldTab = this.#currentTab;
+    const changed = oldTab !== null && oldTab !== next;
+
+    // Update selected attribute (optional external reflection)
+    this.setAttribute("selected", next);
+    this.#currentTab = next;
+
+    // Show/hide panels
+    for (const p of this.#panels) {
+      const sec = p.section || p.querySelector("[data-tabpanel]");
+      if (!sec) continue;
+      const active = p.id === next;
+      sec.hidden = !active; // semantic
+      sec.setAttribute("aria-hidden", String(!active));
+      sec.style.display = active ? "" : "none"; // guaranteed visual hide
+      if (active) sec.setAttribute("tabindex", "0");
+      else sec.removeAttribute("tabindex");
+    }
+
+    // Mark active link
+    const links = this.#shadow.querySelectorAll('nav a[href^="#"]');
+    links.forEach((a) => {
+      const target = a.getAttribute("href").slice(1);
+      if (target === next) a.setAttribute("aria-current", "page");
+      else a.removeAttribute("aria-current");
+    });
+
+    this.#positionInkbar();
+
+    // Stabilize URL on first paint if needed
+    if (initial && (!hashId || !exists)) {
+      history.replaceState(null, "", `#${next}`);
+    }
+
+    // Emit tabchange event (skip initial load)
+    if (changed) {
+      this.dispatchEvent(
+        new CustomEvent("tabchange", {
+          bubbles: true,
+          composed: true,
+          detail: { oldTab, newTab: next }
+        })
+      );
+    }
+  }
+
+  #positionInkbar = () => {
+    const nav = this.#shadow.querySelector("nav");
+    if (!nav) return;
+    const active = nav.querySelector('a[aria-current="page"]');
+    if (!active) return;
+    const nb = nav.getBoundingClientRect();
+    const ab = active.getBoundingClientRect();
+    const w = Math.max(0, ab.width);
+    const x = Math.max(0, ab.left - nb.left);
+    this.#inkbar.style.width = `${w}px`;
+    this.#inkbar.style.transform = `translateX(${x}px)`;
+  };
+
+  #onUrlChange = () => this.#syncFromUrl(false);
+
+  #onNavClick = (e) => {
+    const a = e
+      .composedPath()
+      .find(
+        (el) => el?.tagName === "A" && el.getAttribute("href")?.startsWith("#")
+      );
+    if (!a) return;
+    e.preventDefault(); // prevent anchor scroll/jump
+    const id = a.getAttribute("href").slice(1);
+    if (!id) return;
+    if (location.hash.slice(1) !== id) history.pushState(null, "", `#${id}`);
+    this.#syncFromUrl(false);
+  };
+
+  #onNavKeydown = (e) => {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    const links = Array.from(this.#shadow.querySelectorAll('nav a[href^="#"]'));
+    const i = links.indexOf(
+      this.#shadow.activeElement || document.activeElement
+    );
+    if (i === -1) return;
+    e.preventDefault();
+    const next =
+      e.key === "ArrowRight"
+        ? links[(i + 1) % links.length]
+        : links[(i - 1 + links.length) % links.length];
+    next?.focus();
+  };
+}
+customElements.define("pds-tabstrip", TabStrip);