@lostgradient/cinder 0.8.0 → 0.9.0

package/dist/components/experimental/json-viewer/index.js

@@ -73,7 +73,7 @@ var root_1 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
 var root_2 = $.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
 var root_3 = $.from_html(`<li role="none"><!></li>`);
 var root_4 = $.from_html(`<ul class="cinder-json-viewer__children" role="group"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
-var root_5 = $.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
+var root_5 = $.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <svg class="cinder-json-viewer__caret" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
 var root_6 = $.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
 var root_7 = $.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
 function _json_viewer_node($$anchor, $$props) {
@@ -125,20 +125,20 @@ function _json_viewer_node($$anchor, $$props) {
             $$render(consequent);
         });
       }
-      var span_2 = $.sibling(node_1, 2);
-      var span_3 = $.sibling(span_2, 2);
-      var text_1 = $.child(span_3, true);
-      $.reset(span_3);
-      var node_2 = $.sibling(span_3, 2);
+      var svg = $.sibling(node_1, 2);
+      var span_2 = $.sibling(svg, 2);
+      var text_1 = $.child(span_2, true);
+      $.reset(span_2);
+      var node_2 = $.sibling(span_2, 2);
       {
         var consequent_1 = ($$anchor3) => {
           var fragment_1 = root_2();
-          var span_4 = $.first_child(fragment_1);
-          var text_2 = $.child(span_4);
+          var span_3 = $.first_child(fragment_1);
+          var text_2 = $.child(span_3);
+          $.reset(span_3);
+          var span_4 = $.sibling(span_3, 2);
+          var text_3 = $.child(span_4, true);
           $.reset(span_4);
-          var span_5 = $.sibling(span_4, 2);
-          var text_3 = $.child(span_5, true);
-          $.reset(span_5);
           $.template_effect(() => {
             $.set_text(text_2, `${$.get(itemCount) ?? ""} ${$.get(itemCount) === 1 ? "item" : "items"}`);
             $.set_text(text_3, $.get(isArray) ? "]" : "}");
@@ -193,9 +193,9 @@ function _json_viewer_node($$anchor, $$props) {
             $.append($$anchor4, li);
           });
           $.reset(ul);
-          var span_6 = $.sibling(ul, 2);
-          var text_4 = $.child(span_6, true);
-          $.reset(span_6);
+          var span_5 = $.sibling(ul, 2);
+          var text_4 = $.child(span_5, true);
+          $.reset(span_5);
           $.template_effect(() => $.set_text(text_4, $.get(isArray) ? "]" : "}"));
           $.append($$anchor3, fragment_2);
         };
@@ -214,22 +214,22 @@ function _json_viewer_node($$anchor, $$props) {
         $.set_attribute(span, "aria-setsize", $$props.setSize);
         $.set_attribute(span, "tabindex", root() ? 0 : -1);
         $.set_attribute(button, "aria-label", $.get(toggleLabel));
-        $.set_attribute(span_2, "data-cinder-collapsed", $.get(collapsed) || undefined);
+        $.set_attribute(svg, "data-cinder-collapsed", $.get(collapsed) || undefined);
         $.set_text(text_1, $.get(isArray) ? "[" : "{");
       }, [() => $.clsx(classNames("cinder-json-viewer__node"))]);
       $.delegated("click", button, () => $.set(collapsed, !$.get(collapsed)));
       $.append($$anchor2, span);
     };
     var consequent_5 = ($$anchor2) => {
-      var span_7 = root_6();
-      var node_5 = $.child(span_7);
+      var span_6 = root_6();
+      var node_5 = $.child(span_6);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_8 = root_1();
-          var text_5 = $.child(span_8);
-          $.reset(span_8);
+          var span_7 = root_1();
+          var text_5 = $.child(span_7);
+          $.reset(span_7);
           $.template_effect(() => $.set_text(text_5, `${$$props.keyName ?? ""}:`));
-          $.append($$anchor3, span_8);
+          $.append($$anchor3, span_7);
         };
         $.if(node_5, ($$render) => {
           if ($$props.keyName !== undefined)
@@ -237,33 +237,33 @@ function _json_viewer_node($$anchor, $$props) {
         });
       }
       $.next(2);
-      $.reset(span_7);
+      $.reset(span_6);
       $.template_effect(() => {
-        $.set_attribute(span_7, "tabindex", root() ? 0 : -1);
-        $.set_attribute(span_7, "aria-level", $$props.depth + 1);
-        $.set_attribute(span_7, "aria-posinset", $$props.position);
-        $.set_attribute(span_7, "aria-setsize", $$props.setSize);
+        $.set_attribute(span_6, "tabindex", root() ? 0 : -1);
+        $.set_attribute(span_6, "aria-level", $$props.depth + 1);
+        $.set_attribute(span_6, "aria-posinset", $$props.position);
+        $.set_attribute(span_6, "aria-setsize", $$props.setSize);
       });
-      $.append($$anchor2, span_7);
+      $.append($$anchor2, span_6);
     };
     var alternate_1 = ($$anchor2) => {
-      var span_9 = root_7();
-      var node_6 = $.child(span_9);
+      var span_8 = root_7();
+      var node_6 = $.child(span_8);
       {
         var consequent_6 = ($$anchor3) => {
-          var span_10 = root_1();
-          var text_6 = $.child(span_10);
-          $.reset(span_10);
+          var span_9 = root_1();
+          var text_6 = $.child(span_9);
+          $.reset(span_9);
           $.template_effect(() => $.set_text(text_6, `${$$props.keyName ?? ""}:`));
-          $.append($$anchor3, span_10);
+          $.append($$anchor3, span_9);
         };
         $.if(node_6, ($$render) => {
           if ($$props.keyName !== undefined)
             $$render(consequent_6);
         });
       }
-      var span_11 = $.sibling(node_6, 2);
-      var node_7 = $.child(span_11);
+      var span_10 = $.sibling(node_6, 2);
+      var node_7 = $.child(span_10);
       {
         var consequent_7 = ($$anchor3) => {
           var text_7 = $.text();
@@ -282,16 +282,16 @@ function _json_viewer_node($$anchor, $$props) {
             $$render(alternate, -1);
         });
       }
-      $.reset(span_11);
-      $.reset(span_9);
+      $.reset(span_10);
+      $.reset(span_8);
       $.template_effect(($0) => {
-        $.set_attribute(span_9, "tabindex", root() ? 0 : -1);
-        $.set_attribute(span_9, "aria-level", $$props.depth + 1);
-        $.set_attribute(span_9, "aria-posinset", $$props.position);
-        $.set_attribute(span_9, "aria-setsize", $$props.setSize);
-        $.set_attribute(span_11, "data-cinder-type", $0);
+        $.set_attribute(span_8, "tabindex", root() ? 0 : -1);
+        $.set_attribute(span_8, "aria-level", $$props.depth + 1);
+        $.set_attribute(span_8, "aria-posinset", $$props.position);
+        $.set_attribute(span_8, "aria-setsize", $$props.setSize);
+        $.set_attribute(span_10, "data-cinder-type", $0);
       }, [() => valueClass($$props.value)]);
-      $.append($$anchor2, span_9);
+      $.append($$anchor2, span_8);
     };
     $.if(node, ($$render) => {
       if ($.get(isObject) && !$.get(tooDeep))
@@ -458,4 +458,4 @@ export {
   json_viewer_default as JsonViewer
 };
 
-//# debugId=ACE2DF16F45F67A364756E2164756E21
+//# debugId=15826ABC0A59038C64756E2164756E21

package/dist/components/json-schema-editor/index.js

@@ -2402,7 +2402,10 @@ function Tab($$anchor, $$props) {
   let disabled = $5.prop($$props, "disabled", 3, false);
   const tabs = getTabsContext();
   const tabId = $5.derived(() => $$props.id ?? `${tabs.baseId}-tab-${$$props.value}`);
-  const panelId = $5.derived(() => `${tabs.baseId}-panel-${$$props.value}`);
+  const panelId = $5.derived(() => {
+    const controlsId = $$props.controls?.trim();
+    return controlsId ? controlsId : `${tabs.baseId}-panel-${$$props.value}`;
+  });
   const isActive = $5.derived(() => tabs.isActive($$props.value));
   const isFocusable = $5.derived(() => tabs.isFocusable($$props.value));
   let buttonElement = $5.state(undefined);
@@ -9933,4 +9936,4 @@ export {
   Json_schema_editor as JsonSchemaEditor
 };
 
-//# debugId=39E74F814CF9901264756E2164756E21
+//# debugId=01EFCA11A848DB9964756E2164756E21

package/dist/components/json-viewer/index.js

@@ -73,7 +73,7 @@ var root_1 = $.from_html(`<span class="cinder-json-viewer__key"> </span>`);
 var root_2 = $.from_html(`<span class="cinder-json-viewer__summary"> </span> <span class="cinder-json-viewer__brace"> </span>`, 1);
 var root_3 = $.from_html(`<li role="none"><!></li>`);
 var root_4 = $.from_html(`<ul class="cinder-json-viewer__children" role="group"></ul> <span class="cinder-json-viewer__brace"> </span>`, 1);
-var root_5 = $.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <span class="cinder-json-viewer__caret"></span> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
+var root_5 = $.from_html(`<span role="treeitem"><button type="button" class="cinder-json-viewer__toggle" tabindex="-1"><!> <svg class="cinder-json-viewer__caret" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"></path></svg> <span class="cinder-json-viewer__brace"> </span> <!></button> <!></span>`);
 var root_6 = $.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__too-deep">…</span></span>`);
 var root_7 = $.from_html(`<span class="cinder-json-viewer__node" role="treeitem"><!> <span class="cinder-json-viewer__value"><!></span></span>`);
 function _json_viewer_node($$anchor, $$props) {
@@ -125,20 +125,20 @@ function _json_viewer_node($$anchor, $$props) {
             $$render(consequent);
         });
       }
