fix: use space internally

docs/components/card.md

@@ -241,7 +241,7 @@ import { RCard } from 'roughness'
     Horizontal padding of the card.
   </template>
 
-  <template #body:....name>..:</template>
+  <template #body:....name>...</template>
   <template #body:...:description>
 
   See [Space Styles](/components/space#styles).

docs/components/checkbox.md

@@ -213,7 +213,7 @@ const treeValue = ref<string | undefined>()
 <RSpace overflow>
 <RTable
   :columns="['name', 'type', 'default', 'description']"
-  :rows="['checked', 'graphics-options', 'indeterminate', 'label', 'reactions', 'value']"
+  :rows="['checked', 'graphics-options', 'indeterminate', 'label', 'reactions', 'value', '...']"
 >
   <template #body:*:name="{ row }">{{ row }}</template>
 
@@ -244,12 +244,12 @@ const treeValue = ref<string | undefined>()
 
   </template>
 
-  <template #body:value:type>
+  <template #body:label:type>
 
   `string`
 
   </template>
-  <template #body:value:description>
+  <template #body:label:description>
     Item label when checked and displayed, e.g. in Select.
   </template>
 
@@ -295,6 +295,14 @@ const treeValue = ref<string | undefined>()
   <template #body:value:description>
     Item value when checked in the CheckboxGroup.
   </template>
+
+  <template #body:...:description>
+
+  See [Space Props](/components/space#props).
+
+  Unlike Space, the default value of Checkbox's `tag` is `label`.
+
+  </template>
 </RTable>
 </RSpace>
 
@@ -338,7 +346,7 @@ const treeValue = ref<string | undefined>()
 <RSpace overflow>
 <RTable
   :columns="['name', 'values', 'default', 'description']"
-  :rows="['border-color', 'border-width', 'checked-color', 'checked-width', 'control-size']"
+  :rows="['border-color', 'border-width', 'checked-color', 'checked-width', 'control-size', '...']"
 >
   <template #body:*:name="{ row }">--r-checkbox-{{ row }}</template>
 
@@ -411,6 +419,13 @@ const treeValue = ref<string | undefined>()
   <template #body:control-size:description>
     Size of the checkbox control.
   </template>
+
+  <template #body:....name>...</template>
+  <template #body:...:description>
+
+  See [Space Styles](/components/space#styles).
+
+  </template>
 </RTable>
 </RSpace>
 
@@ -486,7 +501,7 @@ const treeValue = ref<string | undefined>()
 >
   <template #body:*:name="{ row }">--r-checkbox-group-{{ row }}</template>
 
-  <template #body:....name>..:</template>
+  <template #body:....name>...</template>
   <template #body:...:description>
 
   See [Space Styles](/components/space#styles).

docs/components/dialog.md

@@ -179,7 +179,7 @@ function show() {
 >
   <template #body:*:name="{ row }">--r-dialog-{{ row }}</template>
 
-  <template #body:....name>..:</template>
+  <template #body:....name>...</template>
   <template #body:...:description>
 
   See [Card Styles](/components/card#styles).

docs/components/drawer.md

@@ -178,7 +178,7 @@ function showBottom() {
 >
   <template #body:*:name="{ row }">--r-drawer-{{ row }}</template>
 
-  <template #body:....name>..:</template>
+  <template #body:....name>...</template>
   <template #body:...:description>
 
   See [Dialog Styles](/components/dialog#styles).

docs/components/icon.md

@@ -145,7 +145,7 @@ See [Text](/components/text).
     Color of the icon.
   </template>
 
-  <template #body:....name>..:</template>
+  <template #body:....name>...</template>
   <template #body:...:description>
 
   See [Text Styles](/components/text#styles).

docs/components/link.md

@@ -147,7 +147,7 @@ See also [Button](/components/button#tag).
 
   </template>
 
-  <template #body:....name>..:</template>
+  <template #body:....name>...</template>
   <template #body:...:description>
 
   See [Text Styles](/components/text#styles).

docs/components/list.md

@@ -229,7 +229,7 @@ import { RList, RListItem } from 'roughness'
     Area width of the list marker.
   </template>
 
-  <template #body:....name>..:</template>
+  <template #body:....name>...</template>
   <template #body:...:description>
 
   See [Space Styles](/components/space#styles).

docs/components/switch.md

@@ -32,7 +32,7 @@ import { RSwitch } from 'roughness'
 <RSpace overflow>
 <RTable
   :columns="['name', 'type', 'default', 'description']"
-  :rows="['graphics-options', 'model-value', 'reactions']"
+  :rows="['graphics-options', 'model-value', 'reactions', '...']"
 >
   <template #body:*:name="{ row }">{{ row }}</template>
 
@@ -80,6 +80,14 @@ import { RSwitch } from 'roughness'
   See [Reactions](/guide/theme#reactions).
 
   </template>
+
+  <template #body:...:description>
+
+  See [Space Props](/components/space#props).
+
+  Unlike Space, the default value of Switch's `tag` is `label`.
+
+  </template>
 </RTable>
 </RSpace>
 
@@ -123,7 +131,7 @@ import { RSwitch } from 'roughness'
 <RSpace overflow>
 <RTable
   :columns="['name', 'values', 'default', 'description']"
-  :rows="['border-color', 'border-width', 'control-size', 'track-color', 'handle-color']"
+  :rows="['border-color', 'border-width', 'control-size', 'track-color', 'handle-color', '...']"
 >
   <template #body:*:name="{ row }">--r-switch-{{ row }}</template>
 
@@ -196,5 +204,12 @@ import { RSwitch } from 'roughness'
   <template #body:handle-color:description>
     Color of the switch handle.
   </template>
+
+  <template #body:....name>...</template>
+  <template #body:...:description>
+
+  See [Space Styles](/components/space#styles).
+
+  </template>
 </RTable>
 </RSpace>

src/checkbox/index.vue

@@ -7,6 +7,7 @@ import { useReactionState } from '../common/utils'
 import RGraphics from '../graphics/index.vue'
 import type { GraphicsProps } from '../graphics/utils'
 import { getFilledSizeOptions, getSVGSize, measureSVGSize } from '../graphics/utils'
+import RSpace from '../space/index.vue'
 import type { CheckboxValue } from './utils'
 import { labelsInjection, modelInjection, multipleInjection } from './utils'
 
@@ -117,7 +118,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </script>
 
 <template>
-  <label class="r-checkbox">
+  <RSpace tag="label" inline class="r-checkbox">
     <input
       v-model="internalChecked"
       :type="multiple === false ? 'radio' : 'checkbox'"
@@ -130,7 +131,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
       <RGraphics :options="graphicsOptions" @draw="draw" />
     </span>
     <slot>{{ label }}</slot>
-  </label>
+  </RSpace>
 </template>
 
 <style lang="scss" scoped>
@@ -140,7 +141,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   --r-checkbox-checked-color: var(--r-common-primary-color);
   --r-checkbox-checked-width: 2px;
   --r-checkbox-control-size: var(--r-common-line-height);
-  display: inline-flex;
+  position: relative;
   cursor: pointer;
   &:focus-within,
   &:not(:has(> .r-checkbox__input:disabled)):active {
@@ -153,15 +154,13 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 }
 .r-checkbox__input {
   appearance: none;
+  position: absolute;
   margin: 0;
 }
 .r-checkbox__control {
   flex: none;
   width: var(--r-checkbox-control-size);
   height: var(--r-checkbox-control-size);
-  &:not(:last-child) {
-    margin-inline-end: calc(var(--r-checkbox-control-size) / 4);
-  }
   .r-checkbox__input:disabled + & {
     opacity: 0.8;
   }

src/details/index.vue

@@ -8,6 +8,7 @@ import { useReactionState } from '../common/utils'
 import RGraphics from '../graphics/index.vue'
 import type { GraphicsProps } from '../graphics/utils'
 import { getSVGSize } from '../graphics/utils'
+import RSpace from '../space/index.vue'
 
 defineOptions({
   name: 'RDetails',
@@ -73,12 +74,12 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     class="r-details"
     @toggle="toggle"
   >
-    <summary ref="summary" class="r-details__summary">
+    <RSpace ref="summary" tag="summary" class="r-details__summary">
       <span class="r-details__summary-marker">
         <RGraphics :options="graphicsOptions" @draw="draw" />
       </span>
       <slot name="summary"></slot>
-    </summary>
+    </RSpace>
     <slot></slot>
   </details>
 </template>
@@ -107,7 +108,6 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   flex: none;
   width: var(--r-details-summary-marker-size);
   height: var(--r-details-summary-marker-size);
-  margin-inline-end: calc(var(--r-details-summary-marker-size) / 4);
   pointer-events: none;
 }
 </style>

src/switch/index.vue

@@ -7,6 +7,7 @@ import { useReactionState } from '../common/utils'
 import RGraphics from '../graphics/index.vue'
 import type { GraphicsProps } from '../graphics/utils'
 import { getFilledSizeOptions, getSVGSize, measureSVGSize } from '../graphics/utils'
+import RSpace from '../space/index.vue'
 
 defineOptions({
   name: 'RSwitch',
@@ -80,7 +81,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </script>
 
 <template>
-  <label class="r-switch">
+  <RSpace tag="label" inline class="r-switch">
     <input
       v-model="internalModelValue"
       :disabled="disabled"
@@ -91,7 +92,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
       <RGraphics :options="graphicsOptions" @draw="draw" />
     </span>
     <slot></slot>
-  </label>
+  </RSpace>
 </template>
 
 <style lang="scss" scoped>
@@ -101,7 +102,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   --r-switch-control-size: var(--r-common-line-height);
   --r-switch-track-color: var(--r-common-primary-color);
   --r-switch-handle-color: var(--r-common-background-color);
-  display: inline-flex;
+  position: relative;
   cursor: pointer;
   &:focus-within,
   &:not(:has(> .r-checkbox__input:disabled)):active {
@@ -114,15 +115,13 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 }
 .r-switch__input {
   appearance: none;
+  position: absolute;
   margin: 0;
 }
 .r-switch__control {
   flex: none;
   width: calc(var(--r-switch-control-size) * 2);
   height: var(--r-switch-control-size);
-  &:not(:last-child) {
-    margin-inline-end: calc(var(--r-switch-control-size) / 4);
-  }
   .r-switch__input:disabled + & {
     opacity: 0.8;
   }