fix(docs): convert invalid self-closing tags to proper closing tags f…

…or Svelte 5
chakra-ui · Nov 5, 2024 · 0362553 · 0362553
1 parent bfbbed8
commit 0362553
Show file tree

Hide file tree

Showing 20 changed files with 32 additions and 32 deletions.
diff --git a/website/data/snippets/svelte/checkbox/usage.mdx b/website/data/snippets/svelte/checkbox/usage.mdx
@@ -11,7 +11,7 @@
   <span {...api.getLabelProps()}>
     Input is {api.checked ? "checked" : "unchecked"}
   </span>
-  <div {...api.getControlProps()} />
+  <div {...api.getControlProps()}></div>
   <input {...api.getHiddenInputProps()} />
 </label>
 ```
diff --git a/website/data/snippets/svelte/color-picker/usage.mdx b/website/data/snippets/svelte/color-picker/usage.mdx
@@ -15,8 +15,8 @@
 
   <div {...api.getControlProps()}>
     <button {...api.getTriggerProps()}>
-      <div {...api.getTransparencyGridProps({ size: "10px" })} />
-      <div {...api.getSwatchProps({ value: api.value })} />
+      <div {...api.getTransparencyGridProps({ size: "10px" })}></div>
+      <div {...api.getSwatchProps({ value: api.value })}></div>
     </button>
     <input {...api.getChannelInputProps({ channel: "hex" })} />
     <input {...api.getChannelInputProps({ channel: "alpha" })} />
@@ -25,19 +25,19 @@
   <div {...api.getPositionerProps()}>
     <div {...api.getContentProps()}>
       <div {...api.getAreaProps()}>
-        <div {...api.getAreaBackgroundProps()} />
-        <div {...api.getAreaThumbProps()} />
+        <div {...api.getAreaBackgroundProps()}></div>
+        <div {...api.getAreaThumbProps()}></div>
       </div>
 
       <div {...api.getChannelSliderProps({ channel: "hue" })}>
-        <div {...api.getChannelSliderTrackProps({ channel: "hue" })} />
-        <div {...api.getChannelSliderThumbProps({ channel: "hue" })} />
+        <div {...api.getChannelSliderTrackProps({ channel: "hue" })}></div>
+        <div {...api.getChannelSliderThumbProps({ channel: "hue" })}></div>
       </div>
 
       <div {...api.getChannelSliderProps({ channel: "alpha" })}>
-        <div {...api.getTransparencyGridProps({ size: "12px" })} />
-        <div {...api.getChannelSliderTrackProps({ channel: "alpha" })} />
-        <div {...api.getChannelSliderThumbProps({ channel: "alpha" })} />
+        <div {...api.getTransparencyGridProps({ size: "12px" })}></div>
+        <div {...api.getChannelSliderTrackProps({ channel: "alpha" })}></div>
+        <div {...api.getChannelSliderThumbProps({ channel: "alpha" })}></div>
       </div>
     </div>
   </div>

diff --git a/website/data/snippets/svelte/color-picker/with-preview.mdx b/website/data/snippets/svelte/color-picker/with-preview.mdx
@@ -10,8 +10,8 @@
 
 <div {...api.getRootProps()}>
   <div>
-    <div {...api.getTransparencyGridProps({ size: "4px" })} />
-    <div {...api.getSwatchProps({ value: api.value })} />
+    <div {...api.getTransparencyGridProps({ size: "4px" })}></div>
+    <div {...api.getSwatchProps({ value: api.value })}></div>
   </div>
   <!-- ... -->
 </div>

diff --git a/website/data/snippets/svelte/color-picker/with-swatches.mdx b/website/data/snippets/svelte/color-picker/with-swatches.mdx
@@ -18,8 +18,8 @@
         {#each presets as preset}
           <button {...api.getSwatchTriggerProps({ value: preset })}>
             <div style="position:relative;">
-              <div {...api.getTransparencyGridProps({ size: "4px" })} />
-              <div {...api.getSwatchProps({ value: preset })} />
+              <div {...api.getTransparencyGridProps({ size: "4px" })}></div>
+              <div {...api.getSwatchProps({ value: preset })}></div>
             </div>
           </button>
         {/each}

diff --git a/website/data/snippets/svelte/dialog/usage.mdx b/website/data/snippets/svelte/dialog/usage.mdx
@@ -9,7 +9,7 @@
 
 <button {...api.getTriggerProps()}>Open Dialog</button>
 {#if api.open}
-  <div use:portal {...api.getBackdropProps()} />
+  <div use:portal {...api.getBackdropProps()}></div>
   <div use:portal {...api.getPositionerProps()}>
     <div {...api.getContentProps()}>
       <h2 {...api.getTitleProps()}>Edit profile</h2>

diff --git a/website/data/snippets/svelte/editable/custom-controls.mdx b/website/data/snippets/svelte/editable/custom-controls.mdx
@@ -10,7 +10,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getAreaProps()}>
     <input {...api.getInputProps()} />
-    <span {...api.getPreviewProps()} />
+    <span {...api.getPreviewProps()}></span>
   </div>
   <div>
     {#if !api.editing}

diff --git a/website/data/snippets/svelte/editable/usage.mdx b/website/data/snippets/svelte/editable/usage.mdx
@@ -10,7 +10,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getAreaProps()}>
     <input {...api.getInputProps()} />
-    <span {...api.getPreviewProps()} />
+    <span {...api.getPreviewProps()}></span>
   </div>
 </div>
 ```
