dialkit 1.0.0 → 1.1.0

package/dist/solid/index.cjs

@@ -572,7 +572,8 @@ var _tmpl$4 = /* @__PURE__ */ (0, import_web.template)(`<div class=dialkit-folde
 var _tmpl$5 = /* @__PURE__ */ (0, import_web.template)(`<div class=dialkit-folder-title-row><span class=dialkit-folder-title>`);
 var _tmpl$6 = /* @__PURE__ */ (0, import_web.template)(`<svg class=dialkit-panel-icon viewBox="0 0 16 16"fill=none><path opacity=0.5 d="M6.84766 11.75C6.78583 11.9899 6.75 12.2408 6.75 12.5C6.75 12.7592 6.78583 13.0101 6.84766 13.25H2C1.58579 13.25 1.25 12.9142 1.25 12.5C1.25 12.0858 1.58579 11.75 2 11.75H6.84766ZM14 11.75C14.4142 11.75 14.75 12.0858 14.75 12.5C14.75 12.9142 14.4142 13.25 14 13.25H12.6523C12.7142 13.0101 12.75 12.7592 12.75 12.5C12.75 12.2408 12.7142 11.9899 12.6523 11.75H14ZM3.09766 7.25C3.03583 7.48994 3 7.74075 3 8C3 8.25925 3.03583 8.51006 3.09766 8.75H2C1.58579 8.75 1.25 8.41421 1.25 8C1.25 7.58579 1.58579 7.25 2 7.25H3.09766ZM14 7.25C14.4142 7.25 14.75 7.58579 14.75 8C14.75 8.41421 14.4142 8.75 14 8.75H8.90234C8.96417 8.51006 9 8.25925 9 8C9 7.74075 8.96417 7.48994 8.90234 7.25H14ZM7.59766 2.75C7.53583 2.98994 7.5 3.24075 7.5 3.5C7.5 3.75925 7.53583 4.01006 7.59766 4.25H2C1.58579 4.25 1.25 3.91421 1.25 3.5C1.25 3.08579 1.58579 2.75 2 2.75H7.59766ZM14 2.75C14.4142 2.75 14.75 3.08579 14.75 3.5C14.75 3.91421 14.4142 4.25 14 4.25H13.4023C13.4642 4.01006 13.5 3.75925 13.5 3.5C13.5 3.24075 13.4642 2.98994 13.4023 2.75H14Z"fill=currentColor></path><circle cx=6 cy=8 r=0.998596 fill=currentColor stroke=currentColor stroke-width=1.25></circle><circle cx=10.4999 cy=3.5 r=0.998657 fill=currentColor stroke=currentColor stroke-width=1.25></circle><circle cx=9.75015 cy=12.5 r=0.997986 fill=currentColor stroke=currentColor stroke-width=1.25>`);
 var _tmpl$7 = /* @__PURE__ */ (0, import_web.template)(`<svg class=dialkit-folder-icon viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path d="M6 9.5L12 15.5L18 9.5">`);
-var _tmpl$8 = /* @__PURE__ */ (0, import_web.template)(`<div class=dialkit-panel-inner>`);
+var _tmpl$8 = /* @__PURE__ */ (0, import_web.template)(`<div class="dialkit-panel-inner dialkit-panel-inline">`);
+var _tmpl$9 = /* @__PURE__ */ (0, import_web.template)(`<div class=dialkit-panel-inner>`);
 function Folder(props) {
   const [isOpen, setIsOpen] = (0, import_solid_js2.createSignal)(props.defaultOpen ?? true);
   const [isCollapsed, setIsCollapsed] = (0, import_solid_js2.createSignal)(!(props.defaultOpen ?? true));
@@ -616,6 +617,7 @@ function Folder(props) {
     (0, import_solid_js2.onCleanup)(() => chevronAnim?.stop());
   });
   const handleToggle = () => {
+    if (props.inline && props.isRoot) return;
     const next = !isOpen();
     setIsOpen(next);
     if (next) {
@@ -690,8 +692,12 @@ function Folder(props) {
       })();
     })(), null);
     (0, import_web8.insert)(_el$3, (() => {
-      var _c$2 = (0, import_web9.memo)(() => !!props.isRoot);
-      return () => _c$2() ? _tmpl$6() : (() => {
+      var _c$2 = (0, import_web9.memo)(() => !!(props.isRoot && !props.inline));
+      return () => _c$2() && _tmpl$6();
+    })(), null);
+    (0, import_web8.insert)(_el$3, (() => {
+      var _c$3 = (0, import_web9.memo)(() => !!!props.isRoot);
+      return () => _c$3() && (() => {
         var _el$10 = _tmpl$7();
         var _ref$ = folderChevronRef;
         typeof _ref$ === "function" ? (0, import_web10.use)(_ref$, _el$10) : folderChevronRef = _el$10;
@@ -756,6 +762,13 @@ function Folder(props) {
     return _el$;
   })();
   if (props.isRoot) {
+    if (props.inline) {
+      return (() => {
+        var _el$11 = _tmpl$8();
+        (0, import_web8.insert)(_el$11, folderContent);
+        return _el$11;
+      })();
+    }
     let panelRef;
     let rootPanelAnim = null;
     let rootPanelInitialized = false;
@@ -812,8 +825,8 @@ function Folder(props) {
       panelTapAnim?.stop();
     });
     return (() => {
-      var _el$11 = _tmpl$8();
-      _el$11.addEventListener("pointerleave", () => {
+      var _el$12 = _tmpl$9();
+      _el$12.addEventListener("pointerleave", () => {
         if (isOpen()) return;
         panelTapAnim?.stop();
         panelTapAnim = (0, import_motion.animate)(panelRef, {
@@ -824,7 +837,7 @@ function Folder(props) {
           bounce: 0.3
         });
       });
-      _el$11.addEventListener("pointercancel", () => {
+      _el$12.addEventListener("pointercancel", () => {
         if (isOpen()) return;
         panelTapAnim?.stop();
         panelTapAnim = (0, import_motion.animate)(panelRef, {
@@ -835,7 +848,7 @@ function Folder(props) {
           bounce: 0.3
         });
       });
-      _el$11.$$pointerup = () => {
+      _el$12.$$pointerup = () => {
         if (isOpen()) return;
         panelTapAnim?.stop();
         panelTapAnim = (0, import_motion.animate)(panelRef, {
@@ -846,7 +859,7 @@ function Folder(props) {
           bounce: 0.3
         });
       };
-      _el$11.$$pointerdown = () => {
+      _el$12.$$pointerdown = () => {
         if (isOpen()) return;
         document.activeElement?.blur?.();
         panelTapAnim?.stop();
@@ -859,10 +872,10 @@ function Folder(props) {
         });
       };
       var _ref$2 = panelRef;
-      typeof _ref$2 === "function" ? (0, import_web10.use)(_ref$2, _el$11) : panelRef = _el$11;
-      (0, import_web8.insert)(_el$11, folderContent);
-      (0, import_web6.effect)(() => (0, import_web3.setAttribute)(_el$11, "data-collapsed", String(isCollapsed())));
-      return _el$11;
+      typeof _ref$2 === "function" ? (0, import_web10.use)(_ref$2, _el$12) : panelRef = _el$12;
+      (0, import_web8.insert)(_el$12, folderContent);
+      (0, import_web6.effect)(() => (0, import_web3.setAttribute)(_el$12, "data-collapsed", String(isCollapsed())));
+      return _el$12;
     })();
   }
   return folderContent();
@@ -880,7 +893,7 @@ var import_web17 = require("solid-js/web");
 var import_web18 = require("solid-js/web");
 var import_solid_js3 = require("solid-js");
 var import_motion2 = require("motion");
-var _tmpl$9 = /* @__PURE__ */ (0, import_web11.template)(`<div class=dialkit-slider-hashmark>`);
+var _tmpl$10 = /* @__PURE__ */ (0, import_web11.template)(`<div class=dialkit-slider-hashmark>`);
 var _tmpl$22 = /* @__PURE__ */ (0, import_web11.template)(`<div class=dialkit-slider-wrapper><div><div class=dialkit-slider-hashmarks></div><div class=dialkit-slider-fill style="transition:background 0.15s"></div><div class=dialkit-slider-handle style="transform:translateY(-50%) scaleX(0.25) scaleY(1);opacity:0;background:rgba(255, 255, 255, 0.9)"></div><span class=dialkit-slider-label>`);
 var _tmpl$32 = /* @__PURE__ */ (0, import_web11.template)(`<input type=text class=dialkit-slider-input>`);
 var _tmpl$42 = /* @__PURE__ */ (0, import_web11.template)(`<span>`);
@@ -1188,7 +1201,7 @@ function Slider(props) {
       }, (_, i) => {
         const pct = (i + 1) * step() / (max() - min()) * 100;
         return (() => {
-          var _el$ = _tmpl$9();
+          var _el$ = _tmpl$10();
           (0, import_web18.setStyleProperty)(_el$, "left", `${pct}%`);
           return _el$;
         })();
@@ -1199,7 +1212,7 @@ function Slider(props) {
     }, (_, i) => {
       const pct = (i + 1) * 10;
       return (() => {
-        var _el$2 = _tmpl$9();
+        var _el$2 = _tmpl$10();
         (0, import_web18.setStyleProperty)(_el$2, "left", `${pct}%`);
         return _el$2;
       })();
@@ -1294,7 +1307,7 @@ var import_web25 = require("solid-js/web");
 var import_web26 = require("solid-js/web");
 var import_solid_js4 = require("solid-js");
 var import_motion3 = require("motion");
-var _tmpl$10 = /* @__PURE__ */ (0, import_web19.template)(`<div class=dialkit-segmented><div class=dialkit-segmented-pill style=left:0px;width:0px>`);
+var _tmpl$11 = /* @__PURE__ */ (0, import_web19.template)(`<div class=dialkit-segmented><div class=dialkit-segmented-pill style=left:0px;width:0px>`);
 var _tmpl$23 = /* @__PURE__ */ (0, import_web19.template)(`<button class=dialkit-segmented-button>`);
 function SegmentedControl(props) {
   let containerRef;
@@ -1364,7 +1377,7 @@ function SegmentedControl(props) {
     });
   });
   return (() => {
-    var _el$ = _tmpl$10(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$11(), _el$2 = _el$.firstChild;
     var _ref$ = containerRef;
     typeof _ref$ === "function" ? (0, import_web26.use)(_ref$, _el$) : containerRef = _el$;
     var _ref$2 = pillRef;
@@ -1392,10 +1405,10 @@ function SegmentedControl(props) {
 (0, import_web20.delegateEvents)(["click"]);
 
 // src/solid/components/Toggle.tsx
-var _tmpl$11 = /* @__PURE__ */ (0, import_web27.template)(`<div class=dialkit-labeled-control><span class=dialkit-labeled-control-label>`);
+var _tmpl$12 = /* @__PURE__ */ (0, import_web27.template)(`<div class=dialkit-labeled-control><span class=dialkit-labeled-control-label>`);
 function Toggle(props) {
   return (() => {
-    var _el$ = _tmpl$11(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$12(), _el$2 = _el$.firstChild;
     (0, import_web30.insert)(_el$2, () => props.label);
     (0, import_web30.insert)(_el$, (0, import_web28.createComponent)(SegmentedControl, {
       options: [{
@@ -1426,7 +1439,7 @@ var import_web31 = require("solid-js/web");
 var import_web32 = require("solid-js/web");
 var import_web33 = require("solid-js/web");
 var import_web34 = require("solid-js/web");
-var _tmpl$12 = /* @__PURE__ */ (0, import_web31.template)(`<svg><line y1=0 y2=140 stroke="rgba(255, 255, 255, 0.08)"stroke-width=1></svg>`, false, true, false);
+var _tmpl$13 = /* @__PURE__ */ (0, import_web31.template)(`<svg><line y1=0 y2=140 stroke="rgba(255, 255, 255, 0.08)"stroke-width=1></svg>`, false, true, false);
 var _tmpl$24 = /* @__PURE__ */ (0, import_web31.template)(`<svg><line x1=0 x2=256 stroke="rgba(255, 255, 255, 0.08)"stroke-width=1></svg>`, false, true, false);
 var _tmpl$33 = /* @__PURE__ */ (0, import_web31.template)(`<svg viewBox="0 0 256 140"class=dialkit-spring-viz><line x1=0 y1=70 x2=256 y2=70 stroke="rgba(255, 255, 255, 0.15)"stroke-width=1 stroke-dasharray=4,4></line><path fill=none stroke="rgba(255, 255, 255, 0.6)"stroke-width=2 stroke-linecap=round stroke-linejoin=round>`);
 function generateSpringCurve(stiffness, damping, mass, duration) {
@@ -1486,7 +1499,7 @@ function SpringVisualization(props) {
       const x = width / 4 * i;
       const y = height / 4 * i;
       lines.push((() => {
-        var _el$ = _tmpl$12();
+        var _el$ = _tmpl$13();
         (0, import_web34.setAttribute)(_el$, "x1", x);
         (0, import_web34.setAttribute)(_el$, "x2", x);
         return _el$;
@@ -1508,7 +1521,7 @@ function SpringVisualization(props) {
 }
 
 // src/solid/components/SpringControl.tsx
-var _tmpl$13 = /* @__PURE__ */ (0, import_web35.template)(`<div style=display:flex;flex-direction:column;gap:6px><div class=dialkit-labeled-control><span class=dialkit-labeled-control-label>Type`);
+var _tmpl$14 = /* @__PURE__ */ (0, import_web35.template)(`<div style=display:flex;flex-direction:column;gap:6px><div class=dialkit-labeled-control><span class=dialkit-labeled-control-label>Type`);
 function SpringControl(props) {
   const [mode, setMode] = (0, import_solid_js5.createSignal)(DialStore.getSpringMode(props.panelId, props.path));
   (0, import_solid_js5.onMount)(() => {
@@ -1578,7 +1591,7 @@ function SpringControl(props) {
     },
     defaultOpen: true,
     get children() {
-      var _el$ = _tmpl$13(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+      var _el$ = _tmpl$14(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
       (0, import_web37.insert)(_el$, (0, import_web38.createComponent)(SpringVisualization, {
         get spring() {
           return props.spring;
@@ -1662,11 +1675,11 @@ var import_web41 = require("solid-js/web");
 var import_web42 = require("solid-js/web");
 var import_web43 = require("solid-js/web");
 var import_solid_js6 = require("solid-js");
-var _tmpl$14 = /* @__PURE__ */ (0, import_web39.template)(`<div class=dialkit-text-control><label class=dialkit-text-label></label><input type=text class=dialkit-text-input>`);
+var _tmpl$15 = /* @__PURE__ */ (0, import_web39.template)(`<div class=dialkit-text-control><label class=dialkit-text-label></label><input type=text class=dialkit-text-input>`);
 function TextControl(props) {
   const inputId = (0, import_solid_js6.createUniqueId)();
   return (() => {
-    var _el$ = _tmpl$14(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _el$ = _tmpl$15(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     (0, import_web43.setAttribute)(_el$2, "for", inputId);
     (0, import_web42.insert)(_el$2, () => props.label);
     _el$3.$$input = (e) => props.onChange(e.currentTarget.value);
@@ -1691,7 +1704,7 @@ var import_web52 = require("solid-js/web");
 var import_solid_js7 = require("solid-js");
 var import_web53 = require("solid-js/web");
 var import_motion4 = require("motion");
-var _tmpl$15 = /* @__PURE__ */ (0, import_web44.template)(`<div class=dialkit-select-dropdown>`);
+var _tmpl$16 = /* @__PURE__ */ (0, import_web44.template)(`<div class=dialkit-select-dropdown>`);
 var _tmpl$25 = /* @__PURE__ */ (0, import_web44.template)(`<div class=dialkit-select-row><button class=dialkit-select-trigger><span class=dialkit-select-label></span><div class=dialkit-select-right><span class=dialkit-select-value></span><svg class=dialkit-select-chevron viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path d="M6 9.5L12 15.5L18 9.5">`);
 var _tmpl$34 = /* @__PURE__ */ (0, import_web44.template)(`<button class=dialkit-select-option>`);
 function toTitleCase(s) {
@@ -1839,7 +1852,7 @@ function SelectControl(props) {
                 return (0, import_web50.memo)(() => !!mounted())() && pos();
               },
               get children() {
-                var _el$7 = _tmpl$15();
+                var _el$7 = _tmpl$16();
                 (0, import_web52.use)((el) => {
                   dropdownRef = el;
                   const above = pos()?.above ?? false;
@@ -1892,7 +1905,7 @@ var import_web59 = require("solid-js/web");
 var import_web60 = require("solid-js/web");
 var import_web61 = require("solid-js/web");
 var import_solid_js8 = require("solid-js");
-var _tmpl$16 = /* @__PURE__ */ (0, import_web54.template)(`<input type=text class=dialkit-color-hex-input autofocus>`);
+var _tmpl$17 = /* @__PURE__ */ (0, import_web54.template)(`<input type=text class=dialkit-color-hex-input autofocus>`);
 var _tmpl$26 = /* @__PURE__ */ (0, import_web54.template)(`<div class=dialkit-color-control><label class=dialkit-color-label></label><div class=dialkit-color-inputs><button class=dialkit-color-swatch title="Pick color"></button><input type=color class=dialkit-color-picker-native>`);
 var _tmpl$35 = /* @__PURE__ */ (0, import_web54.template)(`<span class=dialkit-color-hex>`);
 var HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
@@ -1942,7 +1955,7 @@ function ColorControl(props) {
         })();
       },
       get children() {
-        var _el$4 = _tmpl$16();
+        var _el$4 = _tmpl$17();
         _el$4.$$keydown = handleKeyDown;
         _el$4.addEventListener("blur", handleTextSubmit);
         _el$4.$$input = (e) => setEditValue(e.currentTarget.value);
@@ -1985,7 +1998,7 @@ var import_web70 = require("solid-js/web");
 var import_solid_js9 = require("solid-js");
 var import_web71 = require("solid-js/web");
 var import_motion5 = require("motion");
-var _tmpl$17 = /* @__PURE__ */ (0, import_web62.template)(`<div class="dialkit-root dialkit-preset-dropdown"style=position:fixed><div class=dialkit-preset-item><span class=dialkit-preset-name>Version 1`);
+var _tmpl$18 = /* @__PURE__ */ (0, import_web62.template)(`<div class="dialkit-root dialkit-preset-dropdown"style=position:fixed><div class=dialkit-preset-item><span class=dialkit-preset-name>Version 1`);
 var _tmpl$27 = /* @__PURE__ */ (0, import_web62.template)(`<div class=dialkit-preset-manager><button class=dialkit-preset-trigger><span class=dialkit-preset-label></span><svg class=dialkit-select-chevron viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path d="M6 9.5L12 15.5L18 9.5">`);
 var _tmpl$36 = /* @__PURE__ */ (0, import_web62.template)(`<div class=dialkit-preset-item><span class=dialkit-preset-name></span><button class=dialkit-preset-delete title="Delete preset"><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M5 6.5L5.80734 18.2064C5.91582 19.7794 7.22348 21 8.80023 21H15.1998C16.7765 21 18.0842 19.7794 18.1927 18.2064L19 6.5"></path><path d="M10 11V16"></path><path d="M14 11V16"></path><path d="M3.5 6H20.5"></path><path d="M8.07092 5.74621C8.42348 3.89745 10.0485 2.5 12 2.5C13.9515 2.5 15.5765 3.89745 15.9291 5.74621">`);
 function PresetManager(props) {
@@ -2125,7 +2138,7 @@ function PresetManager(props) {
                 return mounted();
               },
               get children() {
-                var _el$5 = _tmpl$17(), _el$6 = _el$5.firstChild;
+                var _el$5 = _tmpl$18(), _el$6 = _el$5.firstChild;
                 (0, import_web70.use)((el) => {
                   dropdownRef = el;
                   (0, import_motion5.animate)(el, {
@@ -2189,7 +2202,7 @@ function PresetManager(props) {
 (0, import_web63.delegateEvents)(["click"]);
 
 // src/solid/components/Panel.tsx
-var _tmpl$18 = /* @__PURE__ */ (0, import_web72.template)(`<button class=dialkit-button>`);
+var _tmpl$19 = /* @__PURE__ */ (0, import_web72.template)(`<button class=dialkit-button>`);
 var _tmpl$28 = /* @__PURE__ */ (0, import_web72.template)(`<button class=dialkit-toolbar-add title="Add preset"><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round><path d="M4 6H20"></path><path d="M4 12H10"></path><path d="M15 15L21 15"></path><path d="M18 12V18"></path><path d="M4 18H10">`);
 var _tmpl$37 = /* @__PURE__ */ (0, import_web72.template)(`<button class=dialkit-toolbar-copy title="Copy parameters"><span class=dialkit-toolbar-copy-icon-wrap><span class=dialkit-toolbar-copy-icon style=opacity:1;transform:scale(1);filter:blur(0px)><svg viewBox="0 0 24 24"fill=none width=16 height=16><path d="M8 6C8 4.34315 9.34315 3 11 3H13C14.6569 3 16 4.34315 16 6V7H8V6Z"stroke=currentColor stroke-width=2 stroke-linejoin=round></path><path d="M19.2405 16.1852L18.5436 14.3733C18.4571 14.1484 18.241 14 18 14C17.759 14 17.5429 14.1484 17.4564 14.3733L16.7595 16.1852C16.658 16.4493 16.4493 16.658 16.1852 16.7595L14.3733 17.4564C14.1484 17.5429 14 17.759 14 18C14 18.241 14.1484 18.4571 14.3733 18.5436L16.1852 19.2405C16.4493 19.342 16.658 19.5507 16.7595 19.8148L17.4564 21.6267C17.5429 21.8516 17.759 22 18 22C18.241 22 18.4571 21.8516 18.5436 21.6267L19.2405 19.8148C19.342 19.5507 19.5507 19.342 19.8148 19.2405L21.6267 18.5436C21.8516 18.4571 22 18.241 22 18C22 17.759 21.8516 17.5429 21.6267 17.4564L19.8148 16.7595C19.5507 16.658 19.342 16.4493 19.2405 16.1852Z"fill=currentColor></path><path d="M16 5H17C18.6569 5 20 6.34315 20 8V11M8 5H7C5.34315 5 4 6.34315 4 8V18C4 19.6569 5.34315 21 7 21H12"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round></path></svg></span><span class=dialkit-toolbar-copy-icon style=opacity:0;transform:scale(0.5);filter:blur(4px)><svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round width=16 height=16><path d="M5 12.75L10 19L19 5"></path></svg></span></span>Copy`);
 var _tmpl$43 = /* @__PURE__ */ (0, import_web72.template)(`<div class=dialkit-panel-wrapper>`);
@@ -2416,7 +2429,7 @@ Apply these values as the new defaults in the createDialKit call.`;
         return props.panel.controls;
       },
       children: (control) => (0, import_web76.memo)(() => (0, import_web76.memo)(() => control.type === "action")() ? (() => {
-        var _el$ = _tmpl$18();
+        var _el$ = _tmpl$19();
         _el$.$$click = () => DialStore.triggerAction(props.panel.id, control.path);
         (0, import_web75.insert)(_el$, () => control.label);
         return _el$;
@@ -2469,6 +2482,9 @@ Apply these values as the new defaults in the createDialKit call.`;
         return props.defaultOpen ?? true;
       },
       isRoot: true,
+      get inline() {
+        return props.inline ?? false;
+      },
       onOpenChange: setIsPanelOpen,
       toolbar,
       get children() {
@@ -2481,10 +2497,11 @@ Apply these values as the new defaults in the createDialKit call.`;
 (0, import_web73.delegateEvents)(["click", "pointerdown", "pointerup"]);
 
 // src/solid/components/DialRoot.tsx
-var _tmpl$19 = /* @__PURE__ */ (0, import_web78.template)(`<div class=dialkit-root><div class=dialkit-panel>`);
+var _tmpl$20 = /* @__PURE__ */ (0, import_web78.template)(`<div class=dialkit-root><div class=dialkit-panel>`);
 function DialRoot(props) {
   const [panels, setPanels] = (0, import_solid_js11.createSignal)([]);
   const [mounted, setMounted] = (0, import_solid_js11.createSignal)(false);
+  const inline = () => (props.mode ?? "popover") === "inline";
   (0, import_solid_js11.onMount)(() => {
     setMounted(true);
     setPanels(DialStore.getPanels());
@@ -2493,30 +2510,56 @@ function DialRoot(props) {
     });
     (0, import_solid_js11.onCleanup)(unsub);
   });
-  return (0, import_web82.createComponent)(import_solid_js11.Show, {
+  const content = () => (() => {
+    var _el$ = _tmpl$20(), _el$2 = _el$.firstChild;
+    (0, import_web82.insert)(_el$2, (0, import_web83.createComponent)(import_solid_js11.For, {
+      get each() {
+        return panels();
+      },
+      children: (panel) => (0, import_web83.createComponent)(Panel, {
+        panel,
+        get defaultOpen() {
+          return inline() || (props.defaultOpen ?? true);
+        },
+        get inline() {
+          return inline();
+        }
+      })
+    }));
+    (0, import_web81.effect)((_p$) => {
+      var _v$ = props.mode ?? "popover", _v$2 = inline() ? void 0 : props.position ?? "top-right", _v$3 = props.mode ?? "popover";
+      _v$ !== _p$.e && (0, import_web80.setAttribute)(_el$, "data-mode", _p$.e = _v$);
+      _v$2 !== _p$.t && (0, import_web80.setAttribute)(_el$2, "data-position", _p$.t = _v$2);
+      _v$3 !== _p$.a && (0, import_web80.setAttribute)(_el$2, "data-mode", _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    });
+    return _el$;
+  })();
+  return (0, import_web83.createComponent)(import_solid_js11.Show, {
     get when() {
-      return (0, import_web83.memo)(() => !!(mounted() && typeof window !== "undefined"))() && panels().length > 0;
+      return (0, import_web79.memo)(() => !!(mounted() && typeof window !== "undefined"))() && panels().length > 0;
     },
     get children() {
-      return (0, import_web82.createComponent)(import_web84.Portal, {
-        get mount() {
-          return document.body;
+      return (0, import_web83.createComponent)(import_solid_js11.Show, {
+        get when() {
+          return !inline();
+        },
+        get fallback() {
+          return content();
         },
         get children() {
-          var _el$ = _tmpl$19(), _el$2 = _el$.firstChild;
-          (0, import_web81.insert)(_el$2, (0, import_web82.createComponent)(import_solid_js11.For, {
-            get each() {
-              return panels();
+          return (0, import_web83.createComponent)(import_web84.Portal, {
+            get mount() {
+              return document.body;
             },
-            children: (panel) => (0, import_web82.createComponent)(Panel, {
-              panel,
-              get defaultOpen() {
-                return props.defaultOpen ?? true;
-              }
-            })
-          }));
-          (0, import_web80.effect)(() => (0, import_web79.setAttribute)(_el$2, "data-position", props.position ?? "top-right"));
-          return _el$;
+            get children() {
+              return content();
+            }
+          });
         }
       });
     }
@@ -2530,11 +2573,11 @@ var import_web87 = require("solid-js/web");
 var import_web88 = require("solid-js/web");
 var import_web89 = require("solid-js/web");
 var import_solid_js12 = require("solid-js");
-var _tmpl$20 = /* @__PURE__ */ (0, import_web85.template)(`<div class=dialkit-button-group>`);
+var _tmpl$21 = /* @__PURE__ */ (0, import_web85.template)(`<div class=dialkit-button-group>`);
 var _tmpl$29 = /* @__PURE__ */ (0, import_web85.template)(`<button class=dialkit-button>`);
 function ButtonGroup(props) {
   return (() => {
-    var _el$ = _tmpl$20();
+    var _el$ = _tmpl$21();
     (0, import_web88.insert)(_el$, (0, import_web89.createComponent)(import_solid_js12.For, {
       get each() {
         return props.buttons;