@superleapai/flow-ui 2.3.6 → 2.3.8

package/components/icon.js

@@ -77,6 +77,40 @@
     /** Filled circle for "just color" mode (IconOrColor when only icon_color is set) */
     IconCircleFilled:
       '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>',
+
+    // Rich text editor / toolbar (Tabler Icons outline, stroke 2)
+    IconBold:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bold"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6l0 -7" /><path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" /></svg>',
+    IconItalic:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-italic"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 5l6 0" /><path d="M7 19l6 0" /><path d="M14 5l-4 14" /></svg>',
+    IconUnderline:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-underline"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 5v5a5 5 0 0 0 10 0v-5" /><path d="M5 19h14" /></svg>',
+    IconH1:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-h-1"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 18v-8l-2 2" /><path d="M4 6v12" /><path d="M12 6v12" /><path d="M11 18h2" /><path d="M3 18h2" /><path d="M4 12h8" /><path d="M3 6h2" /><path d="M11 6h2" /></svg>',
+    IconH2:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-h-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0" /><path d="M4 6v12" /><path d="M12 6v12" /><path d="M11 18h2" /><path d="M3 18h2" /><path d="M4 12h8" /><path d="M3 6h2" /><path d="M11 6h2" /></svg>',
+    IconH3:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-h-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19 14a2 2 0 1 0 -2 -2" /><path d="M17 16a2 2 0 1 0 2 -2" /><path d="M4 6v12" /><path d="M12 6v12" /><path d="M11 18h2" /><path d="M3 18h2" /><path d="M4 12h8" /><path d="M3 6h2" /><path d="M11 6h2" /></svg>',
+    IconList:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-list"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l11 0" /><path d="M9 12l11 0" /><path d="M9 18l11 0" /><path d="M5 6l0 .01" /><path d="M5 12l0 .01" /><path d="M5 18l0 .01" /></svg>',
+    IconListNumbers:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-list-numbers"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 6h9" /><path d="M11 12h9" /><path d="M12 18h8" /><path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" /><path d="M6 10v-6l-2 2" /></svg>',
+    IconAlignLeft:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-align-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M4 12l10 0" /><path d="M4 18l14 0" /></svg>',
+    IconAlignCenter:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-align-center"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M8 12l8 0" /><path d="M6 18l12 0" /></svg>',
+    IconAlignRight:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-align-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M10 12l10 0" /><path d="M6 18l14 0" /></svg>',
+    IconCode:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-code"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 8l-4 4l4 4" /><path d="M17 8l4 4l-4 4" /><path d="M14 4l-4 16" /></svg>',
+    IconLink:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-link"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>',
+    IconPhoto:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" /></svg>',
+    IconArrowBackUp:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-back-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 14l-4 -4l4 -4" /><path d="M5 10h11a4 4 0 1 1 0 8h-1" /></svg>',
+    IconArrowForwardUp:
+      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-forward-up"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 14l4 -4l-4 -4" /><path d="M19 10h-11a4 4 0 1 0 0 8h1" /></svg>',
   };
 
   function join() {

package/components/richtext-editor.js

@@ -0,0 +1,336 @@
+/**
+ * Rich Text Editor Component (vanilla JS)
+ * Toolbar + contenteditable area with formatting (bold, italic, underline, headings, lists, alignment, link, image, code block, undo/redo).
+ * Styling matches design: rounded-12, toolbar bg-fill-tertiary-fill-light-gray, content area with min-height.
+ */
+
+(function (global) {
+  "use strict";
+
+  var RICH_TEXT_CONTENT_STYLES =
+    ".rich-text-editor-content ul{list-style-type:disc;padding-left:1.5em;margin:0.5em 0}" +
+    ".rich-text-editor-content ol{list-style-type:decimal;padding-left:1.5em;margin:0.5em 0}" +
+    ".rich-text-editor-content li{margin:0.25em 0}" +
+    ".rich-text-editor-content li p{margin:0}" +
+    ".rich-text-editor-content h1{font-size:1.5rem;font-weight:700;line-height:1.3;margin:0.75em 0 0.5em}" +
+    ".rich-text-editor-content h2{font-size:1.25rem;font-weight:600;line-height:1.3;margin:0.75em 0 0.5em}" +
+    ".rich-text-editor-content h3{font-size:1.125rem;font-weight:600;line-height:1.3;margin:0.75em 0 0.5em}" +
+    ".rich-text-editor-content p{margin:0.5em 0}" +
+    ".rich-text-editor-content a{color:var(--color-primary-500);text-decoration:underline;cursor:pointer}" +
+    ".rich-text-editor-content pre{background:var(--color-neutral-100);border-radius:var(--sizes-size-8);padding:0.75em 1em;margin:0.5em 0;overflow-x:auto}" +
+    ".rich-text-editor-content code{font-family:ui-monospace,monospace;font-size:0.875em}" +
+    ".rich-text-editor-content img{max-width:100%;height:auto;margin:0.5em 0}" +
+    ".rich-text-editor-content blockquote{border-left:3px solid var(--color-neutral-200);padding-left:1em;margin:0.5em 0;color:var(--color-neutral-600)}" +
+    ".rich-text-editor-content hr{border:none;border-top:1px solid var(--color-neutral-150);margin:1em 0}" +
+    ".rich-text-editor-content .ProseMirror,.rich-text-editor-content [contenteditable]{outline:none}";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  function getDep(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  /** Get Tabler icon element (16px) from Icon component for toolbar. */
+  function getTablerIcon(iconName) {
+    var Icon = getDep("Icon");
+    if (!Icon || !Icon.iconMap || !Icon.iconMap[iconName]) return null;
+    var svgStr = Icon.iconMap[iconName];
+    var s16 = svgStr.replace(/width="24"/, 'width="16"').replace(/height="24"/, 'height="16"').replace(/width="20"/, 'width="16"').replace(/height="20"/, 'height="16"');
+    var span = document.createElement("span");
+    span.className = "flex items-center justify-center size-16";
+    span.innerHTML = s16;
+    return span;
+  }
+
+  function createToolbarButton(opts) {
+    var Button = getDep("Button");
+    if (!Button || typeof Button.create !== "function") {
+      throw new Error("RichTextEditor requires Button");
+    }
+    var icon = opts.iconStr ? getTablerIcon(opts.iconStr) : null;
+    return Button.create({
+      variant: opts.active ? "primary" : "outline",
+      size: "default",
+      title: opts.title,
+      icon: icon,
+      onClick: opts.onClick,
+      disabled: opts.disabled,
+    });
+  }
+
+  function createSeparator() {
+    var sep = document.createElement("div");
+    sep.className = "w-px h-16 bg-border-primary mx-4";
+    sep.setAttribute("aria-hidden", "true");
+    return sep;
+  }
+
+  /**
+   * Create a rich text editor
+   * @param {Object} config
+   * @param {string} [config.value] - Initial HTML content
+   * @param {string} [config.placeholder] - Placeholder when empty
+   * @param {number} [config.minHeightPx] - Min height of editor area (default 400)
+   * @param {boolean} [config.disabled]
+   * @param {Function} [config.onChange] - (html: string) => void
+   * @returns {HTMLElement} Wrapper element with getValue/setValue/setDisabled/getInput
+   */
+  function create(config) {
+    var value = config.value != null ? String(config.value) : "";
+    var placeholder = config.placeholder != null ? config.placeholder : "";
+    var minHeightPx = config.minHeightPx != null ? config.minHeightPx : 400;
+    var disabled = !!config.disabled;
+    var onChange = config.onChange;
+
+    var wrapper = document.createElement("div");
+    wrapper.className = "w-full rounded-12 border border-borderColor-border-primary shadow-soft-2x-small";
+
+    var styleEl = document.createElement("style");
+    styleEl.textContent = RICH_TEXT_CONTENT_STYLES;
+    wrapper.appendChild(styleEl);
+
+    var toolbar = document.createElement("div");
+    toolbar.className =
+      "flex flex-wrap gap-4 rounded-t-12 border-borderColor-border-primary bg-fill-tertiary-fill-light-gray p-6";
+    toolbar.setAttribute("role", "toolbar");
+
+    var editorEl = document.createElement("div");
+    editorEl.contentEditable = !disabled;
+    editorEl.className = join(
+      "rich-text-editor-content max-w-none rounded-b-12 border-t border-borderColor-border-primary p-8 text-reg-14 text-typography-primary-text"
+    );
+    editorEl.style.minHeight = minHeightPx + "px";
+    if (value) editorEl.innerHTML = value;
+    editorEl.setAttribute("data-placeholder", placeholder);
+
+    function isEmpty() {
+      var text = (editorEl.textContent || "").trim();
+      if (text) return false;
+      var html = (editorEl.innerHTML || "").replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "");
+      return !html.trim();
+    }
+    function updatePlaceholder() {
+      if (placeholder && isEmpty()) {
+        editorEl.classList.add("empty");
+        editorEl.setAttribute("data-placeholder", placeholder);
+      } else {
+        editorEl.classList.remove("empty");
+        editorEl.removeAttribute("data-placeholder");
+      }
+    }
+    updatePlaceholder();
+
+    function getHtml() {
+      return editorEl.innerHTML;
+    }
+    function setHtml(html) {
+      editorEl.innerHTML = html || "";
+      updatePlaceholder();
+    }
+    function notifyChange() {
+      if (typeof onChange === "function") onChange(getHtml());
+    }
+
+    function isActive(cmd, val) {
+      try {
+        return document.queryCommandState(cmd);
+      } catch (e) {
+        return false;
+      }
+    }
+    function blockTag() {
+      var sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) return null;
+      var node = sel.anchorNode;
+      while (node && node !== editorEl) {
+        if (node.nodeType === 1) {
+          var n = node.nodeName.toLowerCase();
+          if (["h1", "h2", "h3", "p", "div", "pre", "blockquote"].indexOf(n) !== -1) return n;
+        }
+        node = node.parentNode;
+      }
+      return null;
+    }
+    function isAlignment(align) {
+      try {
+        if (align === "left") return document.queryCommandState("justifyLeft");
+        if (align === "center") return document.queryCommandState("justifyCenter");
+        if (align === "right") return document.queryCommandState("justifyRight");
+      } catch (e) {}
+      return false;
+    }
+
+    function refreshToolbar() {
+      toolbar.querySelectorAll("button").forEach(function (btn) {
+        var cmd = btn.getAttribute("data-command");
+        var val = btn.getAttribute("data-value");
+        if (!cmd) return;
+        var active = false;
+        if (cmd === "formatBlock") active = blockTag() === val;
+        else if (cmd === "justifyLeft" && val === "left") active = isAlignment("left");
+        else if (cmd === "justifyCenter" && val === "center") active = isAlignment("center");
+        else if (cmd === "justifyRight" && val === "right") active = isAlignment("right");
+        else active = isActive(cmd);
+        btn.classList.toggle("bg-primary-base", active);
+        btn.classList.toggle("border-primary-base", active);
+        btn.classList.toggle("text-typography-invert-text", active);
+        btn.classList.toggle("bg-fill-quarternary-fill-white", !active);
+        btn.classList.toggle("border-border-primary", !active);
+        btn.classList.toggle("text-typography-primary-text", !active);
+      });
+    }
+
+    function exec(cmd, value) {
+      editorEl.focus();
+      document.execCommand(cmd, false, value != null ? value : null);
+      refreshToolbar();
+      notifyChange();
+    }
+
+    function insertCodeBlock() {
+      editorEl.focus();
+      var sel = window.getSelection();
+      if (sel && sel.rangeCount) {
+        var range = sel.getRangeAt(0);
+        var pre = document.createElement("pre");
+        var code = document.createElement("code");
+        code.textContent = "code here";
+        pre.appendChild(code);
+        range.insertNode(pre);
+        range.setStart(code, 0);
+        range.setEnd(code, 0);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+      refreshToolbar();
+      notifyChange();
+    }
+
+    function addLink() {
+      var url = window.prompt("Enter the URL:", "https://");
+      if (url) {
+        exec("createLink", url);
+      }
+    }
+
+    function addImage() {
+      var input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/*";
+      input.onchange = function (e) {
+        var file = e.target && e.target.files && e.target.files[0];
+        if (file) {
+          var reader = new FileReader();
+          reader.onload = function (ev) {
+            var src = ev.target && ev.target.result;
+            if (src) {
+              editorEl.focus();
+              document.execCommand("insertImage", false, src);
+              notifyChange();
+            }
+          };
+          reader.readAsDataURL(file);
+        }
+      };
+      input.click();
+    }
+
+    function undo() {
+      editorEl.focus();
+      document.execCommand("undo", false, null);
+      refreshToolbar();
+      notifyChange();
+    }
+    function redo() {
+      editorEl.focus();
+      document.execCommand("redo", false, null);
+      refreshToolbar();
+      notifyChange();
+    }
+
+    function addBtn(iconStr, title, onClick, dataCommand, dataValue) {
+      var btn = createToolbarButton({
+        iconStr: iconStr,
+        title: title,
+        onClick: function () {
+          if (disabled) return;
+          onClick();
+        },
+        active: false,
+      });
+      if (dataCommand) btn.setAttribute("data-command", dataCommand);
+      if (dataValue != null) btn.setAttribute("data-value", dataValue);
+      toolbar.appendChild(btn);
+    }
+
+    addBtn("IconBold", "Bold (Ctrl+B)", function () { exec("bold"); }, "bold");
+    addBtn("IconItalic", "Italic (Ctrl+I)", function () { exec("italic"); }, "italic");
+    addBtn("IconUnderline", "Underline (Ctrl+U)", function () { exec("underline"); }, "underline");
+    toolbar.appendChild(createSeparator());
+    addBtn("IconH1", "Heading 1", function () { exec("formatBlock", "h1"); }, "formatBlock", "h1");
+    addBtn("IconH2", "Heading 2", function () { exec("formatBlock", "h2"); }, "formatBlock", "h2");
+    addBtn("IconH3", "Heading 3", function () { exec("formatBlock", "h3"); }, "formatBlock", "h3");
+    toolbar.appendChild(createSeparator());
+    addBtn("IconList", "Bullet List", function () { exec("insertUnorderedList"); }, "insertUnorderedList");
+    addBtn("IconListNumbers", "Ordered List", function () { exec("insertOrderedList"); }, "insertOrderedList");
+    toolbar.appendChild(createSeparator());
+    addBtn("IconAlignLeft", "Align Left", function () { exec("justifyLeft"); }, "justifyLeft", "left");
+    addBtn("IconAlignCenter", "Align Center", function () { exec("justifyCenter"); }, "justifyCenter", "center");
+    addBtn("IconAlignRight", "Align Right", function () { exec("justifyRight"); }, "justifyRight", "right");
+    toolbar.appendChild(createSeparator());
+    addBtn("IconCode", "Code Block", insertCodeBlock, "formatBlock", "pre");
+    addBtn("IconLink", "Add Link", addLink, "link");
+    addBtn("IconPhoto", "Insert Image", addImage);
+    toolbar.appendChild(createSeparator());
+    addBtn("IconArrowBackUp", "Undo", undo);
+    addBtn("IconArrowForwardUp", "Redo", redo);
+
+    editorEl.addEventListener("input", function () {
+      updatePlaceholder();
+      refreshToolbar();
+      notifyChange();
+    });
+    editorEl.addEventListener("keyup", refreshToolbar);
+    editorEl.addEventListener("mouseup", refreshToolbar);
+    editorEl.addEventListener("focus", refreshToolbar);
+
+    if (placeholder) {
+      var placeholderStyles = document.createElement("style");
+      placeholderStyles.textContent =
+        ".rich-text-editor-content.empty:before{content:attr(data-placeholder);color:var(--color-neutral-400);pointer-events:none}";
+      wrapper.appendChild(placeholderStyles);
+    }
+
+    wrapper.appendChild(toolbar);
+    wrapper.appendChild(editorEl);
+
+    wrapper.getInput = function () {
+      return editorEl;
+    };
+    wrapper.getValue = function () {
+      return getHtml();
+    };
+    wrapper.setValue = function (v) {
+      setHtml(v);
+    };
+    wrapper.setDisabled = function (d) {
+      disabled = !!d;
+      editorEl.contentEditable = !disabled;
+      toolbar.querySelectorAll("button").forEach(function (b) {
+        b.disabled = disabled;
+      });
+    };
+
+    return wrapper;
+  }
+
+  global.RichTextEditorComponent = {
+    create: create,
+  };
+})(typeof window !== "undefined" ? window : this);

package/components/steps.js

@@ -0,0 +1,245 @@
+/**
+ * Steps Component (vanilla JS)
+ * Multi-step flow with numbered step triggers and optional content panels.
+ * Use for wizards / step-by-step forms (e.g. "1 Step One", "2 Step Two").
+ */
+
+(function (global) {
+  "use strict";
+
+  function getComponent(name) {
+    if (typeof global.FlowUI !== "undefined" && typeof global.FlowUI._getComponent === "function") {
+      var c = global.FlowUI._getComponent(name);
+      if (c) return c;
+    }
+    return global[name];
+  }
+
+  var LIST_BASE_CLASS =
+    "flex items-center flex-wrap gap-0 rounded-4 border border-border-primary bg-fill-quarternary-fill-white p-4";
+
+  /** Inactive step: muted label color only (button stays ghost large) */
+  var INACTIVE_LABEL_CLASS = "!text-typography-quaternary-text";
+
+  /** Box around step number: active = dark fill + invert text, inactive = dark gray fill + tertiary text */
+  var NUMBER_BOX_ACTIVE =
+    "flex h-16 w-16 items-center justify-center rounded-4 bg-typography-primary-text text-typography-invert-text shrink-0";
+  var NUMBER_BOX_INACTIVE =
+    "flex h-16 w-16 items-center justify-center rounded-4 bg-fill-primary-fill-dark-gray text-typography-tertiary-text shrink-0";
+
+  /** Horizontal line between steps (step1 ——— step2) */
+  var CONNECTOR_CLASS = "flex-1 min-w-12 max-w-32 h-0 border-t border-border-primary shrink-0 mx-2 self-center";
+
+  var CONTENT_BASE_CLASS =
+    "ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 h-full";
+
+  function join() {
+    return Array.prototype.filter.call(arguments, Boolean).join(" ");
+  }
+
+  /**
+   * Create a Steps component (numbered step triggers + optional content)
+   * Design: ghost large Button for all steps; inactive steps use muted label color. Connectors between steps. Optional title/description above.
+   * @param {Object} config
+   * @param {Array<{id: string, label: string, content?: HTMLElement|string}>} config.steps - step definitions
+   * @param {string} [config.defaultValue] - initial active step id
+   * @param {string} [config.value] - controlled active step id
+   * @param {Function} [config.onChange] - (stepId) => void when step changes
+   * @param {string} [config.title] - optional title above steps
+   * @param {string} [config.description] - optional description above steps
+   * @param {string} [config.listClassName] - extra class on step list
+   * @param {string} [config.contentClassName] - extra class on content wrapper
+   * @param {boolean} [config.showContent=true] - whether to render content panels (if steps have content)
+   * @returns {HTMLElement} root element
+   */
+  function create(config) {
+    var opts = config || {};
+    var steps = opts.steps || [];
+    var defaultValue = opts.defaultValue;
+    var controlledValue = opts.value;
+    var onChange = opts.onChange;
+    var title = opts.title;
+    var description = opts.description;
+    var listClassName = opts.listClassName || "";
+    var contentClassName = opts.contentClassName || "";
+    var showContent = opts.showContent !== false;
+
+    var root = document.createElement("div");
+    root.className = "steps-root w-full";
+
+    var activeId =
+      controlledValue !== undefined
+        ? controlledValue
+        : defaultValue !== undefined
+          ? defaultValue
+          : (steps[0] && steps[0].id) || "";
+
+    if (title != null && title !== "") {
+      var titleEl = document.createElement("h3");
+      titleEl.className = "text-typography-primary-text";
+      titleEl.textContent = title;
+      root.appendChild(titleEl);
+    }
+    if (description != null && description !== "") {
+      var descEl = document.createElement("p");
+      descEl.className = "text-typography-secondary-text";
+      descEl.textContent = description;
+      root.appendChild(descEl);
+    }
+
+    // Step list (horizontal: step, connector, step, connector, ...)
+    var list = document.createElement("div");
+    list.setAttribute("role", "tablist");
+    list.setAttribute("aria-label", "Steps");
+    list.className = join(LIST_BASE_CLASS, listClassName);
+
+    var triggerEls = [];
+    var numberBoxEls = [];
+    var contentPanels = [];
+    var contentWrapper = null;
+
+    if (showContent && steps.some(function (s) { return s.content != null; })) {
+      contentWrapper = document.createElement("div");
+      contentWrapper.className = join("steps-content-wrapper mt-4", contentClassName);
+    }
+
+    var Button = getComponent("Button");
+
+    steps.forEach(function (step, index) {
+      var stepId = step.id;
+      var label = step.label != null ? step.label : stepId;
+      var content = step.content;
+      var stepNumber = index + 1;
+      var isActive = stepId === activeId;
+
+      var trigger = Button.create({
+        variant: "ghost",
+        size: "large",
+        text: "\u00A0",
+        type: "button",
+        className: isActive ? "" : INACTIVE_LABEL_CLASS,
+        onClick: function () {
+          if (activeId === stepId) return;
+          if (controlledValue === undefined) {
+            activeId = stepId;
+            updateActiveState();
+          }
+          if (typeof onChange === "function") {
+            onChange(stepId);
+          }
+        },
+      });
+
+      var numberBox = document.createElement("span");
+      numberBox.setAttribute("aria-hidden", "true");
+      numberBox.className = isActive ? NUMBER_BOX_ACTIVE : NUMBER_BOX_INACTIVE;
+      numberBox.textContent = String(stepNumber);
+
+      trigger.innerHTML = "";
+      trigger.appendChild(numberBox);
+      trigger.appendChild(document.createTextNode(" " + label));
+
+      trigger.setAttribute("role", "tab");
+      trigger.setAttribute("aria-selected", isActive ? "true" : "false");
+      trigger.setAttribute("data-state", isActive ? "active" : "inactive");
+      trigger.setAttribute("data-step-id", stepId);
+      trigger.tabIndex = isActive ? 0 : -1;
+
+      numberBoxEls.push(numberBox);
+
+      trigger.addEventListener("keydown", function (e) {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          trigger.click();
+        }
+        if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+          e.preventDefault();
+          var nextIndex = e.key === "ArrowRight" ? index + 1 : index - 1;
+          if (nextIndex >= 0 && nextIndex < steps.length) {
+            var nextTrigger = triggerEls[nextIndex];
+            if (nextTrigger) {
+              nextTrigger.focus();
+              nextTrigger.click();
+            }
+          }
+        }
+      });
+
+      list.appendChild(trigger);
+      triggerEls.push(trigger);
+
+      if (index < steps.length - 1) {
+        var connector = document.createElement("span");
+        connector.className = CONNECTOR_CLASS;
+        connector.setAttribute("aria-hidden", "true");
+        list.appendChild(connector);
+      }
+
+      if (contentWrapper && content != null) {
+        var panel = document.createElement("div");
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("aria-hidden", stepId !== activeId ? "true" : "false");
+        panel.setAttribute("data-step-id", stepId);
+        panel.className = join(CONTENT_BASE_CLASS, stepId !== activeId ? "hidden" : "");
+        if (typeof content === "string") {
+          panel.innerHTML = content;
+        } else if (content && content.nodeType === 1) {
+          panel.appendChild(content);
+        }
+        contentWrapper.appendChild(panel);
+        contentPanels.push(panel);
+      }
+    });
+
+    function updateActiveState() {
+      triggerEls.forEach(function (t, i) {
+        var step = steps[i];
+        var id = step && step.id;
+        var isActive = id === activeId;
+        t.setAttribute("aria-selected", isActive ? "true" : "false");
+        t.setAttribute("data-state", isActive ? "active" : "inactive");
+        t.tabIndex = isActive ? 0 : -1;
+        if (isActive) {
+          t.classList.remove(INACTIVE_LABEL_CLASS);
+        } else {
+          t.classList.add(INACTIVE_LABEL_CLASS);
+        }
+        numberBoxEls[i].className = isActive ? NUMBER_BOX_ACTIVE : NUMBER_BOX_INACTIVE;
+      });
+      contentPanels.forEach(function (p, i) {
+        var step = steps[i];
+        var id = step && step.id;
+        var isActive = id === activeId;
+        p.setAttribute("aria-hidden", isActive ? "false" : "true");
+        p.classList.toggle("hidden", !isActive);
+      });
+    }
+
+    root.appendChild(list);
+    if (contentWrapper) {
+      root.appendChild(contentWrapper);
+    }
+
+    root.getValue = function () {
+      return activeId;
+    };
+
+    root.setValue = function (newId) {
+      if (newId === activeId) return;
+      activeId = newId;
+      updateActiveState();
+    };
+
+    return root;
+  }
+
+  var Steps = {
+    create: create,
+  };
+
+  if (typeof module !== "undefined" && module.exports) {
+    module.exports = Steps;
+  } else {
+    global.Steps = Steps;
+  }
+})(typeof window !== "undefined" ? window : this);