diff --git a/website/data/snippets/svelte/hover-card/usage.mdx b/website/data/snippets/svelte/hover-card/usage.mdx
@@ -15,7 +15,7 @@
     <div {...api.getPositionerProps()}>
       <div {...api.getContentProps()}>
         <div {...api.getArrowProps()}>
-          <div {...api.getArrowTipProps()} />
+          <div {...api.getArrowTipProps()}></div>
         </div>
         Twitter Preview
       </div>

diff --git a/website/data/snippets/svelte/number-input/scrubber.mdx b/website/data/snippets/svelte/number-input/scrubber.mdx
@@ -12,7 +12,7 @@
 <div {...api.getRootProps()}>
   <label {...api.getLabelProps()}>Enter number:</label>
   <div>
-    <div {...api.getScrubberProps()} />
+    <div {...api.getScrubberProps()}></div>
     <input {...api.getInputProps()} />
   </div>
 </div>

diff --git a/website/data/snippets/svelte/progress/usage.mdx b/website/data/snippets/svelte/progress/usage.mdx
@@ -11,7 +11,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getLabelProps()}>Upload progress</div>
   <div {...api.getTrackProps()}>
-    <div {...api.getRangeProps()} />
+    <div {...api.getRangeProps()}></div>
   </div>
 </div>
 ```
diff --git a/website/data/snippets/svelte/qr-code/usage.mdx b/website/data/snippets/svelte/qr-code/usage.mdx
@@ -9,7 +9,7 @@
 
 <div {...api.getRootProps()}>
   <svg {...api.getFrameProps()}>
-    <path {...api.getPatternProps()} />
+    <path {...api.getPatternProps()}></span>
   </svg>
   <div {...api.getOverlayProps()}>
     <img

diff --git a/website/data/snippets/svelte/radio-group/usage.mdx b/website/data/snippets/svelte/radio-group/usage.mdx
@@ -21,7 +21,7 @@
     <label {...api.getItemProps({ value: opt.id })}>
       <span {...api.getItemTextProps({ value: opt.id })}>{opt.label}</span>
       <input {...api.getItemHiddenInputProps({ value: opt.id })} />
-      <div {...api.getItemControlProps({ value: opt.id })} />
+      <div {...api.getItemControlProps({ value: opt.id })}></div>
     </label>
   {/each}
 </div>

diff --git a/website/data/snippets/svelte/range-slider/usage.mdx b/website/data/snippets/svelte/range-slider/usage.mdx
@@ -17,7 +17,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getControlProps()}>
     <div {...api.getTrackProps()}>
-      <div {...api.getRangeProps()} />
+      <div {...api.getRangeProps()}></div>
     </div>
     {#each api.value as _, index}
       <div {...api.getThumbProps({ index })}>

diff --git a/website/data/snippets/svelte/signature-pad/usage.mdx b/website/data/snippets/svelte/signature-pad/usage.mdx
@@ -27,7 +27,7 @@
 
     <button {...api.getClearTriggerProps()}>X</button>
 
-    <div {...api.getGuideProps()} />
+    <div {...api.getGuideProps()}></div>
   </div>
 </div>
 ```