-      var span_2 = $.sibling(node_1, 2);
-      var span_3 = $.sibling(span_2, 2);
-      var text_1 = $.child(span_3, true);
-      $.reset(span_3);
-      var node_2 = $.sibling(span_3, 2);
+      var svg = $.sibling(node_1, 2);
+      var span_2 = $.sibling(svg, 2);
+      var text_1 = $.child(span_2, true);
+      $.reset(span_2);
+      var node_2 = $.sibling(span_2, 2);
       {
         var consequent_1 = ($$anchor3) => {
           var fragment_1 = root_2();
-          var span_4 = $.first_child(fragment_1);
-          var text_2 = $.child(span_4);
+          var span_3 = $.first_child(fragment_1);
+          var text_2 = $.child(span_3);
+          $.reset(span_3);
+          var span_4 = $.sibling(span_3, 2);
+          var text_3 = $.child(span_4, true);
           $.reset(span_4);
-          var span_5 = $.sibling(span_4, 2);
-          var text_3 = $.child(span_5, true);
-          $.reset(span_5);
           $.template_effect(() => {
             $.set_text(text_2, `${$.get(itemCount) ?? ""} ${$.get(itemCount) === 1 ? "item" : "items"}`);
             $.set_text(text_3, $.get(isArray) ? "]" : "}");
@@ -193,9 +193,9 @@ function _json_viewer_node($$anchor, $$props) {
             $.append($$anchor4, li);
           });
           $.reset(ul);
-          var span_6 = $.sibling(ul, 2);
-          var text_4 = $.child(span_6, true);
-          $.reset(span_6);
+          var span_5 = $.sibling(ul, 2);
+          var text_4 = $.child(span_5, true);
+          $.reset(span_5);
           $.template_effect(() => $.set_text(text_4, $.get(isArray) ? "]" : "}"));
           $.append($$anchor3, fragment_2);
         };
@@ -214,22 +214,22 @@ function _json_viewer_node($$anchor, $$props) {
         $.set_attribute(span, "aria-setsize", $$props.setSize);
         $.set_attribute(span, "tabindex", root() ? 0 : -1);
         $.set_attribute(button, "aria-label", $.get(toggleLabel));
-        $.set_attribute(span_2, "data-cinder-collapsed", $.get(collapsed) || undefined);
+        $.set_attribute(svg, "data-cinder-collapsed", $.get(collapsed) || undefined);
         $.set_text(text_1, $.get(isArray) ? "[" : "{");
       }, [() => $.clsx(classNames("cinder-json-viewer__node"))]);
       $.delegated("click", button, () => $.set(collapsed, !$.get(collapsed)));
       $.append($$anchor2, span);
     };
     var consequent_5 = ($$anchor2) => {
-      var span_7 = root_6();
-      var node_5 = $.child(span_7);
+      var span_6 = root_6();
+      var node_5 = $.child(span_6);
       {
         var consequent_4 = ($$anchor3) => {
-          var span_8 = root_1();
-          var text_5 = $.child(span_8);
-          $.reset(span_8);
+          var span_7 = root_1();
+          var text_5 = $.child(span_7);
+          $.reset(span_7);
           $.template_effect(() => $.set_text(text_5, `${$$props.keyName ?? ""}:`));
-          $.append($$anchor3, span_8);
+          $.append($$anchor3, span_7);
         };
         $.if(node_5, ($$render) => {
           if ($$props.keyName !== undefined)
@@ -237,33 +237,33 @@ function _json_viewer_node($$anchor, $$props) {
         });
       }
       $.next(2);
-      $.reset(span_7);
+      $.reset(span_6);
       $.template_effect(() => {
-        $.set_attribute(span_7, "tabindex", root() ? 0 : -1);
-        $.set_attribute(span_7, "aria-level", $$props.depth + 1);
-        $.set_attribute(span_7, "aria-posinset", $$props.position);
-        $.set_attribute(span_7, "aria-setsize", $$props.setSize);
+        $.set_attribute(span_6, "tabindex", root() ? 0 : -1);
+        $.set_attribute(span_6, "aria-level", $$props.depth + 1);
+        $.set_attribute(span_6, "aria-posinset", $$props.position);
+        $.set_attribute(span_6, "aria-setsize", $$props.setSize);
       });
-      $.append($$anchor2, span_7);
+      $.append($$anchor2, span_6);
     };
     var alternate_1 = ($$anchor2) => {
-      var span_9 = root_7();
-      var node_6 = $.child(span_9);
+      var span_8 = root_7();
+      var node_6 = $.child(span_8);
       {
         var consequent_6 = ($$anchor3) => {
-          var span_10 = root_1();
-          var text_6 = $.child(span_10);
-          $.reset(span_10);
+          var span_9 = root_1();
+          var text_6 = $.child(span_9);
+          $.reset(span_9);
           $.template_effect(() => $.set_text(text_6, `${$$props.keyName ?? ""}:`));
-          $.append($$anchor3, span_10);
+          $.append($$anchor3, span_9);
         };
         $.if(node_6, ($$render) => {
           if ($$props.keyName !== undefined)
             $$render(consequent_6);
         });
       }
-      var span_11 = $.sibling(node_6, 2);
-      var node_7 = $.child(span_11);
+      var span_10 = $.sibling(node_6, 2);
+      var node_7 = $.child(span_10);
       {
         var consequent_7 = ($$anchor3) => {
           var text_7 = $.text();
@@ -282,16 +282,16 @@ function _json_viewer_node($$anchor, $$props) {
             $$render(alternate, -1);
         });
       }
-      $.reset(span_11);
-      $.reset(span_9);
+      $.reset(span_10);
+      $.reset(span_8);
       $.template_effect(($0) => {
-        $.set_attribute(span_9, "tabindex", root() ? 0 : -1);
-        $.set_attribute(span_9, "aria-level", $$props.depth + 1);
-        $.set_attribute(span_9, "aria-posinset", $$props.position);
-        $.set_attribute(span_9, "aria-setsize", $$props.setSize);
-        $.set_attribute(span_11, "data-cinder-type", $0);
+        $.set_attribute(span_8, "tabindex", root() ? 0 : -1);
+        $.set_attribute(span_8, "aria-level", $$props.depth + 1);
+        $.set_attribute(span_8, "aria-posinset", $$props.position);
+        $.set_attribute(span_8, "aria-setsize", $$props.setSize);
+        $.set_attribute(span_10, "data-cinder-type", $0);
       }, [() => valueClass($$props.value)]);
-      $.append($$anchor2, span_9);
+      $.append($$anchor2, span_8);
     };
     $.if(node, ($$render) => {
       if ($.get(isObject) && !$.get(tooDeep))
@@ -446,4 +446,4 @@ export {
   Json_viewer as JsonViewer
 };
 
-//# debugId=CF93420DAAE7D7FE64756E2164756E21
+//# debugId=015E0D207D81A13964756E2164756E21

package/dist/components/json-viewer/json-viewer.css

@@ -80,12 +80,10 @@
   }
 
   .cinder-json-viewer__caret {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border-inline-start: 0.25rem solid transparent;
-    border-inline-end: 0.25rem solid transparent;
-    border-top: 0.375rem solid currentColor;
+    flex: 0 0 auto;
+    width: 0.75rem;
+    height: 0.75rem;
+    color: var(--cinder-text-muted);
     transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
   }
 
@@ -93,6 +91,12 @@
     transform: rotate(-90deg);
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .cinder-json-viewer__caret {
+      transition: none;
+    }
+  }
+
   .cinder-json-viewer__brace {
     color: var(--cinder-text-muted);
   }

package/dist/components/payload-inspector/index.d.ts

@@ -1,5 +1,5 @@
 import './payload-inspector.css';
 import PayloadInspector from './payload-inspector.svelte';
 export default PayloadInspector;
-export type { PayloadInspectorMeta, PayloadInspectorProps, PayloadInspectorSchemaProps, PayloadInspectorSchemaValue, PayloadInspectorView, } from './payload-inspector.types.ts';
+export type { PayloadInspectorProps, PayloadInspectorSchemaProps, PayloadInspectorSchemaValue, } from './payload-inspector.types.ts';
 export { PayloadInspector };