diff --git a/website/data/snippets/svelte/slider/tick-marks.mdx b/website/data/snippets/svelte/slider/tick-marks.mdx
@@ -4,7 +4,7 @@
 <div {...api.getRootProps()}>
   <div {...api.getControlProps()}>
     <div {...api.getTrackProps()}>
-      <div {...api.getRangeProps()} />
+      <div {...api.getRangeProps()}></div>
     </div>
     {#each api.value as _, index}
       <div {...api.getThumbProps({ index })}>

diff --git a/website/data/snippets/svelte/slider/usage.mdx b/website/data/snippets/svelte/slider/usage.mdx
@@ -20,7 +20,7 @@
   </div>
   <div {...api.getControlProps()}>
     <div {...api.getTrackProps()}>
-      <div {...api.getRangeProps()} />
+      <div {...api.getRangeProps()}></div>
     </div>
     {#each api.value as _, index}
       <div {...api.getThumbProps({ index })}>

diff --git a/website/data/snippets/svelte/splitter/usage.mdx b/website/data/snippets/svelte/splitter/usage.mdx
@@ -20,7 +20,7 @@
   <div {...api.getPanelProps({ id: "a" })}>
     <p>A</p>
   </div>
-  <div {...api.getResizeTriggerProps({ id: "a:b" })} />
+  <div {...api.getResizeTriggerProps({ id: "a:b" })}></div>
   <div {...api.getPanelProps({ id: "b" })}>
     <p>B</p>
   </div>

diff --git a/website/data/snippets/svelte/switch/usage.mdx b/website/data/snippets/svelte/switch/usage.mdx
@@ -11,7 +11,7 @@
 <label {...api.getRootProps()}>
   <input {...api.getHiddenInputProps()} />
   <span {...api.getControlProps()}>
-    <span {...api.getThumbProps()} />
+    <span {...api.getThumbProps()}></span>
   </span>
   <span {...api.getLabelProps()}>{api.checked ? "On" : "Off"}</span>
 </label>

diff --git a/website/data/snippets/svelte/tabs/with-indicator.mdx b/website/data/snippets/svelte/tabs/with-indicator.mdx
@@ -8,7 +8,7 @@
         {item.label}
       </button>
     {/each}
-    <div {...api.getIndicatorProps()} />
+    <div {...api.getIndicatorProps()}></div>
   </div>
   {#each data as item}
     <div {...api.getContentProps({ value: item.value })}>

diff --git a/website/data/snippets/svelte/tour/usage.mdx b/website/data/snippets/svelte/tour/usage.mdx
@@ -15,14 +15,14 @@
   {#if api.step && api.open}
     <div use:portal>
       {#if api.step.backdrop}
-        <div {...api.getBackdropProps()} />
+        <div {...api.getBackdropProps()}></div>
       {/if}
-      <div {...api.getSpotlightProps()} />
+      <div {...api.getSpotlightProps()}></div>
       <div {...api.getPositionerProps()}>
         <div {...api.getContentProps()}>
           {#if api.step.arrow}
             <div {...api.getArrowProps()}>
-              <div {...api.getArrowTipProps()} />
+              <div {...api.getArrowTipProps()}></div>
             </div>
           {/if}